javascript – 使用CKEditor的动态正文颜色

2019-07-05 03:33:10 阅读：253 来源： 互联网

我有一个关于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的使用失败.有没有办法做到这一点？我在网站上匆匆寻找答案,却找不到答案.我希望有人在这里有答案.

解决方法:

我正在考虑这个问题,我提出了一个更简单的解决方案.
我没有使用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();
      });
    }
  );
});

好吧,
乔

标签：jquery,javascript,css,ckeditor
来源： https://codeday.me/bug/20190705/1383462.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

javascript – 使用CKEditor的动态正文颜色