vue3开发1:在vue3项目中集成ckeditor5编辑器,自定义图片上传,图片编辑排坑(一)
最近尝试用了vue3进行开发,没想到在使用element-plus框架的时候出现了bug(一个星期后官方修复了),所以我对在项目中集成富文本插件ckeditor5比较忐忑,而且也没有vue3中集成ckeditor5的例子可以借鉴,注意这篇文档适合有一定vue2.x基础的参考这里我们先上个ckeditor5官网地址ckeditor5有很多功能版本这里我选用了document版官方提供了三种集成到项目
·
最近尝试用了vue3进行开发,没想到在使用element-plus框架的时候出现了bug(一个星期后官方修复了),所以我对在项目中集成富文本插件ckeditor5比较忐忑,而且也没有vue3中集成ckeditor5的例子可以借鉴,
注意这篇文档适合有一定vue2.x基础的参考
这里我们先上个ckeditor5官网地址
ckeditor5有很多功能版本
这里我选用了document版
官方提供了三种集成到项目中的方法
这里可以先用npm的方法集成,在后面我们会使用下载包的方式来引入(为了图片大小编辑功能)
集成步骤:
- 创建一个editBox.vue编辑器组件,写入html部分的代码
<template>
<!-- 外部容器-->
<div class="editorBox">
<!-- 工具栏容器 -->
<div id="toolbar-container"></div>
<!-- 编辑器容器 -->
<div id="editor" ></div>
</div>
</template>
- 引入相关依赖(npm引入的话自己调整一下路径,这一步懂得都懂),MyUploadAdapter 是图片自定义上传适配器,后面会讲到
import CKEditor from "./ckeditor5-build-decoupled-document";
import "./ckeditor5-build-decoupled-document/build/translations/zh-cn.js";
import { reactive, onMounted } from "vue";
import MyUploadAdapter from "./uploadImg";
- 写一个与编辑器处理相关的Effect
const CKEditor_Effect = () => {
//创建一个编辑器对象数据
let editorObj = reactive({});
// 初始化编辑器
const initCKEditor = () => {
CKEditor.create(document.querySelector("#editor"), {
language: "zh-cn",
})
.then((editor) => {
const toolbarContainer = document.querySelector("#toolbar-container");
toolbarContainer.appendChild(editor.ui.view.toolbar.element);
editorObj = editor; //将编辑器保存起来,用来随时获取编辑器中的内容等,执行一些操作
editor.plugins.get("FileRepository").createUploadAdapter = (loader) => {
return new MyUploadAdapter(loader); //自定义上传图片
};
})
.catch((error) => {
console.error(error);
});
};
// 获取编辑器数据
const getEditorData = () => {
return editorObj.getData()
};
// 设置编辑器数据
const setEditorData = (data) => {
return editorObj.setData(data)
};
//在mounted初始化
onMounted(() => {
initCKEditor();
});
return { editorObj, getEditorData,setEditorData };
};
- 在setup函数中引用
setup(props, context) {
const CKEditorEffect = CKEditor_Effect();
return { ...CKEditorEffect };
},
- 编辑器样式自己把握(略)
到这里应该已经成功引入了这个富文本编辑器,需要注意的是,使用富文本编辑器,我们的项目中的reset.css最好不要把相关的标签样式重置,这可能会导致富文本的编辑功能样式被覆盖。
下一篇我们讲自定义图片上传,图片编辑排坑。
更多推荐
已为社区贡献4条内容
所有评论(0)