[英]How to customize CKEditor 5 in a VueJS app
我将CKeditor 5 for VueJS集成到我的 VueJS 应用程序中:
<template>
<div :class="[columnClass, errors[name] ? 'has-danger' : '']" class="form-group">
<ckeditor :id="name"
:readonly="readonly"
:disabled="disabled"
:editor="editor"
:config="editorConfig"
:value="value"
class="form-control"
@input="$emit('input', $event)"/>
<small class="form-control-feedback">
<span v-for="e in errors[name]" :key="e">{{ e }}</span>
</small>
</div>
</template>
<script>
import BaseInput from './BaseInput';
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
export default {
name: 'TextEditor',
extends: BaseInput,
props: {
value: {
type: String,
default: ''
},
},
data() {
return {
editor: ClassicEditor,
editorConfig: {
toolbar: [ 'bold', 'italic', 'underline', 'strikethrough', 'subscript', 'superscript', '|', 'headings', '|', 'undo', 'redo' ],
heading: {
options: [
{model: 'paragraph', title: 'Paragraph', class: 'ck-heading_paragraph'},
{model: 'heading1', view: 'h1', title: 'Heading 1', class: 'ck-heading_heading1'},
{model: 'heading2', view: 'h2', title: 'Heading 2', class: 'ck-heading_heading2'},
{model: 'heading3', view: 'h3', title: 'Heading 3', class: 'ck-heading_heading3'},
{model: 'heading4', view: 'h4', title: 'Heading 4', class: 'ck-heading_heading4'}
]
}
}
};
},
};
</script>
这工作正常。
现在我想自定义显示的工具栏,我已经尝试了一些不起作用的自定义配置。 我的工具栏中只显示粗体、斜体、重做和撤消。 在我看来,CKeditor 使这有点困难,并且记录也很奇怪。
根据文档,我必须运行Array.from( editor.ui.componentFactory.names() );
要获取可能的工具栏选项的列表,因为这取决于我的构建中可用的选项的其他内容,因此没有可用的中央专用列表。 这也意味着我不知道如何调用要禁用的选项。
这种方法当然在 VueJS 中不起作用。 我无法获得工具栏选项的列表。 我将如何在 VueJS 中检索此选项列表? 无法从this.ClassicEditor
检索它,并且它在 Vue DevTools 中也不可见。 在我看来ui.componentFactory.names
在 VueJS 中并不容易获得。
除此之外,我可能必须使用文档中描述的方法添加缺少的额外功能,例如下划线、上标,但我不知道如何在 VueJS 上下文中执行此操作。
我还尝试使用 Documenteditor 构建,而不是 Classical 构建,因为它似乎有更多选择,并且更接近我需要的。 但是文档并没有告诉我如何将它集成到 VueJS 中而不会出现问题。 我试过了,但它似乎不想渲染并且没有显示错误消息来告诉我我做错了什么。
有人知道如何在 VueJS 上下文中自定义 CKeditor 5 吗? 该文档对 VueJS 的使用非常简单。
刚刚也碰到了这个问题。
经过一番研究,我发现你可以这样做:
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
// Somewhere in your code...
console.log(ClassicEditor.defaultConfig.toolbar);
希望这可以帮助。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.