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

Question

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

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

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

谢谢。

Answer 1

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

在第二个文本区域（带有 css 的文本区域）中的 OnNodeChange 中，您需要更新第一个编辑器 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;
    }
}

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