vue wangeditor 富文本编辑器的使用
时间：2024-04-01 14:35:36 来源：网络cs 作者：璐璐 栏目：卖家故事 阅读：
阅读本书更多章节>>>>
最终效果
wangeditor 富文本编辑器，是实现类似CSDN文章编辑功能的插件（CSDN官方使用的是CKEditor 富文本编辑器）。
一、使用步骤
1.引入库
wangEditor官方文档
根据自己项目使用的框架，采取不同的引入方式，如vue2：
npm install @wangeditor/editor-for-vue --save
2.在页面中使用
在vue2中使用wangeditor （官方文档配置）
<template> <div> <!-- 富文本编辑器 --> <div class="editor-box"> <Toolbar style="border-bottom: 1px solid #ccc" :editor="editor" :defaultConfig="toolbarConfig" :mode="mode" /> <input v-model="articleForm.title" class="article-title-box" maxlength="30" :border="false" placeholder="请输入文章标题（2~30字以内）" /> <Editor style="height: 500px;overflow-y: hidden;" v-model="defaultHtml" :defaultConfig="editorConfig" :mode="mode" @onCreated="onCreated" @customPaste="customPaste" /> </div> </div></template><script>import { Editor, Toolbar } from '@wangeditor/editor-for-vue';export default { components: { Editor, Toolbar }, // 文章编辑相关配置 data(){ let that = this; return{ editor: null, defaultHtml: '', // 这里的 HTML 内容必须是 wangEditor 生成的（即 editor.getHtml() 返回的） HTML 格式，不可以自己随意写 toolbarConfig: { // 工具栏配置 toolbarKeys:[ // 重新配置工具栏，显示哪些菜单，以及菜单的排序、分组。 "fontSize", // 字号 // "fontFamily", // 字体 // "color", // 颜色 "bold", // 加粗 "italic", // 斜体 "underline", // 下划线 "insertLink",// 插入链接 "bulletedList", // 无序列表 "numberedList", // 有序列表 // 对齐 { key: "group-justify", title: "对齐", iconSvg:"<svg viewBox=\"0 0 1024 1024\"><path d=\"M768 793.6v102.4H51.2v-102.4h716.8z m204.8-230.4v102.4H51.2v-102.4h921.6z m-204.8-230.4v102.4H51.2v-102.4h716.8zM972.8 102.4v102.4H51.2V102.4h921.6z\"></path></svg>", menuKeys: ['justifyLeft',"justifyRight","justifyCenter","justifyJustify"] }, "uploadImage", // 上传图片 ] }, editorConfig: { // 编辑器配置（图片如配置颜色、字体、链接校验、上传图片等） placeholder: '<p><span style="color: rgb(140, 140, 140); font-size: 16px; font-family: 微软雅黑;"> 从这里开始写正文...</span></p>', MENU_CONF:{ // 插入图片 uploadImage: { base64LimitSize: 1024 * 1024 * 10 // 10MB 小于该值就插入 base64 格式（而不上传），默认为 0 }, } }, mode: 'default', // 'default' or 'simple' } }, methods:{ // 编辑器创建完毕时的回调函数。 onCreated(editor) { this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错 }, // 对用户剪切板内容的处理 customPaste(editor, event){ // event 是 ClipboardEvent 类型，可以拿到粘贴的数据 const text = event.clipboardData.getData('text/plain'); // 获取粘贴的纯文本 editor.insertText(text); event.preventDefault(); // 阻止默认的粘贴行为 return false; } }}</script><style>.editor-box{ width: 800px; // 配置编辑器宽度 height: auto; margin: 0 40px 20px 0; border: 1px solid #dddddd; // 编辑器外边框}</style>上例配置的效果：
3、配置参数
以vue2中的配置为例：Vue2中使用wangeditor
（1）工具栏配置——也就是字体、对齐方式、字号等配置
官网工具栏配置
自定义工具栏：在data中配置toolbarConfig
（2）编辑器配置——默认的placeholder、配置颜色、字体、链接校验、上传图片等
官网编辑器配置
自定义工具栏：在data中配置editorConfig
拓展：自定义插入图片，上传到七牛云
拓展1：将标题栏单列出来
需求中要求把标题栏单列出来，也就是示例图片中"请输入文章标题..."栏，直接写在editor的placeholder会导致上传文章后，无法判断为正文内容还是文章标题，所以可以看到我在引入的工具栏和编辑器中间加了一个input标签，完美融入整个编辑器（当然，得修改input框的样式，让它融合的更好）。🙆♀️
拓展2：配置首行缩进2个字符
在工具栏的配置中新增一个字段： “group-indent”
toolbarConfig: { // 菜单栏配置 toolbarKeys:[ // 重新配置工具栏，显示哪些菜单，以及菜单的排序、分组。 "fontSize", // 字号 "fontFamily", // 字体 // 首行缩进2个字符 { key: "group-indent", title: "缩进", iconSvg:"<svg viewBox=\"0 0 1024 1024\"><path d=\"M0 64h1024v128H0z m384 192h640v128H384z m0 192h640v128H384z m0 192h640v128H384zM0 832h1024v128H0z m0-128V320l256 192z\"></path></svg>", menuKeys: ["indent","delIndent"] } ]},
阅读本书更多章节>>>>
本文链接：https://www.kjpai.cn/gushi/2024-04-01/152080.html，文章来源：网络cs，作者：璐璐，版权归作者所有，如需转载请注明来源和作者，否则将追究法律责任！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。