basic use
Official website address : https://ckeditor.com/ckeditor-5/online-builder/
The official website provides the following modes. Generally, the classic mode is mostly used. For specific differences, you can visit the official website and try it yourself.
The basic method of use (classic mode), don't rush to operate it, and decide which method to use after reading it.
//下载ckeditor5-vue
npm install @ckeditor/ckeditor5-vue
//下载经典模式
npm install @ckeditor/ckeditor5-build-classic
- the code
<template>
<div id="ckeditor">
<ckeditor
ref="editorRef"
v-model="editorDesign"
:editor="editor"
:config="editorConfig"
:disabled="disabled"
@ready="onEditorReady"
@focus="onEditorFocus"
@blur="onEditorBlur"
@input="onEditorInput"
@destroy="onEditorDestroy"
></ckeditor>
</div>
</template>
<script setup>
import {
ref, reactive } from 'vue'
import ClassicEditor from '@ckeditor/ckeditor5-build-classic'
import '@ckeditor/ckeditor5-build-classic/build/translations/zh-cn.js' //引入中文包
const props = defineProps({
disabled: {
type: Boolean,
default: false, //是否禁用
},
})
const editor = ClassicEditor
const editorDesign = ref('') //默认内容
const editorConfig = reactive({
language: 'zh-cn',
toolbar: {
items: ['heading', '|', 'bold', 'italic', 'link', 'bulletedList', 'numberedList', '|', 'outdent', 'indent', '|', 'imageUpload', 'blockQuote', 'insertTable', 'mediaEmbed', 'undo', 'redo'],
},
language: 'zh',
image: {
toolbar: ['imageTextAlternative', 'toggleImageCaption', 'imageStyle:inline', 'imageStyle:block', 'imageStyle:side'],
},
table: {
contentToolbar: ['tableColumn', 'tableRow', 'mergeTableCells'],
},
ckfinder: {
uploadUrl: `/uploadfile`, // 上传图片接口
options: {
resourceType: 'Images',
},
},
})
const emit = defineEmits(['ready', 'focus', 'blur', 'input', 'destroy'])
const editorRef = ref(null)
const onEditorReady = () => {
console.log('准备好了')
emit('ready')
}
const onEditorFocus = () => {
console.log('聚焦')
emit('focus')
}
const onEditorBlur = () => {
console.log('失去焦点')
emit('blur')
}
const onEditorInput = () => {
console.log('正在录入')
emit('input')
}
const onEditorDestroy = () => {
console.log('销毁')
emit('destroy')
}
</script>
<style lang="scss">
#ckeditor {
.ck-editor__editable {
min-height: 100px;
max-height: 500px;
}
}
</style>
- The effect is as shown in the figure
The above basic toolbar configurations are relatively few, if the basic ones meet your needs, you can directly use the above methods.
I want to add more toolbars.
The following is my experience of stepping on the pit. I want a font toolbar and directly download the font dependencies.
npm i @ckeditor/ckeditor5-font
- introduce
import FontColor from '@ckeditor/ckeditor5-font/src/fontcolor.js';
import FontFamily from '@ckeditor/ckeditor5-font/src/fontfamily.js';
import FontSize from '@ckeditor/ckeditor5-font/src/fontsize.js';
Then directly report an error Uncaught CKEditorError: ckeditor-duplicated-modules Read more ...
document description
It probably means that some modules have been installed repeatedly, so the above method will not work.
More ways to use the new toolbar
If you want multiple toolbars, just follow the steps below. The first basic method of use is optional.
Let me talk about the operation idea first. Based on the @ckeditor/ckeditor5-build-classic code, add a new toolbar, and then upload the packaged package to the private server or put it in the project directory.
- Go to the official website to set the toolbar
official website address : https://ckeditor.com/ckeditor-5/online-builder/
1. Here I am using the first classic mode classic
2. In this step, you can directly add the desired toolbar in the toolbar below. Those with ☆ are charged. On the basis of the default, I added several more.
3. Add the above toolbar to the bottom to see the effect
4. Select the second Chinese language pack
5. Start to generate the package and download it.
6. After downloading, you can see in package.json that these dependencies are what we just selected. The build file is the package used in our project.
The existing toolbar is the one just selected. If you need to add a new toolbar, execute in the current directory such as adding font npm i @ckeditor/ckeditor5-font -D, then import it in the src/ckeditor.js file, add it to builtinPlugins, defaultConfig
Finally, execute npm run build to package, and the regenerated build folder is the latest package. You can put this package directly in the project directory, or upload it to a private server.
I uploaded it to the private server here, the package.json is configured as follows, and the name of the package.json is renamed by myself. private to false.
publishConfig is the uploaded private server address
- use
npm install @ckeditor/ckeditor5-vue
//下载私服上的包
npm install @custom/ckeditor5-custom-build
The usage in the actual project is the same as the previous basic method, you only need to update the configuration in the toolbar and the imported path name.
code:
<template>
<div id="ckeditor">
<ckeditor
ref="editorRef"
v-model="editorDesign"
:editor="editor"
:config="editorConfig"
:disabled="disabled"
@ready="onEditorReady"
@focus="onEditorFocus"
@blur="onEditorBlur"
@input="onEditorInput"
@destroy="onEditorDestroy"
></ckeditor>
</div>
</template>
<script setup>
import {
ref, reactive } from 'vue'
import ClassicEditor from '@custom/ckeditor5-build-classic'
import '@customr/ckeditor5-build-classic/build/translations/zh-cn.js' //引入中文包
const props = defineProps({
disabled: {
type: Boolean,
default: false, //是否禁用
},
})
const editor = ClassicEditor
const editorDesign = ref('') //默认内容
const editorConfig = reactive({
language: 'zh-cn',
toolbar: {
items: ['heading', '|', 'bold', 'italic', 'link', 'bulletedList', 'numberedList', '|', 'outdent', 'indent', '|', 'imageUpload', 'blockQuote', 'insertTable', 'mediaEmbed', 'undo', 'redo','|','fontColor','fontFamily','fontSize','fontBackgroundColor',],
},
//自定义设置字体
fontFamily: {
options: [
'default',
'宋体',
'新宋体',
'仿宋',
'楷体',
'微软雅黑',
'黑体',
'华文仿宋',
'华文楷体',
'华文隶书',
'华文宋体',
'华文细黑',
'华文新魏',
'华文行楷',
'华文中宋',
'隶书',
'苹方 常规',
'幼圆',
],
},
language: 'zh',
image: {
toolbar: ['imageTextAlternative', 'toggleImageCaption', 'imageStyle:inline', 'imageStyle:block', 'imageStyle:side'],
},
table: {
contentToolbar: ['tableColumn', 'tableRow', 'mergeTableCells'],
},
ckfinder: {
uploadUrl: `/uploadfile`, // 上传图片接口
options: {
resourceType: 'Images',
},
},
})
const emit = defineEmits(['ready', 'focus', 'blur', 'input', 'destroy'])
const editorRef = ref(null)
const onEditorReady = () => {
console.log('准备好了')
emit('ready')
}
const onEditorFocus = () => {
console.log('聚焦')
emit('focus')
}
const onEditorBlur = () => {
console.log('失去焦点')
emit('blur')
}
const onEditorInput = () => {
console.log('正在录入')
emit('input')
}
const onEditorDestroy = () => {
console.log('销毁')
emit('destroy')
}
</script>
<style lang="scss">
#ckeditor {
.ck-editor__editable {
min-height: 100px;
max-height: 500px;
}
//设置默认字体
.ck-editor__editable_inline p {
font-family: '宋体' !important;
}
}
</style>
CKEditor5 sets the default font, using the css writing method. Here, I tried writing such as config.font_defaultLabel = fontFamily, but it was useless. Finally achieved with css.
//设置默认字体
.ck-editor__editable_inline p {
font-family: '宋体' !important;
}