一个页面上使用多个CKEditor

Question

我正在尝试在同一页上放置两个CKEditor。 下面是我的操作步骤： 首先是 CKEditor 的 config.js 文件。

CKEDITOR.editorConfig = function( config ) {
    config.language = 'en';
    // config.uiColor = '#AADC6E';

    CKEDITOR.stylesSet.add('my_custom_style', [
        { name: 'Page Title', element: 'h2', attributes: {'class': 'general-title min'} }
    ]);

    //Config the KCFinder
    config.filebrowserImageBrowseUrl = "/laravel-filemanager?type=Images";
    config.filebrowserImageUploadUrl = "/laravel-filemanager/upload?type=Images&_token=";


    config.toolbarGroups = [
        { name: 'document', groups: [ 'mode', 'document', 'doctools' ] },
        { name: 'clipboard', groups: [ 'clipboard', 'undo' ] },
        { name: 'editing', groups: [ 'find', 'selection', 'spellchecker', 'editing' ] },
        { name: 'forms', groups: [ 'forms' ] },
        '/',
        { name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
        { name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi', 'paragraph' ] },
        { name: 'links', groups: [ 'links' ] },
        { name: 'insert', groups: [ 'insert' ] },
        '/',
        { name: 'styles', groups: [ 'styles' ] },
        { name: 'colors', groups: [ 'colors' ] },
        { name: 'tools', groups: [ 'tools' ] },
        { name: 'others', groups: [ 'others' ] },
        { name: 'about', groups: [ 'about' ] }
    ];

    config.removeButtons = 'Save,NewPage,Form,Checkbox,Radio,TextField,Textarea,Select,Button,ImageButton,HiddenField,Flash,Language,About';
}; 

接着，我在同一个页面上有这两个具有 textarea 的表单

<form>
    <div class="form-group">
       {!! Form::label('details', 'Details') !!}
       {!! Form::textarea('details', '', array('class'=>'form-control', 'placeholder'=>'Enter Details...', 'rows'=>3)) !!}
          <script>
              CKEDITOR.replace('details');
          </script>
  </div>
</form>

还有第二个

<form>
    <div class="form-group">
      {!! Form::label('intro', 'Intro') !!}
      {!! Form::textarea('intro', '', array('class'=>'form-control', 'placeholder'=>'Enter Details...', 'rows'=>3)) !!}
       <script>
          CKEDITOR.replace( 'intro');
       </script>
</div>
</form>

第一种方法看起来运行良好，但第二种方法似乎没有起作用。

- Yousef Altaf

---

我使用JS动态生成多个CK编辑器，并在添加另一个带有按钮的CK编辑器后，之前的编辑器无法进行编辑或任何操作。看起来像是CK编辑器的一个bug... - Marek Bernád

Answer 1

我发现这里有问题

CKEDITOR.stylesSet.add('my_custom_style', [
        { name: 'Page Title', element: 'h2', attributes: {'class': 'general-title min'} }
    ]);

这是我的风格，它不应该在主要的CKEDITOR.editorConfig中，而应该放在外面，这样就可以正常工作了。

CKEDITOR.editorConfig = function( config ) {
    config.language = 'en';
    config.uiColor = '#AADC6E';
    ...........
    ...........
    ];

    config.removeButtons = 'Save,NewPage,Form,Checkbox,Radio,TextField,Textarea,Select,Button,ImageButton,HiddenField,Flash,Language,About';
}; 

现在，在主函数之外，出现了样式函数

CKEDITOR.stylesSet.add('my_custom_style', [
    { name: 'Page Title', element: 'h2', attributes: {'class': 'general-title min'} }
]);

- Yousef Altaf