ckEditor更改文本区域背景颜色

ckEditor4文档地址:https://ckeditor.com/docs/ckeditor4/latest/examples/index.html

先来个工具栏的常用配置:

image.png

上面是CKEditor的工具栏的全部按钮，按照顺序对应的参数名分别如下:

config.toolbar =
  [
    ['Source', '-', 'Save', 'NewPage', 'Preview', '-', 'Templates'],
    ['Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Print', 'SpellChecker', 'Scayt'],
    ['Undo', 'Redo', '-', 'Find', 'Replace', '-', 'SelectAll', 'RemoveFormat'],
    ['Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField'],
    ['Bold', 'Italic', 'Underline', 'Strike', '-', 'Subscript', 'Superscript'],
    ['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', 'Blockquote'],
    ['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock'],
    ['Link', 'Unlink', 'Anchor'],
    ['Image', 'Flash', 'Table', 'HorizontalRule', 'Smiley', 'SpecialChar', 'PageBreak'],
    ['Styles', 'Format', 'Font', 'FontSize'],
    ['TextColor', 'BGColor'],
    ['Maximize', 'ShowBlocks', '-', 'About']
  ];

再来个工具栏的常用配置:

截屏2022-03-31 下午3.15.34.png

对应的代码如下:

this.editor = CKEDITOR.replace('desc_id', {
  toolbar: [
    {
      name: 'document',
      items: ['Source', '-', 'Save', 'NewPage', 'DocProps', 'Preview', 'Print', '-', 'Templates'],
    },
    { name: 'insert', items: ['Flash', 'Table', 'HorizontalRule', 'SpecialChar', 'PageBreak', 'Iframe'] },
    { name: 'clipboard', items: ['Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo'] },
    { name: 'editing', items: ['Find', 'Replace', '-', 'SelectAll', '-', 'SpellChecker', 'Scayt'] },
    {
      name: 'forms',
      items: ['Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField'],
    },
    { name: 'colors', items: ['TextColor', 'BGColor', 'Maximize'] },
    { name: 'simpleupload', items: ['simpleupload'] },
    { name: 'basicstyles', items: ['Bold', 'Italic', 'Underline', 'Strike'] },
    { name: 'links', items: ['Link', 'Unlink', 'Anchor', 'Subscript', 'Superscript'] },
    {
      name: 'paragraph',
      items: ['RemoveFormat', 'NumberedList', 'BulletedList',
        '-', 'Outdent', 'Indent',
        '-', 'Blockquote', 'CreateDiv',
        '-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock',
        '-', 'BidiLtr', 'BidiRtl',
      ],
    },
    { name: 'styles', items: ['Styles', 'Font', 'Image', 'FontSize', 'Format'] },
    { name: 'insert', items: ['Smiley'] },
  ],
  startupFocus: false,
});

更换背景颜色:

ckEditor4禁用的时候,只有工具栏有灰色背景,文本域依旧是白色背景,测试要求禁用的时候,文本域也要有灰色背景,如下图所示:

截屏2022-03-19 下午12.30.10.png

查过文档,文档里并没有这项支持,实现步骤如下:

    this.editor = CKEDITOR.replace('desc_id', {
      height: 200,
      toolbar: 'Basic',
      readOnly: this.props.disabled//禁用
    });
// editor初始化完成
    this.editor.on('instanceReady', (e) => {
      if (this.props.disabled) {//禁用时:修改背景色和字体颜色,重点如下:
        e.editor.document.getBody().setStyle('background-color', '#f8f8f8')
        e.editor.document.getBody().setStyle('color', '#ccc')
        e.editor.on('contentDom', function () {
          e.editor.document.getBody().setStyle('background-color', '#f8f8f8')
          e.editor.document.getBody().setStyle('color', '#ccc')
        })
      }
    })