将ckeditor小部件添加到自定义工具栏

时间:2018-07-25 00:22:21

标签: javascript ckeditor ckeditor4.x

我正在尝试将placeholder小部件添加到自定义工具栏enter image description here-中, 我的生活我不知道怎么做:

<script src="https://cdn.ckeditor.com/4.5.2/standard-all/ckeditor.js"></script>

它与默认工具栏一起工作:

<textarea cols="80" id="editor1" name="editor1" rows="10">test1</textarea>

CKEDITOR.replace( 'editor1', {
  extraPlugins: 'placeholder',
  height: 50
} );

但不能使用自定义工具栏:

<textarea cols="80" id="editor2" name="editor2" rows="10">test2</textarea>

CKEDITOR.replace( 'editor2', {
  extraPlugins: 'placeholder',
  height: 50,
  toolbar: [{ name: 'tools',group: 'tools', items: [ 'Bold','Placeholder', 'Redo' ], groups: [ 'tools'] }]
} );

据我了解,有两种方法可以将按钮插入工具栏:   1.在工具栏本身中使用名称(编辑器2示例)   2.使用editor.ui.addButton函数:

editor.ui.addButton && editor.ui.addButton( 'CreatePlaceholder', {
                label: lang.toolbar,
                command: 'placeholder',
            //  toolbar: 'insert,5',
                toolbar: 'clipboard,0',
                icon: 'placeholder'
            } );

我创建了一个fiddle来显示:

  1. 带有占位符按钮的默认工具栏
  2. 我无法向其添加占位符按钮的自定义工具栏

能否请您告诉/告诉我如何向自定义工具栏添加占位符?谢谢

1 个答案:

答案 0 :(得分:0)

您已将按钮命名为“ CreatePlaceholder”,因此应在工具栏中使用此名称。

editor.ui.addButton && editor.ui.addButton( 'CreatePlaceholder', ...

CKEDITOR.replace( 'editor3', {
    ...
    toolbar: [{ name: 'tools',group: 'tools', items: [ 'Bold','CreatePlaceholder', ...

完整代码: http://jsfiddle.net/nw3o4gy5/

还可以看看CKEDITOR.ui.addButton