Question

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

我想将TinyMCE或CKEditor用于HTML textarea。

有没有办法更改其中任何一个内容CSS以匹配运行中CSS textarea中的CSS，所以当我更改CSS时它会自动加载到编辑器中？

感谢。

Answer 1

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

第二个textarea中的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;
    }
}

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

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

1 个答案: