如何在 ckeditor 初始化后更改加载的样式表

发布于 2024-08-21 10:56:13 字数 279 浏览 4 评论 0原文

是否可以动态更改 ckeditor 实例加载的样式表?

即我有一个具有以下配置的 ckeditor 实例: CKEDITOR.replace('_content', {"resize_enabled":true, "customConfig":"/kmt/js/ckeditor_config.js","contentsCss":"/custom/ckeditorstyle.css","contentWidth":"240" });

不是很复杂。之后我想允许用户动态更改 contentcss 属性......

Is it possible to dynamically change the loaded stylesheet for a ckeditor instance?

i.e. i have a ckeditor instance with the following config:
CKEDITOR.replace('_content', {"resize_enabled":true, "customConfig":"/kmt/js/ckeditor_config.js","contentsCss":"/custom/ckeditorstyle.css","contentWidth":"240"});

Not very complicated. Afterwards i want to allow the user to dynamically change the contentscss attribute...

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

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

发布评论

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

评论(2

凑诗 2024-08-28 10:56:13

您可以结合这个问题的答案中给出的代码 (如何在运行时动态添加样式表)与接受的 回答这个SO问题(如何在JavaScript中访问CKEditor实例的body元素)。

You could combine the code given in the answer to this SO question (How to dynamically add style sheets during runtime) with the accepted answer to this SO question (How to access the body element of a CKEditor instance in JavaScript).

余罪 2024-08-28 10:56:13

感谢 Pekka,我通过以下方式实现了解决方案:

$('#stylesheeetSelector').change(function() {
    $.post('/getStylesheet', {id: $(this).val()}, function(data) {
        for(i in CKEDITOR.instances) {
            var linkElement = $(CKEDITOR.instances[i].document.$).find('link');
            if (data.editorStylesheet > 0) {
                if (linkElement.length == 0) {
                    $(CKEDITOR.instances[i].document.$).find('head').append('<link rel="stylesheet" type="text/css" href="'+ data.editorStylesheet +'">');
                } else {
                    linkElement.attr('href', data.editorStylesheet)
                }
            } else if (linkElement.length > 0) {
                linkElement.remove();
            }
        }
    });
});

它的工作原理是获取填充有(以及其他内容)样式表 URL 的 JSON 对象,并设置(或删除,如果不存在)所选样式表...

干净而简单!

Thanx to Pekka, I achieved the solution via:

$('#stylesheeetSelector').change(function() {
    $.post('/getStylesheet', {id: $(this).val()}, function(data) {
        for(i in CKEDITOR.instances) {
            var linkElement = $(CKEDITOR.instances[i].document.$).find('link');
            if (data.editorStylesheet > 0) {
                if (linkElement.length == 0) {
                    $(CKEDITOR.instances[i].document.$).find('head').append('<link rel="stylesheet" type="text/css" href="'+ data.editorStylesheet +'">');
                } else {
                    linkElement.attr('href', data.editorStylesheet)
                }
            } else if (linkElement.length > 0) {
                linkElement.remove();
            }
        }
    });
});

It works by fetching a JSON object filled with (amoungst other things) the stylesheet URL and sets (or removes if none present) the selected stylesheet...

Clean and simple!

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