使用CKEditor的動態主體顏色

Question

我有一個CKEditor的情況，我想解決。我使用jQuery顏色選擇器將背景顏色添加到DIV標記。然後，我允許用戶使用CKEditor編輯Div標籤內容。不過，我注意到，在編輯器加載時，沒有一種簡單的方法可以獲取div標籤的背景顏色，然後將其作爲CKEditor的背景顏色。

我已閱讀bodyClass和bodyId，並不認爲這些解決了我的問題。我沒有一類元素，但內聯樣式聲明像

<div class="tp-header" style="background-color:#CCCCCC;">content</div> 

我調用的CKEditor如下：

var editorId = 'editor1'; 
var instance = CKEDITOR.instances[editorId]; 
var color = $('.' + headerElementClass).css('background-color'); 
if (instance) { CKEDITOR.remove(instance); } 
$('#' + editorId).ckeditor({ toolbar: 'BasicHtml', height: '100px', width: '500px', fullPage: false, bodyClass : 'background-color:' + color }); 
$('#' + editorId).val($('.' + headerElementClass).html()); 

通知bodyClass的失敗使用。有沒有辦法做到這一點？我曾在網站上尋找答案，但找不到答案。我希望這裏有人有答案。

Answer 1

我在想這個，我想出了一個更簡單的解決方案。
我沒有使用CKEditor jQuery適配器，因此您可能需要對其進行修改以適合您的情況。

我用標準的JavaScript集成方法測試了它。

快速概覽：
設置變量。
創建編輯器實例。

插入這個 「addCss」 函數調用：

CKEDITOR.instances[editorId].addCss('body { background-color: '+color+'; }'); 

---

這一切就是這麼簡單。下面是基於您的代碼示例：如果你喜歡（把它放在editorConfig功能外）

// I added the "id" attribute: 
<div id="editor1" class="tp-header" style="background-color:#CCCCCC;">content</div> 

// Declare the variables, I added "headerElementClass". 
var headerElementClass = "tp-header"; 
var color = $('.' + headerElementClass).css('background-color'); 
var editorId = 'editor1'; 

// Create the instance. 
var instanceOne = CKEDITOR.replace(editorId, 
{ 
    toolbar: 'Basic', 
    height: '100px', 
    width: '500px', 
    fullPage: false, 
    customConfig : 'yourCustomConfigFileIfUsed.js' 
}); 

// Insert the "addCss" function call: 
instanceOne.addCss('body { background-color: '+color+'; }'); 

的addCss函數調用可以移動到您的配置文件。

要好吧， 喬

---

離開更復雜的方法，有人可能會發現有用的概念。

您可以使用（bodyClass：'nameOfClass'），然後爲該類的background-color屬性賦值。但這很難，因爲你有一個動態的背景顏色。

安排背景色動態，你可以做這樣的事情： 與您的代碼開始，並繼續使用jQuery的：

var editorId = 'editor1'; 
var instance = CKEDITOR.instances[editorId]; 
var color = $('.' + headerElementClass).css('background-color'); 

// Create a unique body id for this instance "editor1" (bodyIdForeditor1) 
var idForBody = 'bodyIdFor' + editorId; 

if (instance) { CKEDITOR.remove(instance); } 

// Use bodyId instead of the original bodyClass assignment 
$('#' + editorId).ckeditor({ 
    toolbar: 'BasicHtml', 
    height: '100px', 
    width: '500px', 
    fullPage: false, 
    bodyId : idForBody 
}); 

$('#' + editorId).val($('.' + headerElementClass).html()); 

// After both the document and editor instance are ready, 
// assign the background color to the body 

// Wait for the document ready event 
$(document).ready(function(){ 

    // Wait for the instanceReady event to fire for this (editor1) instance 
    CKEDITOR.instances.editor1.on('instanceReady', 
    function(instanceReadyEventObj) 
    { 
     var currentEditorInstance = instanceReadyEventObj.editor; 
     var iframeDoc=null; 

     // Create a function because these steps will be repeated 
     function setIframeBackground() 
     { 
     // The CKEditor content iframe doesn't have a Name, Id or Class 
     // So, we'll assign an ID to the iframe 
     // it's inside a table data cell that does have an Id. 
     // The Id of the data cell is "cke_contents_editor1" 
     // Note that the instance name is the last part of the Id 
     // I'll follow this convention and use an Id of "cke_contents_iframe_editor1" 

     $("#cke_contents_editor1 iframe").attr("id", "cke_contents_iframe_editor1"); 

     // Now use the iframe Id to get the iframe document object 
     // We'll need this to set the context and access items inside the iframe 

     $('#cke_iframe_editor1').each( 
      function(){ iframeDoc=this.contentWindow.document;} 
     ); 

     // Finally we can access the iframe body and set the background color. 
     // We set the Id of the body when we created the instance (bodyId : idForBody). 
     // We use the iframe document object (iframeDoc) to set the context. 
     // We use the "color" variable created earlier 

     $('#' + idForBody, iframeDoc).css("background-color", color); 
     } 

     // Call the function to set the color when the editor instance first loads 
     setIframeBackground(); 

     // When the user switches to "source" view mode, the iframe is destroyed 
     // So we need to set the color again when they switch back to "wysiwyg" mode 

     // Watch for the "mode" event and check if we're in "wysiwyg" mode 
     currentEditorInstance.on('mode', function() 
     { 
     if(currentEditorInstance.mode == 'wysiwyg') 
      setIframeBackground(); 
     }); 
    } 
); 
}); 

要好吧， 喬

Answer 2

codewaggle的回答是一個很好的但如果要在編輯器的<body>元素上設置內聯樣式，則可以使用以下方法：

editor.document.getBody().setStyle() 

或

editor.document.getBody().setStyles() 

但是，你需要調用editor.setData（後每次都重做）和用戶後切換回所見即所得模式（從源代碼模式），因爲這些東西重新創建編輯器iframe。要做到這一切，用一個函數來設置你的風格，說setEditorStyle，在您第一次檢查editor.mode==='wysiwyg'（editor.document否則無效），然後添加函數作爲事件偵聽器instanceReady和mode事件;如果你曾經調用setData（）並且不希望事後手動調用它，也許還會發生contentDom事件。

看到一些其他StackOverflow的答案here和here