定制ckeditor5接入，支持字体颜色、字体大小

ckeditor5接入

---

前言

缘由：直接使用npm install @ckeditor/ckeditor5-vue -S进行安装的是经典版，无法修改字体颜色与字体大小等，所以这篇文章记录一下可以修改字体颜色的ckeditor5的接入。

大体思路为：
1.去ckeditor5官网定制你想要的基础配置
2.将下载的富文本制定配置 解压放在任何位置
3.进入解压后的文件夹，上传自己的npm
4.在项目中使用npm install xxx安装，xxx为你上传npm时自定义的名称
5.在项目里import引入并使用

---

提示：以下是本篇文章正文内容

一、ckeditor5定制配置

进入定制配置地址

1.选择Classic

2.选择或移除你想要的配置

这里我添加了Font color和Font size，并移除了CKBox

PS：带有PREMIUM标签的是收费项

3.配置工具栏

可以将上面的选项移到下面

4.选择语言Chinese

5.点击Start

点击start开始生成

6.点击download

点击download下载ckeditor5的压缩文件

二、上传npm

1.解压

解压后文件夹命名为ckeditor-custom（个人喜好命名）

进入文件夹长这样

2.修改package.json文件

3.npm上传

PS：没有npm账号的先去注册

1.打开命令行

2.在命令行输入npm login登录；
3.然后在npm publish上传，没报错就上传成功了，上传的包名就是在package.json里面定义的name

---

三、使用

1.安装

// 先安装ckeditor5
npm install @ckeditor/ckeditor5-vue -S  


// 再安装刚刚上传到npm的包，xxx为你的自定义包名，
// 例如上面package.json里面name为ckeditor5-custom-build，
// 则安装命令为：npm install ckeditor5-custom-build -S
npm install xxx -S 

2.在文件中import引入ckeditor

代码如下

<template>
    <div class="ckeditor-container">
        <CKEditor.component :editor="state.editor" v-model="editorData" :config="state.editorConfig">
        </CKEditor.component>
    </div>
</template>

<script setup lang="ts">
import { reactive, onMounted, ref, watch } from "vue";
import CKEditor from "@ckeditor/ckeditor5-vue"; // 引入CKEditor
import ClassicEditor from "ckeditor5-custom-build"; // 引入ClassicEditor 
const emit = defineEmits()
const props = defineProps({
	modelValue: {
		type: [String, Number, Object, Array, Boolean, Function, Date, RegExp],
		required: false,
		default: null
	},
	data: {
		type: [String, Number, Object, Array, Boolean, Function, Date, RegExp],
		required: false,
		default: null
	},
})
const state = reactive({
    editor: ClassicEditor as any,
    editorData: "" as any,
    editorConfig: {
    },
});
const editorData:any = ref(props.data)

onMounted(() => {
    state.editorData = props.modelValue
})

watch(editorData, async (newValue, oldValue) => {
	emit("update:data", newValue);
})


</script>

<style scoped lang="scss">
.ckeditor-container {
}
</style>

---

总结

这是一篇菜鸡记录自己ckeditor使用过程的blog

参考文章

Vue3中快速简单使用CKEditor 5富文本编辑器，作者：Thetimezipsby