更改內容在TinyMCE或CKEditor運行中的CSS

Question

我有一個表單，我想在其中編輯HTML模板。它有2個textareas，一個用於HTML，另一個用於CSS。

我想使用TinyMCE或CKEditor作爲HTML textarea。

有沒有什麼辦法可以改變其中任何一個CSS CSS textarea在運行中的內容CSS，所以當我更改CSS時，它會自動加載到編輯器中？

謝謝。

Answer 1

我沒有使用CKEditor的經驗，但我知道它可能與TinyMce。你需要做的是寫一個自己的插件，它將提供必要的功能。

OnNodeChange在第二個textarea（帶有你的css的那個）中，你需要更新第一個編輯器iframe的頭部。 - 在提高成品

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

注意，這個代碼將添加一個新的樣式表，每次它被稱爲：要在專項行動（例如onNodeChange）應該指向你到正確的方向執行該代碼段編輯器iframes頭。所以我認爲最好的做法是在應用新的樣式之前清理最後插入的樣式。去掉頭部的最後一個節點就足夠了。