CKEDITOR.replace('editor1', 'editor2', {答案

【问题标题】：CKEDITOR.replace( 'editor1', 'editor2', {CKEDITOR.replace('editor1', 'editor2', {
【发布时间】：2014-02-11 12:36:11
【问题描述】：

http://gw.ablueman.co.uk/tabbednotepad.php

我有 3 个 ckeditor 文本区域，所有三个都相同，但与主要的或类有很大不同。

如果我放 3 个替换，它工作正常。但是，如果我尝试使用 CKEDITOR.replace( 'editor1', 'editor2', 'editor3' {

它可以替换它们，但会忽略 { 之后的任何内容，就像类一样。

我只是在格式化 CKEDITOR.replace('editor1', 'editor2', {});错误地，我需要三个都使用相同的替换。

代码如下：

<form name="title" method="post" action="<?php echo htmlentities($_SERVER['PHP_SELF']);?>">
<textarea class="ckeditor" id="editor3" name="editor3" rows="200"><?php echo $editor3;?></textarea>
<input id="tabtitle1" name="tabtitle1" size="30" placeholder="Tab Title.." />
<input type="submit" value="Submit" >
</form>

<script type="text/javascript">   
    CKEDITOR.replace( 'editor1', {
    height: '600px',
    enterMode: CKEDITOR.ENTER_BR, 
    toolbar:    
[   { name: 'document', groups: [ 'document', 'doctools' ], items: [ 'Save', 'NewPage', 'Preview', 'Print', '-', 'Templates' ] },
    { name: 'clipboard', groups: [ 'clipboard', 'undo' ], items: [ 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo' ] },
    { name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ], items: [ 'NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote', 'CreateDiv', '-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock', '-', 'BidiLtr', 'BidiRtl' ] },        '/',
    { name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ], items: [ 'Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'RemoveFormat' ] },
    { name: 'links', items: [ 'Link', 'Unlink', 'Anchor' ] }, { name: 'editing', groups: [ 'find', 'selection', 'spellchecker' ], items: [ 'Find', 'Replace', '-', 'SelectAll', '-', 'Scayt' ] },
    { name: 'insert', items: [ 'Image', 'Table', 'HorizontalRule', 'SpecialChar', 'PageBreak', 'Iframe', 'Syntaxhighlight' ] }, '/',
    { name: 'styles', items: [ 'Format', 'Font', 'FontSize' ] },
    { name: 'colors', items: [ 'TextColor', 'BGColor' ] },
    { name: 'others', groups: [ 'mode' ], items: [ 'Source', 'searchCode', 'autoFormat', 'CommentSelectedRange', 'UncommentSelectedRange', 'AutoComplete', '-', 'ShowBlocks' ] },
    { name: 'tools', items: [ 'Maximize' ] },
]});    
</script>

[EDIT] 仅供参考，我试过 CKEDITOR.replace( ['editor1', 'editor2'], 这也不起作用。

【问题讨论】：

在这里查看它是如何完成的：ckeditor.com/latest/samples/tabindex.html（该页面在同一页面上包含 3 个不同的实例，而不是像您的标签一样，但想法是一样的）。
不使用该类。你不能轻易地编辑类，这样就不会真正解决问题。这就是为什么我需要使用 CKEDITOR.replace 而不是类。除非您知道使用 ckeditor 类来更改工具栏的简单方法。

标签： javascript ckeditor

【解决方案1】：

Ckeditor 4 允许您使用基于类名的编辑器替换多个文本区域：

CKEDITOR.replaceAll('className');

docs

【讨论】：

【解决方案2】：

您可以使用一组 textarea id 并使用 jquery 和 foreach 调用 CKEDITOR.replace。例如：

 var areas = Array('editor1', 'editor2', 'editor3');
    $.each(areas, function (i, area) {
     CKEDITOR.replace(area, {
      customConfig: '/Scripts/ckeditor/config.mini.js'
     });
    });

【讨论】：

明天有机会再试试，谢谢更新。
附言。我转向黑暗面，我现在使用tinymce。在我看来，它好多了。文档和实施对我来说似乎更好。
这假定并在不需要的地方使用 jQuery；索引迭代数组不再，ES6 for..of 也不再。在这种情况下，jQuery 是一种性能负担。
@ElementW：CKEditor 需要 jQuery，因此使用它不会像本文中那样增加额外的负担。
@Stefan 虽然它不会产生 CKEditor 需要的依赖开销，但它确实会产生时间开销，如 $.each is not exactly a zero-cost abstraction ;同时没有提高原生结构的可读性。不过，我的评论中的“假设”部分是错误的。

【解决方案3】：

你不能同时用多个 id 调用 CKEDITOR.replace。

Its definition 声明第一个参数是 ID 或元素，第二个参数是配置选项。

【讨论】：

看起来你是对的，真的很遗憾，我通过将
奇怪的是，如果你把 CKEDITOR.replace( 'editor1', 'editor2', 'editor3' ，它将替换编辑器 1,2,3。但它会忽略它们的配置。