更改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错误“ 未捕获的TypeError：无法读取未定义的属性'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);

}）;

我可以在 editor.html 页面中更改编辑器部分的CSS，而不能更改工具栏的CSS。但是与此有关的是，我遇到了一个问题，每当我单击工具栏上的任何按钮（如插入图像，粗体斜体等）时，它都无法定位到在jquery的帮助下用我自己的htmlEditor替换的编辑器，则会出现错误“ < em>未捕获的TypeError：无法读取未定义的属性“ getSelection” ”。

现在，我需要 （i）我应该能够更改ckeditor4的编辑器部分的CSS （ii）或者，如果如上所述，我用自己的html更改了编辑器，并带有除iframe中url以外的所有div和类的精确副本，则我应该能够将工具栏按钮定位到自己创建的编辑器上。

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>