在运行中更改内容css tinymce或ckeditor

我没有使用键盘编辑器的经验,但我知道使用Tinymce是可能的。您需要做的是编写一个自己的插件,它将提供必要的功能。

在第二个文本区域(使用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头。所以我认为最佳实践是在应用新样式之前清理最后插入的样式。移除头部的最后一个节点就足够了。