如何在CKEDITOR 5中获取工具栏可用项?

您可以将此代码放在您可以找到的代码示例正文中,例如 CKEditor 5 Build's Basic API guide . 例如:

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

正如@Szymon Cofalik在他的回答中提到的,没有一个按钮列表可以在所有版本中使用。CKEditor 5版本可能不仅在视觉上有所不同,还可能包含不同的插件,因此包含不同的按钮。因此,使用该代码段是最安全和经得起未来考验的解决方案。

您可以使用 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"]

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

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()));
    });

对于想知道如何利用 Array.from(editor.ui.componentFactory.names()) 解(如其他答案中所述)在角度(例如角度8)中,这里是一个描述。如果你试着在 ngOnInit 或 ngAfterViewInit ,太早了,你会得到这样的结果 Cannot read property 'ui' of null . 你需要倾听 ready 事件,并在该点查询名称,如下所示。

在组件模板代码中,为编辑器提供一个id并侦听ready事件:

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

然后在组件typescript代码中,添加一个 @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(', '));
}

然后,您将在控制台中看到类似的内容:

可用工具栏项:undo、redo、bold、italic、blockQuote、, ckfinder、imageTextAlternative、imageUpload、heading、imageStyle:full、, 图像样式:side、indent、outdent、link、numberedList、bulletedList、, mediaEmbed、insertTable、tableColumn、tableRow、mergeTableCells

在文档中很难将插件名称保留在一个位置,因为:

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

如果要检查当前使用的生成中有哪些工具栏项可用,请在正在使用的浏览器中打开开发人员控制台,并执行引用的代码行

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

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

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

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

例如:

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

添加到 @DestinyB answer -也许是一个更简单的Vue解决方案-只需倾听 @ready="onReady" 上 ckeditor 组件,并在 onReady 方法:

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

添加到 @user2846469 响应,可以在vue中实现。js简单地通过下面的示例;

import ClassicEditorfrom '@ckeditor/ckeditor5-build-classic';

export default {
data() {
return {
    editor: ClassicEditor,
    editorData: '',
    editorConfig: {}
 },
 mounted() {
            console.log(this.editor.builtinPlugins.map( plugin => plugin.pluginName ));
        }
 }
}
 

在里面 反应

import { CKEditor } from '@ckeditor/ckeditor5-react';
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';




export default class AddArticle extends Component {




    
    render() {

        return <CKEditor config={EditorConfig} editor={ClassicEditor} onReady={(event) => {
   console.log(Array.from(event.ui.componentFactory.names()))}} /> 
    }
}