ckEditor中的body persitant內聯風格

我正在嘗試整天爲ckeditor實例的body標籤設置peristant風格屬性。我在ckeditor.config api（僅bodyId和bodyClass）中找不到像bodyStyle之類的東西。所以我是想我自己，用以下解決方案（jQuery的使用）：ckEditor中的body persitant內聯風格

$(this).find('textarea.editor').ckeditor().ckeditorGet().on('instanceReady', function(e){ 
    var documentWrapper = e.editor.document, 
    documentNode = documentWrapper.$, 
    inh = $(documentNode.body); 
    inh.css('background', inheritParentBackground); 
});

至極工作得很好，但我叫.updateElement（）或之後，如果我兩次單擊源按鈕，它會再次刪除所有樣式，'instanceReady'不再被調用。我試圖手動啓動它，但它先運行樣式更新並直接從ckeditor覆蓋。

我實際要做的事情：我想在主頁編輯一個div，然後用ckeditor編輯一個ajax彈出窗口，我希望編輯器具有相同的高度，寬度和背景，我可以不處理這個bodyId或bodyClass，所以我想我需要一個bodyStyle或某人有一個不同的想法。

來源

2010-08-31 fehrlich

它的「持久性」而不是「持續性」。我通常不會糾正人們的拼寫，但在這種情況下，它可能會影響使用搜索查找此問題的能力，因此您應該修復它！ – Doin 2013-07-13 16:44:48

我發現了一個骯髒的黑客：

$(this).find('textarea.editor').ckeditor({ 
     bodyId: Id+'" style="'+style, 
    });

不是很漂亮，但它工作;-)

來源

2010-09-01 10:06:39 fehrlich

是http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.html#.style你在找什麼？

來源

2010-08-31 17:40:18 ryan

不，你只能用這個靜態方法定義樣式，但我不會看到我可以將它附加到一個實例。關閉是：http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.editor.html#addCss但是這個doent添加了一個樣式屬性，它具有最低的優先級，所以這個規則被任何東西所覆蓋 – fehrlich 2010-08-31 18:55:08

你有兩個選擇。您可以在instanceReady處理程序通過添加內嵌樣式表：

var myStyleSheet = e.editor.document.appendStyleText("body {background:...}");

這追加的空<style>元素編輯器的（的iframe）文件頭，包含所提供的文本。返回值是CSSStyleSheet（瀏覽器DOM對象），所以如果將它保存在某處，可以使用JavaScript中的DOM方法添加，刪除或修改樣式規則。我不確定他們是否堅持模式更改（即單擊「源」兩次後）或調用setData（），但可以使用「模式」和「contentDom」事件捕獲這些事件，並重新應用styleSheet事件處理程序。請注意（對於'模式'處理程序至少）您需要檢查editor.mode==='wysisyg'，因爲editor.document在源模式下爲空。

在另一方面，如果你真的想直列設置您的樣式編輯器的<body>元素，試圖定義一個函數：

function setEditorStyle(e) 
{ 
    var ed = e.editor; 
    if (ed.mode!=="wysiwyg") return; // don't set styles when in "Source" mode 
    // now change whatever styles you want, e.g.: 
    ed.document.getBody().setStyles({backgroundColor:"blue",color:"#FFFFFF",...}); 
    // for setting just 1 style property, you can use .setStyle() instead 
}

那麼你編輯的配置中，需要添加：

..., on: { instanceReady: setEditorStyle, mode: setEditorStyle, ... }, ...

這將在首次創建編輯器iframe之後以及切換回'wysiwyg'模式（正常編輯，而非源模式）之後設置樣式。

我不知道爲什麼你的樣式正在通過調用updateElement（）重置。我正在做同樣的事情（使用CKEditor v4），並且updateElement（）不會重置我在<body>上設置的內聯樣式。也許這是CKeditor版本所改變的。無論如何，如果這是一個問題，您可以在調用updateElement（）之後再次手動重置樣式。（我會說「只是調用setEditorStyle（）」，但是如上所示，該函數被編寫爲需要一個事件參數e。您可以改寫它以使用外部定義的「ed」變量（例如全局變量） - 即改變

var ed = e.editor;

到

if (!ed) ed = e.editor;

然後你就可以安全地從任何一點在你的JavaScript編輯器創建後調用setEditorStyle（）。）

來源

2013-07-13 15:51:32 Doin

ckEditor中的body persitant內聯風格

回答

相關問題