Rails application encounters issue where CKEditor is removing style elements from span classes

Question

Rails application encounters issue where CKEditor is removing style elements from span classes

In my current setup using Rails 4.1.4, Ruby 2.1.2, and CKEditor 4.1.1 integrated with Rails Admin, I am facing an issue. Whenever I enter text in the CKEditor text area and apply a font or font size, it saves successfully. However, upon viewing the content, instead of seeing

<span style="font-size 36pt">text</span>

, I only see <span>text</span>.

I have experimented with both config.allowedContent = true; and

config.extraAllowedContent = 'style;*[id,rel](*){*}';

, as well as using both configurations simultaneously. Yet, the problem persists.

I initially suspected that the issue might be related to the rails_html_sanitizer. At present, my configuration for rails_html_sanitizer includes:


HTML::WhiteListSanitizer.allowed_tags.merge(%w(iframe table tbody tr td tfoot thead colgroup col style))
HTML::WhiteListSanitizer.allowed_attributes.merge(%w(target))

My desired outcome is to utilize CKEditor's font and font size options without losing the style attributes from the span classes. Most solutions I have come across suggest modifying the config.js file, but my attempts have been unsuccessful thus far. Any guidance or alternative approaches would be greatly appreciated. Thank you.

javascript html css ruby-on-rails ckeditor

Answer 1

Answer №1

In a previous instance, I had the following code snippet:


    <% @docs.each do |doc| %> 
      <%= doc.title.html_safe %>
      <%= doc.discription.html_safe %>
      <%= doc.text.html_safe %>
    <% end %>

To correct this issue, I decided to incorporate the 'sanitize' method (considering I am utilizing rails_html_sanitizer, which has 'style' whitelisted as indicated in the original question):


    <% @docs.each do |doc| %> 
      <%= sanitize doc.title.html_safe %>
      <%= sanitize doc.discription.html_safe %>
      <%= sanitize doc.text.html_safe %>
    <% end %>

Alternatively, you could also address this problem by using the 'raw' method:


    <% @docs.each do |doc| %> 
      <%= sanitize doc.title.html_safe %>
      <%= sanitize doc.discription.html_safe %>
      <%= sanitize doc.text.html_safe %>
    <% end %>

Answer 2

In a previous instance, I had the following code snippet:


    <% @docs.each do |doc| %> 
      <%= doc.title.html_safe %>
      <%= doc.discription.html_safe %>
      <%= doc.text.html_safe %>
    <% end %>

To correct this issue, I decided to incorporate the 'sanitize' method (considering I am utilizing rails_html_sanitizer, which has 'style' whitelisted as indicated in the original question):


    <% @docs.each do |doc| %> 
      <%= sanitize doc.title.html_safe %>
      <%= sanitize doc.discription.html_safe %>
      <%= sanitize doc.text.html_safe %>
    <% end %>

Alternatively, you could also address this problem by using the 'raw' method:


    <% @docs.each do |doc| %> 
      <%= sanitize doc.title.html_safe %>
      <%= sanitize doc.discription.html_safe %>
      <%= sanitize doc.text.html_safe %>
    <% end %>

Rails application encounters issue where CKEditor is removing style elements from span classes

Answer №1

Similar questions

"Modify the CSS color of h1 based on the presence of a specific class containing spaces in a div

Utilize jQuery or Javascript in WinRT to transfer names between pages seamlessly

Tips for using Python to capture specific HTML snippets

"Enhance your gaming experience with Three JS special effects

leveraging the power of JQuery and Ajax for submitting a form

My Tailwind CSS toggle button disappears in dark mode, why is that happening?

How can I make my webpage fill the entire width of an iPhone screen when in landscape mode using Angular or React?

What is the process for submitting a form on consecutive URLs?

Animation in CSS Appears Jumpy in Chrome

Vue Component, switching state

Breaking down JavaScript arrays into smaller parts can be referred to

I am searching for answers to solve issues related to a JSON file

Is it possible to embed HTML within standard PHP without using alternative methods?

Setting the position of the center to be relative inside a table cell

"Learn how to use socket.io in conjunction with the express generator to create individual sockets for each unique link

Having trouble with protractor's sendKeys function when trying to interact with md-contact-chips

stay at the top of the screen with anchor #link

Issue with Vue multiselect preventing creation of new tags

Array's Javascript length of 0

The data in AngularJS is not being successfully incorporated into the service