Question

我想在CKEDITOR 5中配置工具栏。我看了一下文档。

https://ckeditor5.github.io/docs/nightly/ckeditor5/latest/builds/guides/integration/configuration.html

然而，与我的问题相关的唯一脚本是：

Array.from( editor.ui.componentFactory.names );

对于前端程序员来说理解起来太困难了。我在哪里放这个脚本？如何输出结果？有没有详细的教程？

事实上，如果CKEDITOR只是将可用的项目放在文档中，那就太好了。这将节省很多麻烦。

谢谢！

Answer 1

您可以将此代码放在您可以找到的代码示例中。在CKEditor 5 Build's Basic API guide。 E.g：

ClassicEditor
    .create( document.querySelector( '#editor' ) )
    .then( editor => {
        console.log( Array.from( editor.ui.componentFactory.names ) );
    } )
    .catch( error => {
        console.error( error );
    } );

正如@Szymon Cofalik在他的回答中提到的 - 所有版本中都没有单个按钮列表。 CKEditor 5版本可能不仅在视觉上有所不同 - 它们也可能包含不同的插件，因此也包含不同的按钮。因此，使用该代码段是最安全且面向未来的解决方案。

Answer 2

可用于列出可用工具栏的示例代码

var editor = ClassicEditor
    .create(document.querySelector('#editor'), {
        toolbar: ['headings', 'bold', 'italic', 'link', 'bulletedList', 'numberedList'],
        heading: {
            options: [
                {modelElement: 'paragraph', title: 'Paragraph', class: 'ck-heading_paragraph'},
                {modelElement: 'heading1', viewElement: 'h1', title: 'Heading 1', class: 'ck-heading_heading1'},
                {modelElement: 'heading2', viewElement: 'h2', title: 'Heading 2', class: 'ck-heading_heading2'},
                {modelElement: 'heading', viewElement: 'h3', title: 'Heading 3', class: 'ck-heading_heading3'}
            ]
        }
    })
    .then(function (editor) {
        console.log(Array.from(editor.ui.componentFactory.names()));
    });

Answer 3

对于任何想知道如何在Angular（例如Angular 8）中使用Array.from(editor.ui.componentFactory.names())解决方案（如其他答案所述）的人来说，这里是一个描述。如果您尝试在ngOnInit或ngAfterViewInit中进行操作，那还为时过早，您会得到类似Cannot read property 'ui' of null的信息。您需要侦听来自ckeditor的ready事件，并按如下所示查询此时的名称。

在组件模板代码中，为编辑器提供一个ID，并监听ready事件：

<ckeditor
    #editor
    [editor]="Editor"
    [config]="config"
    (ready)="onEditorReady($event)">
</ckeditor>

然后在您的组件打字稿代码中，添加@ViewChild批注并实现onEditorReady，如下所示：

@ViewChild('editor', {static: false})
editorComponent: CKEditorComponent;

onEditorReady(event: any): void {
    const toolbarItems = Array.from(this.editorComponent.editorInstance.ui.componentFactory.names());
    console.log('Available toolbar items: ' + toolbarItems.join(', '));
}

然后您将在控制台中看到以下内容：

可用的工具栏项目：撤消，重做，粗体，斜体，blockQuote， ckfinder，imageTextAlternative，imageUpload，标题，imageStyle：full， imageStyle：side，indent，outdent，link，numberedList，bulletedList， mediaEmbed，insertTable，tableColumn，tableRow，mergeTableCells

Answer 4

很难将插件名称保存在文档中的一个位置，因为：

有多个版本不同，
开发并添加了新的插件。

如果要查看当前使用的构建中可用的工具栏项，请在您使用的浏览器中打开开发人员控制台并执行引用的代码行

Array.from( editor.ui.componentFactory.names );

当然，editor必须是编辑器实例。

我希望这能回答你的问题。

编辑：创建编辑器is described in the documentation。但您必须将编辑器实例分配给editor变量。

例如：

ClassicEditor
    .create( document.querySelector( '#editor' ) )
    .then( editor => {
        window.editor = editor;
        // Or alternatively you could paste that line here and look at console.
    } );

Answer 5

添加到@user2846469响应中，只需通过以下示例即可在vue.js中实现；

public class CustomPickerViewDelegate: UIPickerViewDelegate {

public IList ItemSource { get; set; }

public override UIView GetView(UIPickerView pickerView, nint row, nint component, UIView view) {
  UILabel label = new UILabel();
  label.Text = ItemSource[(int)row].ToString();
  label.Lines = 0;
  label.LineBreakMode = UILineBreakMode.WordWrap;

  return label;
}

public override nfloat GetRowHeight(UIPickerView pickerView, nint component) {
  return 48;
}

Answer 6

添加到@DestinyB answer-也许是Vue的一种更简单的解决方案-只需在@ready="onReady"组件和ckeditor方法中收听onReady：

onReady(event) {
   console.log(Array.from(event.ui.componentFactory.names()));
},

Answer 7

您可以使用console.log( Array.from( editor.ui.componentFactory.names() ) );来给您：

["undo", "redo", "bold", "italic", "blockQuote", "ckfinder", "imageTextAlternative", "imageUpload", "heading", "imageStyle:full", "imageStyle:side", "link", "numberedList", "bulletedList", "mediaEmbed", "insertTable", "tableColumn", "tableRow", "mergeTableCells"]

如何在CKEDITOR 5中获得工具栏可用项目？

7 个答案: