Динамический цвет тела с использованием CKEditor

Я думал об этом и нашел гораздо более простое решение.
Я не использую адаптер CKEditor jQuery, поэтому вам может потребоваться изменить его в соответствии с вашей ситуацией.

Я протестировал его, используя стандартный подход к интеграции JavaScript.

Краткий обзор:
установка переменных.
создание экземпляра редактора.

Вставьте этот вызов функции «addCss»:

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

Вот и все. Вот пример, основанный на вашем коде:

// 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 можно переместить в файл конфигурации, если вы предпочитаете (поместите его вне функции editorConfig).

Будь здоров, Джо

Оставив более сложный подход, кто-то может найти эти концепции полезными.

Вы можете использовать ( 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();
      });
    }
  );
});

Будь здоров, Джо

ответ codewaggle хороший, но если вы хотите установить встроенные стили в элементе <body> редактора, вы также можете сделать это, используя:

editor.document.getBody().setStyle()

or

editor.document.getBody().setStyles()

Однако вам нужно будет повторять это каждый раз после вызова editor.setData() и после того, как пользователь переключится обратно в режим wysiwyg (из исходного режима), потому что эти вещи воссоздают iframe редактора. Чтобы сделать все это, задайте свои стили с помощью функции, скажем, setEditorStyle, в которой вы сначала проверяете, что editor.mode==='wysiwyg' (в противном случае editor.document имеет значение null), а затем добавляете эту функцию в качестве прослушивателя событий для событий instanceReady и mode. ; и, возможно, также событие contentDom, если вы когда-либо вызывали setData() и не хотите впоследствии вызывать его вручную.

См. некоторые другие ответы StackOverflow здесь и здесь

Динамическое изменение цвета кузова CKEditor

Предложение эксперта