在 TinyMCE 或 CKEditor 中更改内容 CSS

Question

我有一个表单，我想在其中编辑 HTML 模板。它有 2 个文本区域，一个用于 HTML，另一个用于 CSS。

我想为 HTML 文本区域使用 TinyMCE 或 CKEditor。

有什么方法可以更改其中任何一个中的内容 CSS 以匹配运行时 CSS 文本区域中的 CSS，所以当我更改 CSS 时它会自动加载到编辑器中？

谢谢。

Answer 1

我没有使用 CKEditor 的经验，但我知道使用 TinyMce 是可能的。您需要做的是编写一个自己的插件来提供必要的功能。

第二个文本区域（带有您的 css 的区域）中的 OnNodeChange，您需要更新第一个编辑器 iframe 的头部。在特殊操作（例如 onNodeChange）上执行的这段代码 sn-p 应该为您指明正确的方向：

var DEBUG = false;
var css_code = tinymce.editors[1].getContent(); // get content of 2nd editorinstance on page (your css)


iframe_id = tinymce.editors[0].id+'_ifr';

with(document.getElementById(iframe_id).contentWindow){
    var h=document.getElementsByTagName("head");
    if (!h.length) {
        if (DEBUG) console.log('length of h is null');
        return;
    }
    var newStyleSheet=document.createElement("style");
    newStyleSheet.type="text/css";
    h[0].appendChild(newStyleSheet);
    try{
        if (typeof newStyleSheet.styleSheet !== "undefined") {
        newStyleSheet.styleSheet.cssText = css_code;
    }
    else {
        newStyleSheet.appendChild(document.createTextNode(css_code));
        newStyleSheet.innerHTML=css_code;
    }
}

请注意，此代码每次调用时都会添加一个新样式表 - 会增加编辑器 iframe 的头部。所以我认为最好的做法是在应用新样式之前清理最后插入的样式。删除头部的最后一个节点 shozld 就足够了。