使用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