Vue组件内的CkEditor工具栏配置

时间:2020-02-26 22:14:22

标签: ckeditor

是否有人知道此数组中的名称是什么,以配置CkEditor的工具栏。像在文档中一样,您可以像这样简单而轻松地配置工具栏:

    editorConfig: {
      toolbar: [ 'bold', 'italic', '|', 'paste' ]
    },

唯一的问题是,数组中的这些名称被隐藏了。我一直在寻找一个小时,却无法在我组件的editorConfig元素中为data找到任何东西。大量示例被放置在神秘的config.js文件中,但是没有线索。所以我坚持这一点。

任何地方的人都知道这些名字是什么?

1 个答案:

答案 0 :(得分:0)

该示例将帮助:https://stackoverflow.com/a/60135719/4322960

            editor: ClassicEditor,
            editorData: 'ckeditor 5 for laravel and vuejs',
            editorConfig: {
                toolbar: {
                    items: [
                        'heading',
                        '|',
                        'bold',
                        'italic',
                        '|',
                        'bulletedList',
                        'numberedList',
                        '|',
                        'insertTable',
                        '|',
                        'imageUpload',
                        '|',
                        'undo',
                        'redo'
                    ]
                },
                image: {
                    toolbar: [
                        'imageStyle:full',
                        'imageStyle:side',
                        '|',
                        'imageTextAlternative'
                    ]
                },
                table: {
                    contentToolbar: [ 'tableColumn', 'tableRow', 'mergeTableCells' ]
                },
            },