Question

我正在使用Rails 3.0.9和ckedit gem。

我在视图中有以下代码。

<%= 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);
      }
    }
  );
});

好吧，
乔

Answer 2

您是否尝试将其添加为附加参数？

<%= f.cktext_area :content, <params>, :html => {:class => 'error'} %>

然后，您可以使用条件逻辑来设置正确的类名。

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

2 个答案: