CKEditor：编辑器主体的类或ID

Question

我在页面上有一个CKEditor实例。我试图给CKEditor的主体一个类或ID，以便它匹配我在样式表中定义的一些样式。

有一个API documentation可以访问相应的DOM元素，但我似乎无法让它工作。我试图以这种方式查询的所有对象都是未定义的。

有人知道如何做到这一点，或者如何正确处理CKEditor的dom元素？

  

编辑：谢谢大家，nemisj的答案为我做了，但出于某种原因，我没有在这个问题中设置“已接受”的复选标记。

Answer 1

虽然在提出此问题时，API的这一部分并未从2.x移植，但现在使用bodyId和bodyClass配置选项会更容易。

当然，nemisj的解释很好，可以用于其他事情，但你必须记住，每次你从设计切换到源视图时，iframe都会被破坏，所以你需要如果您手动执行此操作，请重新分配属性。

Answer 2

如果您正在谈论CKEditor（版本3），那么有可能在编辑器本身中获取任何DOM实例。每个CKEditor实例都通过“document”属性引用它的文档。

var documentWrapper = edit.document; 

此引用表示所有CKEditor节点的一些公共包装器，但它也直接引用其节点。您可以通过获取[“$”]属性来检索。

var documentNode = documentWrapper.$; // or documentWrapper['$'] ;

documentNode将表示iframe中文档节点的DOM实例。拥有DOM实例之后，您可以使用DOM结构，附加，删除，替换类，重建等来执行任何操作。例如

documentNode.body.className = "zork";

我希望这已经足够了。

Answer 3

我今天遇到了同样的问题，试图像这样设置bodyClass：

CKEDITOR.replace（'editor1'， {     fullPage：true，     bodyClass：'myClass'

}）;

我发现在这个版本（3.3.1）中，如果你设置fullpage = true，设置bodyId或bodyClass不起作用，但如果你设置fullPage = false，它确实有效。

希望这有帮助。

Answer 4

来自Manual：

<static> {String|Array} CKEDITOR.config.contentsCss

用于将样式应用于内容的CSS文件。它应该反映在要使用内容的最终页面中使用的CSS。

config.contentsCss = '/css/mysitestyles.css';
config.contentsCss = ['/css/mysitestyles.css', '/css/anotherfile.css'];

默认值：

<CKEditor folder>/contents.css

Answer 5

不知道那个编辑器，但是因为它们都以相同的方式工作，你可能无法访问实例创建的DOM元素，因为它们是在页面加载完成后创建的，并且DOM也已准备就绪。因此，之后添加的任何新DOM元素，理论上都不存在。

尽管如此，你可以试试TinyMCE editor，它与jQuery javascript库有“合作伙伴关系”来操纵你想要的一切，编辑器本身很容易在几乎所有方面改变。

Answer 6

您的查询可能会返回undefined，因为编辑器实例放在iFrame中并且您的查询没有在那里查找？

Answer 7

在config.js中，编写此代码

config.bodyId = 'contents_id';

然后你会在Ckeditor中看到正文ID，但是当你想要访问这个id时，请使用

$('#parent_id').find('iframe').contents().find('#within_iframe')

$('#parent_id')表示form_id或任何父母，只是访问iframe的方式。按照此代码访问iframe中的元素