Question

I am using Rails 3.0.9 with the ckedit gem.

I have the following code in a view.

<%= f.cktext_area :content, :toolbar => 'Reduced', :width => 550, :height => 300 %>

How can I style the resulting editor to set the background-color of the edit area to indicate that validation has failed? For <%=text_area I can set :class=>'error' but I can’t figure out the correct approach.

Many thanks for your help – I’ve searched everywhere for a decent answer this!

Answer 1

I haven’t worked with the ckedit gem (or Rails for that matter), but here are some config settings and methods you can try.

---

You can assign the class (or ID) when you create the instance using a config setting:

<%= f.cktext_area :content, :bodyClass => 'yourBodyClass', :bodyId => 'yourBodyId'>

Here’s the api page:
http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.config.html#.bodyClass

---

You can use the addCss method when you create the instance. This is an example that works when creating the editor instance with JavaScript.

It’s possible to put this in your CKEditor config file which might be better in your case because you’re creating the CKEditor object using server side code. See below for further details.

CKEDITOR.replace( 'content' );
CKEDITOR.instances.content.addCss( 'body { background-color: red; }' );

Here’s the API page:
http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.editor.html#addCss

---

You may want to change the color based on circumstances. If so, you can put a JavaScript or Rails variable in place of the color to make it dynamic.

var colorValue = '<%= colorVariable >';

CKEDITOR.instances.content.addCss( 'body { background-color: '+colorValue+'; }' );
CKEDITOR.instances.content.addCss( 'body { background-color: '<%= colorVariable >'; }' );

Not sure about the Rails syntax, but you get the idea.

---

Putting the “addCss” method in your CKEditor config file:
You need to put it at the top of the file before “CKEDITOR.editorConfig” is called. It use’s the exact same syntax as above and can use a variable to set a dynamic color as described above.

---

The “addCss” method has no effect if called after the editor instance is loaded.

If your validation is being done with JavaScript and you need set the background color after everything has loaded (without reloading the page), you can try the following approach.

You can insert the following code into the page that contains the editor instance. You would call “setIframeBackground()” when validation fails. If the color doesn’t change, you can hard code it and remove the parameter from the function.

The code assumes that you used the “bodyId” config option described above to set the Id of the content area iframe body to “yourBodyId”.

One caveat, I used jQuery to write this code.

// Wait for the document ready event
$(document).ready(function(){

  // Wait for the instanceReady event to fire for the "content" instance
  // The instance name is "content"
  CKEDITOR.instances.content.on( 'instanceReady',
    function( instanceReadyEventObj )
    {
      var currentEditorInstance = instanceReadyEventObj.editor;
      var iframeDoc=null;

      // Create the function
      function setIframeBackground( colorVariable )
      {
        // The CKEditor content iframe doesn't have a Name, Id or Class
        // So, we'll assign an ID to the iframe
        // it's inside a table data cell that does have an Id.
        // The Id of the data cell is "cke_contents_content"
        // Note that the instance name is the last part of the Id
        // I'll follow this convention and use an Id of "cke_contents_iframe_content"

        $("#cke_contents_content iframe").attr("id", "cke_contents_iframe_content");

        // Now use the iframe Id to get the iframe document object
        // We'll need this to set the context and access items inside the iframe

        $('#cke_iframe_content').each(
          function(){ iframeDoc=this.contentWindow.document;}
        );

        // Finally we can access the iframe body and set the background color.
        // The Id of the body is set to "yourBodyId".
        // We use the iframe document object (iframeDoc) to set the context.
        // We use the "colorVariable" variable assigned in the function call.

        $('#' + yourBodyId, iframeDoc).css("background-color", colorVariable);
      }
    }
  );
});

Be Well,
Joe