网站开发服务公司,版本设计网站,有没有做网站的博士专业,wordpress打不开rss前言
适配 Vue3 的富文本插件不多#xff0c;我看了很多插件官网#xff0c;也有很多写的非常棒的#xff0c;有UI非常优雅让人耳目一新的#xff0c;也有功能非常全面的。 如#xff1a;
Quill#xff0c;简单易用#xff0c;功能全面。editorjs#xff0c;UI极其优…前言
适配 Vue3 的富文本插件不多我看了很多插件官网也有很多写的非常棒的有UI非常优雅让人耳目一新的也有功能非常全面的。 如
Quill简单易用功能全面。editorjsUI极其优雅非常好看。ckeditor-5一款完全重写的富文本编辑器支持现代 Web 标准例如模块化架构、原生语义化输出等。
还有很多优秀的富文本编辑器插件就不一一列举了。
可惜这些都只有英文原文档对于我这样英语阅读能力不是很好的人来说实在是一种煎熬当然也是因为周期比较短没有时间去研究所以选择了这一款易上手的插件 wangEditor。
推荐原因有二
wangEditor 有详细的中文文档以及中文交流环境。因为作者就是国内程序员。wangEditor 基于 slate 内核开发但不依赖于 React 所以它本身无框架依赖。
一、安装
安装 wangeditor 插件
npm install wangeditor/editor --save
# yarn add wangeditor/editor安装 Vue3 组件
npm install wangeditor/editor-for-vuenext --save
# yarn add wangeditor/editor-for-vuenext二、使用
1. 简单使用
这个组件使用起来非常简单如果只想简单使用按照下面的实例即可实现
templatediv styleborder: 1px solid #cccToolbarstyleborder-bottom: 1px solid #ccc:editoreditorRef:defaultConfigtoolbarConfig:modemode/Editorstyleheight: 500px; overflow-y: hidden;v-modelvalueHtml:defaultConfigeditorConfig:modemodeonCreatedhandleCreated//div
/templatescript
import wangeditor/editor/dist/css/style.css // 引入 css
import { onBeforeUnmount, ref, shallowRef } from vue
import { Editor, Toolbar } from wangeditor/editor-for-vueexport default {components: { Editor, Toolbar },setup() {// 编辑器实例必须用 shallowRefconst editorRef shallowRef()// 内容 HTMLconst valueHtml ref()const toolbarConfig {}const editorConfig { placeholder: 请输入内容... }// 组件销毁时也及时销毁编辑器onBeforeUnmount(() {const editor editorRef.valueif (editor null) returneditor.destroy()})const handleCreated (editor) {editorRef.value editor // 记录 editor 实例重要}return {editorRef,valueHtml,mode: default, // 或 simpletoolbarConfig,editorConfig,handleCreated};}
}
/script 以上即可实现最简单的富文本编辑功能valueHtml 就是富文本编辑的内容只需要使用 v-html 指令即可将其渲染。
2. 配置菜单栏
上面的实例很多功能不完善只有最原始的功能如果需要更加丰富的功能需要对菜单栏进行自定义编辑。
templatediv classeditToolbar classToolbar :editoreditorRef :defaultConfigtoolbarConfig :modemode /Editor classEditor :defaultConfigeditorConfig :modemode v-modelvalueHtml onCreatedhandleCreated customPastecustomPaste //div
/template三、自定义图片\视频上传功能
自带图片上传功能文档
自带的图片、视频上传服务可能无法适用于复杂的开发场景所以对这一块的功能进行自定义是很有必要的。
在同一页面公共地方写 editorConfig.MENU_CONF[uploadImage] 方法上传图片、视频时会自动触发可以同时选择多个图片、视频上传图片、视频会一个一个上传。
// 自定义图片上传
editorConfig.MENU_CONF[uploadImage] {async customUpload(file, insertFn) {let formData new FormData();formData.append(files, file);try {// 这里结合实际场景写自己上传图片的逻辑此处代码仅为示例const { data } await upload(formData);// 对图片进行处理同样需要结合实际场景data.forEach(item {insertFn(item, image, item)})} catch (error) {console.log(error);}}
}// 自定义视频上传
editorConfig.MENU_CONF[uploadVideo] {async customUpload(file, insertFn) {let formData new FormData();formData.append(files, file);try {// 这里结合实际场景写自己上传图片的逻辑此处代码仅为示例const { data } await upload(formData);// 对图片进行处理同样需要结合实际场景data.forEach(item {insertFn(item, video)})} catch (error) {console.log(error);}}
}注意 图片无法控制具体宽度只能按照比例确定宽度。图片默认为自身100%宽度如需限制可以在盒子外层使用 !important。 常见错误
vue-router.mjs:3471 Error: Module build failed (from ./node_modules/vue/cli-service/node_modules/vue-loader-v16/dist/index.js): TypeError: Cannot read property content of null 可能是 vue-loader 版本有问题较低或较高都有可能也有可能是写法有问题建议仔细检查代码这个问题在 ts 中很容易出现。
四、复制粘贴功能
这个功能原本就有默认会携带格式如需去除可以对其进行修改和限制。以下示例为粘贴纯文本如有更多定制内容可以自行改写。
const customPaste (editor, event, callback) {const text event.clipboardData.getData(text/plain) // 获取粘贴的纯文本if (text) {editor.insertText(text)event.preventDefault()callback(false)}
}如需作者补充或修改欢迎在评论区留言。
END
