ckEditor 中的正文持久内联样式答案

【问题标题】：Body persitant inline style in ckEditorckEditor 中的正文持久内联样式
【发布时间】：2010-08-31 15:49:03
【问题描述】：

我整天都在尝试为 ckeditor 实例的 body 标签设置一个持久的样式属性。我在 ckeditor.config api 中找不到类似 bodyStyle 的东西（只有 bodyId 和 bodyClass）。所以我自己尝试了，使用以下解决方案（使用jQuery）：

$(this).find('textarea.editor').ckeditor().ckeditorGet().on( 'instanceReady', function( e ){
  var documentWrapper = e.editor.document,
    documentNode = documentWrapper.$,
    inh = $(documentNode.body);
    inh.css('background', inheritParentBackground);
});

Wich 工作得很好，但是在我调用 .updateElement() 之后，或者如果我单击源按钮两次，它会再次删除所有样式，并且不会再次调用“instanceReady”。我尝试手动触发它，但随后它首先运行样式更新并直接从 ckeditor 覆盖。

我实际尝试做的是：我想在主页中编辑一个 Div，在单击编辑后，使用 ckeditor 编辑一个 ajax 弹出窗口，我希望编辑器具有相同的高度、宽度和背景，但我不能通过 bodyId 或 bodyClass 处理这个问题，所以我想我需要一个 bodyStyle 或者有人有不同的想法。

【问题讨论】：

它是“持久的”而不是“持久的”。我通常不会更正人们的拼写，但在这种情况下，它可能会影响使用搜索找到此问题的能力，因此您应该修复它！

标签： javascript jquery coding-style ckeditor

【解决方案1】：

http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.html#.style 是你要找的吗？

【讨论】：

不，您只能使用此静态方法定义样式，但我看不到可以将其附加到实例的位置。关闭的是：docs.cksource.com/ckeditor_api/symbols/… 但这并没有添加样式属性，它的优先级最低，所以规则被所有内容覆盖

【解决方案2】：

我发现了一个肮脏的黑客：

$(this).find('textarea.editor').ckeditor({
        bodyId: Id+'" style="'+style,
    });

不是很好，但它有效;-)

【讨论】：

【解决方案3】：

你有两个选择。您可以通过以下方式在instanceReady 处理程序中添加内联样式表：

var myStyleSheet = e.editor.document.appendStyleText("body {background:...}");

这会将一个空的<style> 元素附加到编辑器（iframed）文档的头部，其中包含提供的文本。返回值是一个 CSSStyleSheet（一个浏览器 DOM 对象），因此如果您将其保存在某个位置，您可以使用 javascript 中的 DOM 方法添加、删除或修改样式规则。我不确定它们是否会通过模式更改（即单击“Source”两次之后）或调用 setData() 持续存在，但您可以使用“mode”和“contentDom”事件捕获这些内容，然后重新应用 styleSheet事件处理程序。请注意（至少对于“模式”处理程序）您需要检查editor.mode==='wysisyg'，因为editor.document 在源模式下为空。

另一方面，如果你真的想在编辑器的 <body> 元素上设置内联样式，请尝试定义一个函数：

function setEditorStyle(e)
{
    var ed = e.editor;
    if (ed.mode!=="wysiwyg") return;    // don't set styles when in "Source" mode
    // now change whatever styles you want, e.g.:
    ed.document.getBody().setStyles({backgroundColor:"blue",color:"#FFFFFF",...});
    // for setting just 1 style property, you can use .setStyle() instead
}

然后在您的编辑器配置中，您需要添加：

..., on: { instanceReady: setEditorStyle, mode: setEditorStyle, ... }, ...

这将在编辑器 iframe 首次创建后以及切换回“所见即所得”模式（正常编辑，而不是源模式）后设置样式。

我不知道为什么您的样式会通过调用 updateElement(); 来重置；我正在做同样的事情（使用 CKEditor v4）并且 updateElement() 不会重置我在 <body> 上设置的内联样式。也许这是随着 CKeditor 版本的改变而改变的。无论如何，如果这是一个问题，您可以在调用 updateElement() 之后再次手动重置样式。（我会说“只需调用 setEditorStyle()”，但如上所示，该函数被编写为需要事件参数 e。相反，您可以重写它以使用外部定义的“ed”变量（例如全局变量） - 即改变

var ed = e.editor;

到

if (!ed) ed = e.editor;

然后您可以在编辑器创建后从 javascript 中的任何位置安全地调用 setEditorStyle()。）

【讨论】：