Javascript 在TinyMCE或CKEditor中运行时更改内容CSS

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

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

有没有办法更改其中任何一个CSS中的内容以匹配运行时CSS文本区域中的CSS，因此当我更改CSS时，它会自动加载到编辑器中

---

谢谢。

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

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

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;
    }
}

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