vue3开发1：在vue3项目中集成ckeditor5编辑器，自定义图片上传，图片编辑排坑（一）

最近尝试用了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最好不要把相关的标签样式重置，这可能会导致富文本的编辑功能样式被覆盖。

下一篇我们讲自定义图片上传，图片编辑排坑。

vue3开发1：在vue3项目中集成ckeditor5编辑器，自定义图片上传，图片编辑排坑（一）相关推荐

在ASP.NET项目中使用CKEditor +CKFinder实现图片上传功能
前言之前的项目中一直使用的是FCKeditor,昨天突然有个想法:为什么不试一下新的CKEditor呢?于是花了大半天的时间去学习它的用法,现在把我的学习过程与大家分享一下. 谈起FCKeditor ...
vue3中使用vue-quill富文本编辑器重写图片上传功能
最近开发的一个vue3+element-plus的项目,需要用到富文本编辑器,最终选择了VueQuill这一款轻便型的富文本编辑器. 说说遇到的问题:富文本编辑器的图片上传,默认是直接以base64图 ...
Vue项目中遇到了大文件分片上传的问题
Vue项目中遇到了大文件分片上传的问题,之前用过webuploader,索性就把Vue2.0与webuploader结合起来使用,封装了一个vue的上传组件,使用起来也比较舒爽. 上传就上传吧,为什么 ...
JAVAWEB开发之SpringMVC详解(二)——高级开发、数据回显、参数绑定集合、图片上传、json交互、validation校验、异常处理、RESTful支持、拦截器
知识回顾 springmvc框架用户请求url到DispatcherServlet前端控制器,相当于中央调度器,降低系统各组件之间的耦合度. DispatcherServlet前端控制器通过Hand ...
Nginx集成FastDFS模块实现图片上传
提示:如果在这里还没有安装Fastdfs的话可以参考:censtos下安装FastDFS 一.FastDFS的Nginx模块资料: https://pan.baidu.com/s/14YQCvuMI ...
ajax中fileelementid,使用 ajaxFileUpload 进行图片上传
前端部分使用ajaxFileUpload 主要是为了异步上传文件,不需要开启新的页面进行上传! 由于segmentfault不能上传文件,该文件ajaxFileUpload.js的代码在本篇文章的最 ...
hibernate+servlet+mysql 实现easypoi_在Maven项目中使用easypoi完成Excel文件上传下载(示例代码)...
导包: 1 2 3 cn.afterturn 4 easypoi-base 5 3.2.0 6 7 8 cn.afterturn 9 easypoi-web 10 3.2.0 11 12 13 cn. ...
在express项目中使用formidable multiparty实现文件上传
安装 formidable,multiparty 模块 npm install formidable,multiparty –save -d 表单上传 <form id="addFor ...
如何在Spring-Boot项目中配置资源文件夹？视频文件不想放在项目中，怎么做？前台上传文件后台如何访问？什么是资源文件夹？
如何在Spring-boot项目配置资源文件夹前言 2.properties文件二.访问 1.放入资源 2.访问方式1 方式2 前言在什么情况下需要配置资源文件夹? 当项目需要读取静态文件夹以 ...

vue3开发1：在vue3项目中集成ckeditor5编辑器，自定义图片上传，图片编辑排坑（一）

vue3开发1：在vue3项目中集成ckeditor5编辑器，自定义图片上传，图片编辑排坑（一）相关推荐

最新文章

热门文章