javascript - 如何在rails中设置cktext_area的背景颜色/图像

Question

我正在使用 Rails 3.0.9 和 ckedit gem。

我在 View 中有以下代码。

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

如何设置生成的编辑器的样式以设置编辑区域的背景颜色以指示验证失败？对于 <%=text_area我可以设置:class=>'error'但我无法找出正确的方法。

非常感谢您的帮助 - 我到处寻找合适的答案!

Answer 1

我还没有使用过 ckedit gem(或 Rails)，但这里有一些您可以尝试的配置设置和方法。

<小时/>

您可以在使用配置设置创建实例时分配类(或 ID):

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

这是 API 页面:
http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.config.html#.bodyClass

<小时/>

您可以在创建实例时使用addCss方法。这是使用 JavaScript 创建编辑器实例时有效的示例。

可以将其放入 CKEditor 配置文件中，这在您的情况下可能会更好，因为您正在使用服务器端代码创建 CKEditor 对象。请参阅下文了解更多详细信息。

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

这是 API 页面:
http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.editor.html#addCss

<小时/>

您可能想根据情况更改颜色。如果是这样，您可以放置​​ JavaScript 或 Rails 变量来代替颜色以使其动态。

var colorValue = '<%= colorVariable >';

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

不确定 Rails 语法，但你明白了。

<小时/>

将“addCss”方法放入 CKEditor 配置文件:
在调用“CKEDITOR.editorConfig”之前，您需要将其放在文件的顶部。它使用与上面完全相同的语法，并且可以使用变量来设置动态颜色，如上所述。

<小时/>

如果在加载编辑器实例后调用“addCss”方法，则不会产生任何效果。

如果您的验证是使用 JavaScript 完成的，并且您需要在加载所有内容后设置背景颜色(无需重新加载页面)，您可以尝试以下方法。

您可以将以下代码插入到包含编辑器实例的页面中。当验证失败时，您将调用“setIframeBackground()”。如果颜色没有改变，您可以对其进行硬编码并从函数中删除该参数。

代码假设您使用上述“bodyId”配置选项将内容区域 iframe 正文的 Id 设置为“yourBodyId”。

需要注意的是，我使用 jQuery 来编写此代码。

// 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);
      }
    }
  );
});

祝你一切顺利，
乔