vue3中怎么使用ckeditor4?
时间: 2023-05-11 11:02:23 浏览: 137
vue-ckeditor2:Vue.js的CKEditor 4包装器
对于在Vue3中使用CKEditor4,你可以使用Vue-ckeditor4组件。首先,你需要安装该组件,可以使用以下命令:
npm install vue-ckeditor4
然后,在你的Vue组件中,你可以像这样使用它:
<template>
<div>
<ckeditor :editor="editor" v-model="content" :config="editorConfig"></ckeditor>
</div>
</template>
<script>
import CKEditor from 'vue-ckeditor4'
export default {
components: {
CKEditor
},
data() {
return {
editor: '',
content: '',
editorConfig: {
// 配置项
}
}
}
}
</script>
你可以在editorConfig中设置CKEditor的配置项,例如:
editorConfig: {
toolbar: [
{ name: 'document', items: [ 'Source', '-', 'Save', 'NewPage', 'Preview', 'Print', '-', 'Templates' ] },
{ name: 'clipboard', items: [ 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo' ] },
{ name: 'editing', items: [ 'Find', 'Replace', '-', 'SelectAll', '-', 'Scayt' ] },
{ name: 'insert', items: [ 'Image', 'Flash', 'Table', 'HorizontalRule', 'Smiley', 'SpecialChar', 'PageBreak'
, '-', 'Iframe' ] },
'/',
{ name: 'styles', items: [ 'Styles', 'Format' ] },
{ name: 'basicstyles', items: [ 'Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'RemoveFormat' ] },
{ name: 'paragraph', items: [ 'NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote', 'CreateDiv',
'-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock', '-', 'BidiLtr', 'BidiRtl' ] },
{ name: 'links', items: [ 'Link', 'Unlink', 'Anchor' ] },
{ name: 'tools', items: [ 'Maximize', 'ShowBlocks' ] },
{ name: 'others', items: [ '-' ] },
{ name: 'about', items: [ 'About' ] }
]
}
这是一个简单的示例,你可以根据自己的需要进行配置。
阅读全文