我想配置CKEDITOR 5中的工具栏。我查看了文档。
然而,与我的问题相关的唯一脚本是:
Array.from( editor.ui.componentFactory.names );
对于前端程序员来说,理解这个太难了。我应该把这个脚本放在哪里?如何输出结果?有详细的教程吗?
事实上,如果CKEDITOR在文档中提供可用项目,那将会非常好。那样可以省去很多麻烦。
谢谢!
我想配置CKEDITOR 5中的工具栏。我查看了文档。
然而,与我的问题相关的唯一脚本是:
Array.from( editor.ui.componentFactory.names );
对于前端程序员来说,理解这个太难了。我应该把这个脚本放在哪里?如何输出结果?有详细的教程吗?
事实上,如果CKEDITOR在文档中提供可用项目,那将会非常好。那样可以省去很多麻烦。
谢谢!
您可以将此代码直接放置在代码示例的正文中,例如在CKEditor 5 Build的基本API指南中找到。例如:
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()));
});
如果有人想知道如何在 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>
然后在组件的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(', '));
}
然后您会在控制台上看到类似以下的信息:
可用的工具栏项目: 撤销、重做、加粗、斜体、引用、CKFinder、图像文本替代、上传图像、标题、图像风格:全、图像风格:侧、缩进、减少缩进、链接、有序列表、无序列表、媒体嵌入、插入表格、表列、表行、合并单元格
在文档中很难将插件名称放在一个统一的位置,因为:
如果您想检查当前使用的构建中有哪些工具栏项目,请在您正在使用的浏览器中打开开发人员控制台,并执行引用代码行。
Array.from( editor.ui.componentFactory.names );
当然,editor
必须是编辑器实例。
我希望这回答了你的问题。
编辑:文档中也有创建编辑器的说明。但是你必须将编辑器实例指定给 editor
变量。
例如:
ClassicEditor
.create( document.querySelector( '#editor' ) )
.then( editor => {
window.editor = editor;
// Or alternatively you could paste that line here and look at console.
} );
在回答@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()))}} />
}
}