Rails 4.2.5+Active Admin环境下图片title无法在浏览器渲染问题

Hey there, let's figure out why your image titles aren't showing up in browsers even though your Rails backend has them stored correctly. I’ve tackled similar CKEditor + Rails issues before, so here are the most likely fixes to walk through:

The most common gotcha here is Rails' default HTML escaping. If you’re rendering your article content like this in your view:

<%= @article.content %>

Rails will escape all HTML attributes (including title) into entities like ", which browsers don’t recognize as valid attributes. Fix this by rendering the raw, unescaped HTML:

<%= raw @article.content %>
<!-- Or use the shorthand for raw output -->
<%== @article.content %>

Test this first—it’s the quickest fix if this is the root cause.

CKEditor has a built-in allowedContent setting that might be filtering out the title attribute by default. Head to your CKEditor config file (usually app/assets/javascripts/ckeditor/config.js) and update it to explicitly allow the title attribute for images:

CKEDITOR.editorConfig = function( config ) {
  // Keep your existing configs, then add this:
  // Option 1: Allow all content (safe for admin since users are trusted)
  config.allowedContent = true;
  
  // Option 2: Fine-grained control (only allow img with src, alt, and title)
  // config.allowedContent = 'img[src,alt,title]';
};

If you’re using the ckeditor-rails gem, double-check that this config is being loaded properly in your Active Admin setup.

Active Admin uses Rails’ HTML sanitizer to clean submitted content, and it might be stripping out the title attribute. Update your Active Admin initializer (config/initializers/active_admin.rb) to allow the title attribute for images:

ActiveAdmin.setup do |config|
  # ... your other configs ...
  
  config.before_action do
    # Add 'title' to the list of allowed attributes
    allowed_attrs = Rails::Html::WhiteListSanitizer.allowed_attributes + ['title']
    config.action_view.sanitized_allowed_attributes = allowed_attrs
    
    # Ensure img tags are allowed (they should be by default, but double-check)
    allowed_tags = Rails::Html::WhiteListSanitizer.allowed_tags + ['img']
    config.action_view.sanitized_allowed_tags = allowed_tags
  end
end

This tells the sanitizer to leave the title attribute intact when saving articles.

Even if your console shows the title, confirm the actual HTML stored in your database includes the title attribute. Run this in your Rails console:

puts Article.last.content

Look for the img tag—does it look like <img src="/uploads/image.jpg" title="Your Image Title" alt="...">? If the title is missing here, the problem is in how CKEditor is saving the image during upload. Check your CKEditor upload plugin settings to make sure the title parameter is being captured and included in the generated HTML.

If all the above checks out, open your article in a browser, right-click the image, and select "Inspect". Look at the img tag in the dev tools:

• If the title attribute is present but the tooltip doesn’t show up: This is rare, but check if any custom JS or CSS is overriding the browser’s default title tooltip behavior.
• If the title attribute is missing entirely: Go back through steps 2-4 to find where it’s being stripped.

内容的提问来源于stack exchange，提问作者batshoes