更改 ckeditor4 的编辑器内容

Question

我的要求是改变里面编辑器内容部分的样式

HTML

<div id="cke_1_contents" class="cke_contents cke_reset">
    <iframe src(unknown) ...> .. </iframe>
</div>

在 div 中，编辑器 div 中有一个 iframe，这使我无法使用 css 更改 iframe 中 DOM 元素的样式。

我试图在 jQuery 的帮助下进行更改，但无法做到。所以我创建了一个名为 editor.html 的新页面，我在其中复制了 <iframe> ..... </iframe> 中提供的所有内容，并在 jquery 的帮助下，我更改了 iframe 的 src 属性。

现在，当我点击 ckeditor4 工具栏上的任何按钮时，我遇到了一个问题，然后它给出 javascript 错误“Uncaught TypeError: Cannot read 属性 'getSelection' 未定义”。请告诉我如何自定义 <div id="cke_1_contents" 的内部内容并通过工具栏按钮定位此区域？

我正在添加更多信息。请看下图：

我从红色矩形中选择的这段代码中复制了所有内容，并写入 editor.html 页面并使用以下 jquery，我用我自己的代码替换了。我写了以下 jQuery:

CKEDITOR.on('instanceReady', function() { 
            htmlEditor = '<span id="cke_52" class="cke_voice_label">Press ALT 0 for help</span>';
            htmlEditor += '<iframe src="editor.html" frameborder="0" class="cke_wysiwyg_frame cke_reset" style="width: 100%; height: 100%;" title="Rich Text Editor, editor1" aria-describedby="cke_52" tabindex="0" allowtransparency="true"></iframe>';
            $('#cke_1_contents').html(htmlEditor);

});

而且我可以更改 css 编辑器部分，而不是工具栏，只能更改 editor.html 页面中的编辑器部分。但是有了这个，我遇到了一个问题，每当我点击工具栏上的任何按钮，如插入图像、粗体斜体等，它都不会针对用我自己的 htmlEditor 在 jquery 的帮助下替换的编辑器，它会给出错误“Uncaught TypeError: Cannot read 属性 'getSelection' of undefined”。

现在，我需要， (i) 我应该能够更改 ckeditor4 的编辑器部分的 css (ii) 或者，如果我用自己的 html 更改了编辑器，并且像上面那样在 iframe 中使用所有 divs 和类的精确副本，但 url 除外，我应该能够将工具栏按钮定位到我自己创建的编辑器。

Answer 1

访问 iframe 文档见下文，演示 jsfiddle

<script src="//cdn.ckeditor.com/4.11.1/standard/ckeditor.js"></script>

<textarea id="editor"></textarea>
<script>
  var editor = CKEDITOR.replace('editor');
  editor.setData('Hello world!');

  CKEDITOR.on("instanceReady", function(event) {
    var iframe = document.querySelector('#cke_1_contents iframe');
    var cke_doc = iframe.contentDocument || iframe.contentWindow.document;
    cke_doc.body.style = `background-color: yellow;
            font-size: 28px;
            text-shadow: 2px 2px #b4bd21;`
  });
</script>

更改 ckeditor4 的编辑器内容

Change editor contents of ckeditor4

html

css

jquery

ckeditor4.x