CKEditor:编辑器主体的类或 ID

发布于 2024-08-13 01:21:21 字数 404 浏览 3 评论 0原文

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

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

有谁知道如何做到这一点,或者如何正确处理 CKEditor 的 dom 元素?

编辑:谢谢大家,nemisj 的回答为我做到了,但由于某种原因,我无法在这个问题中设置“已接受”复选标记。

I have an instance of CKEditor on a page. I am trying to give the CKEditor's body a class or ID so it matches some styles I have defined in a stylesheet.

There is a API documentation that should give access to the respective DOM elements, but I can't seem to get it working. All objects I try to query that way turn out undefined.

Does anybody know how to do this, or how to properly address CKEditor's dom elements?

Edit: Thanks folks, nemisj's answer did it for me but for some reason, I don't get to set the "accepted" checkmark in this question.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(7

日暮斜阳 2024-08-20 01:21:21

尽管在提出此问题时 API 的该部分尚未从 2.x 移植,但现在使用 bodyIdbodyClass 配置选项。

当然,nemisj 的解释很好,对其他事情也很有用,但你必须记住,每次你从设计(到源视图)切换时,iframe 都会被破坏,所以你需要重新分配你的属性如果你手动做的话。

Although that part of the API wasn't ported from 2.x at the time that this question was placed, now it's easier to use the bodyId and bodyClass config options.

Of course, the explanation by nemisj is good and can be useful for other things, but you must remember that each time that you switch away from design (to source view), the iframe is destroyed, so you'll need to reassign your attributes if you do it manually.

把梦留给海 2024-08-20 01:21:21

如果您正在谈论 CKEditor(版本 3),那么就有可能在编辑器本身内获取任何 DOM 实例。每个 CKEditor 实例都通过“document”属性引用其文档。

var documentWrapper = edit.document; 

该引用代表所有 CKEditor 节点的一些公共包装器,但它也具有对其节点的直接引用。您可以通过获取 ["$"] 属性来检索。

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

documentNode 将表示 iframe 内文档节点的 DOM 实例。拥有 DOM 实例后,您可以对 DOM 结构执行任何您想要执行的操作,追加、删除、替换类、重建等。例如,

documentNode.body.className = "zork";

我希望这应该足够了。

] ;

documentNode 将表示 iframe 内文档节点的 DOM 实例。拥有 DOM 实例后,您可以对 DOM 结构执行任何您想要执行的操作,追加、删除、替换类、重建等。例如,

我希望这应该足够了。

If you are talking about CKEditor( version 3), then there is a possibility to get any DOM instance inside the editor itself. Every CKEditor instance has reference to it's document via "document" property.

var documentWrapper = edit.document; 

This reference represent some public wrapper for all CKEditor nodes, but it also has the direct reference to its node. You can retrieve by getting ["$"] property.

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

documentNode will represent the DOM instance of the document node inside the iframe. After you have the DOM instance, you can do whatever you want to do with DOM structure, Append, remove, replace classes, rebuild, etc. For example

documentNode.body.className = "zork";

I hope this should be enough.

] ;

documentNode will represent the DOM instance of the document node inside the iframe. After you have the DOM instance, you can do whatever you want to do with DOM structure, Append, remove, replace classes, rebuild, etc. For example

I hope this should be enough.

鹤仙姿 2024-08-20 01:21:21

今天我在尝试像这样设置 bodyClass 时遇到了同样的问题:

CKEDITOR.replace( 'editor1',
{
全页:真实,
bodyClass : 'myClass'

});

我发现在这个版本(3.3.1)中,如果设置fullpage = true,则设置bodyId或bodyClass不起作用,但如果设置fullPage = false,则确实起作用。

希望这有帮助。

I had the same problem today in trying to set the bodyClass like this:

CKEDITOR.replace( 'editor1',
{
fullPage : true,
bodyClass : 'myClass'

});

What I found is that in this version (3.3.1), if you set fullpage = true, setting the bodyId or bodyClass does not work, but if you set fullPage = false, it does work.

Hope this helps.

香橙ぽ 2024-08-20 01:21:21

来自手册

{String|Array} CKEDITOR.config.contentsCss

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

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

默认值:

/contents.css

From the Manual:

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

The CSS file(s) to be used to apply style to the contents. It should reflect the CSS used in the final pages where the contents are to be used.

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

Default Value:

<CKEditor folder>/contents.css

甜点 2024-08-20 01:21:21

在 config.js 中,编写此代码

config.bodyId = 'contents_id';

,然后您会在 Ckeditor 中看到 body id,但是当您想访问此 id 时,请使用

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

$('#parent_id') 表示 form_id 或任何父级,这是访问 iframe 的简单方式。按照此代码访问 iframe 中的元素

In config.js, write this code

config.bodyId = 'contents_id';

then you see body id in Ckeditor but when you want to access this id please use

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

there $('#parent_id') means form_id or any parent which is simply way to access iframe. follow this code to access element in iframe

情话已封尘 2024-08-20 01:21:21

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

不过,您可以尝试 TinyMCE 编辑器,它与 jQuery javascript 库有“合作伙伴关系”来操作您想要的所有内容,并且编辑器本身几乎在所有方面都非常容易更改。

Don't know that editor, but as they all work the same way, you probably can't access the DOM elements created by the instance because they are created after the page has finished loading, and the DOM is ready as well. So, any new DOM elements added after that, theorically will not exist.

Still, you can try TinyMCE editor, wich has a "partnership" with jQuery javascript library to manipulate all you want, and the editor itself is pretty easy to change in almost every way.

櫻之舞 2024-08-20 01:21:21

您的查询可能返回未定义,因为编辑器实例放置在 iFrame 内并且您的查询没有在那里查找?

Your queries may return undefined because the editor instances are placed inside an iFrame and your query is not looking there?

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文