基本使用
官網(wǎng)地址：https://ckeditor.com/ckeditor-5/online-builder/
官網(wǎng)提供了以下幾種模式，一般使用經(jīng)典模式居多，具體差別可訪問官網(wǎng)自己試一下。
基本的使用方法(經(jīng)典模式)，先別急著操作，看完再決定使用哪種方法。
//下載ckeditor5-vue
npm install @ckeditor/ckeditor5-vue
//下載經(jīng)典模式
npm install @ckeditor/ckeditor5-build-classic
- 代碼
<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('') //默認(rèn)內(nèi)容
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('準(zhǔn)備好了')
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>
- 效果如圖
以上基本的工具欄配置比較少，如果基本的滿足你的需要，可直接使用如上的方法。
我想要添加更多的工具欄。
以下是我的踩坑經(jīng)歷，我想要一個字體的工具欄，直接下載了字體的依賴
npm i @ckeditor/ckeditor5-font
- 引入
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';
然后直接報錯Uncaught CKEditorError:ckeditor-duplicated-modules Read more …
文檔說明
大概意思就是重復(fù)安裝了一些模塊，因此以上方法行不通。
更多新工具欄使用方法
如果想要多工具欄的，直接按照如下方法操作。第一種基本使用方法可不操作。
先說一下操作思路，在@ckeditor/ckeditor5-build-classic代碼的基礎(chǔ)上，添加新工具欄，然后上傳打包后的包到私服或者放到項目目錄里。
- 官網(wǎng)去設(shè)置工具欄
官網(wǎng)地址：https://ckeditor.com/ckeditor-5/online-builder/
1、這里我使用的是第一個經(jīng)典模式classic
2、這一步操作，可以直接在下面的工具欄中add想要的工具欄。帶☆的是收費的。在默認(rèn)的基礎(chǔ)上我又添加了幾種。
3、把上面的工具欄添加到下面的可以看效果
4、選擇第二個Chinese語言包
5、start生成包并下載
6、下載下來之后，在package.json里面可以看到這些依賴就是剛才我們選擇的。build文件就是咱們項目中用到的包。
目前已經(jīng)有的工具欄就是剛才選擇的。如果需要增加新的工具欄，在當(dāng)前目錄執(zhí)行如添加字體 npm i @ckeditor/ckeditor5-font -D，然后在src/ckeditor.js文件引入，添加到builtinPlugins，defaultConfig
最后執(zhí)行npm run build打包，重新生成的build文件夾，就是最新的包，把這個包直接放在項目目錄里，或者上傳到私服都可以。
我這里是上傳到了私服，package.json如下配置，package.json的name自己重新命名一下。private改為false。
publishConfig為上傳的私服地址
- 使用
npm install @ckeditor/ckeditor5-vue
//下載私服上的包
npm install @custom/ckeditor5-custom-build
實際項目中的用法和前面的基本方法一樣，只需要更新一下toolbar里面的配置和引入的路徑名稱。
代碼：文章來源：http://www.zghlxwxcb.cn/news/detail-689805.html
<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('') //默認(rèn)內(nèi)容
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',],
},
//自定義設(shè)置字體
fontFamily: {
options: [
'default',
'宋體',
'新宋體',
'仿宋',
'楷體',
'微軟雅黑',
'黑體',
'華文仿宋',
'華文楷體',
'華文隸書',
'華文宋體',
'華文細(xì)黑',
'華文新魏',
'華文行楷',
'華文中宋',
'隸書',
'蘋方 常規(guī)',
'幼圓',
],
},
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('準(zhǔn)備好了')
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;
}
//設(shè)置默認(rèn)字體
.ck-editor__editable_inline p {
font-family: '宋體' !important;
}
}
</style>
CKEditor5設(shè)置默認(rèn)字體，用的是css寫法，這里嘗試了config.font_defaultLabel = fontFamily這類寫法，都沒有用。最后用css實現(xiàn)的。文章來源地址http://www.zghlxwxcb.cn/news/detail-689805.html
//設(shè)置默認(rèn)字體
.ck-editor__editable_inline p {
font-family: '宋體' !important;
}
到了這里，關(guān)于CKEditor5+vue3使用以及如何添加新工具欄，自定義設(shè)置字體fontFamily的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
