wangEditor富文本编辑器的使用

文章目录

🟢 wangeditor 富文本
- ⭐️安装 wangeditor
- ⭐️demo 模板
- ⭐️效果图
✒️总结

🟢 wangeditor 富文本

一款开源 Web 富文本编辑器，开箱即用，配置简单
wangedito 官网
在这里插入图片描述

简洁易用、功能强大、文档教程丰富
支持 JS、Vue、React
踩过 5000+坑
兼容主流的 PC 游览器、但不在支持 IE 游览器和移动端编辑

优势

使用 vdom
扩展性
中文文档
使用主流技术
及时反馈和沟通、有完整的社区
方便的应用于 Vue React
集成所有功能，无需二次开发
持续更新

⭐️安装 wangeditor

yarn add @wangeditor/editor
# 或者 npm install @wangeditor/editor --save
yarn add @wangeditor/editor-for-vue
# 或者 npm install @wangeditor/editor-for-vue --save

⭐️demo 模板

<template><div class="main"><h1 class="title">wangeditor编辑器配置</h1><div style="border: 1px solid #ccc"><Toolbar:defaultConfig="toolbarConfig":editor="editor":mode="mode"style="border-bottom: 1px solid #ccc"/><Editorv-model="html":defaultConfig="editorConfig":mode="mode"class="editor"style="height: 500px; overflow-y: hidden"@onCreated="onCreated"@onChange="onChange"@onDestroyed="onDestroyed"@onFocus="onFocus"@onBlur="onBlur"@customPaste="customPaste"/></div><div class="sub-btn-box"><el-button class="sub-btn" type="primary" @click="submit" plain>提交</el-button></div></div>
</template><script>import Vue from 'vue'import { Editor, Toolbar } from '@wangeditor/editor-for-vue'import { DomEditor } from '@wangeditor/editor'export default Vue.extend({name: 'MyEditor',components: { Editor, Toolbar },data() {return {editor: null, // 编辑器实例html: '<p>123</p>', // 实例文本toolbarConfig: {// 工具栏配置// toolbarKeys: [//   // 分割线//   "|",//   // 菜单 key//   "bold", // 粗体//   "underline", // 下划线//   "italic", // 斜体//   "through", // 删除线//   "code", // 行内代码//   "sub", // 下标//   "sup", // 上标//   "clearStyle", // 清除格式//   "color", // 字体颜色//   "bgColor", // 背景色//   "fontSize", // 字号//   "fontFamily", // 字体//   "indent", // 增加缩进//   "delIndent", // 减少缩进//   "justifyLeft", // 左对齐//   "justifyRight", // 右对齐//   "justifyCenter", // 居中对齐//   "justifyJustify", // 两端对齐//   "lineHeight", // 行高//   "insertImage", // 网络图片//   "deleteImage", // 删除图片//   "editImage", // 编辑图片//   "viewImageLink", // 查看链接//   "imageWidth30", // 图片宽度相对于编辑器宽度的百分比30//   "imageWidth50", // 图片宽度相对于编辑器宽度的百分比50//   "imageWidth100", // 图片宽度相对于编辑器宽度的百分比100//   "divider", // 分割线//   "emotion", // 表情//   "insertLink", // 插入链接//   "editLink", // 修改链接//   "unLink", // 取消链接//   "viewLink", // 查看链接//   "codeBlock", // 代码块//   "blockquote", // 引用//   "headerSelect", // 标题//   "header1", // 标题1//   "header2", // 标题2//   "header3", // 标题3//   "header4", // 标题4//   "header5", // 标题5//   "todo", // 待办//   "redo", // 重做//   "undo", // 撤销//   "fullScreen", // 全屏//   "enter", // 回车//   "bulletedList", // 无序列表//   "numberedList", // 有序列表//   "insertTable", // 插入表格//   "deleteTable", // 删除表格//   "insertTableRow", // 插入行//   "deleteTableRow", // 删除行//   "insertTableCol", // 插入列//   "deleteTableCol", // 删除列//   "tableHeader", // 表头//   "tableFullWidth", // 宽度自适应//   "insertVideo", // 插入网络视频//   "uploadVideo", // 上传视频//   "editVideoSize", // 修改视频尺寸//   "uploadImage", // 上传图片//   "codeSelectLang", // 选择语言//   // 菜单组，包含多个菜单//   {//     key: "group-more-style", // 必填，要以 group 开头//     title: "更多样式", // 必填//     iconSvg: "<svg>....</svg>", // 可选//     menuKeys: ["through", "code", "clearStyle"], // 下级菜单 key ，必填//   },// ], //重新配置工具栏，显示哪些菜单，以及菜单的排序、分组。},editorConfig: {// 编辑器配置placeholder: '请输入内容...', //提示信息readOnly: false, //配置编辑器是否只读，默认为autoFocus: true, //配置编辑器默认是否 focus 选中,默认为 truescroll: false, //配置编辑器是否支持滚动，默认为 true 。注意，此时不要固定 editor-container 的高度，设置一个 min-height 即可。// maxLength: 10, //配置编辑器的maxlengthMENU_CONF: {// 文字颜色color: {// colors: ["#000", "#333", "#666"],//可选项},// 背景色bgColor: {// colors: ["#000", "#333", "#666"], //可选项},// 字号fontSize: {// fontSizeList: [//   // 元素支持两种形式//   //   1. 字符串；//   //   2. { name: 'xxx', value: 'xxx' }//   "12px",//   "16px",//   { name: "24px", value: "24px" },//   "40px",// ],//可选项},// 字体fontFamily: {// fontFamilyList: [//   // 元素支持两种形式//   //   1. 字符串；//   //   2. { name: 'xxx', value: 'xxx' }//   "黑体",//   "楷体",//   { name: "仿宋", value: "仿宋" },//   "Arial",//   "Tahoma",//   "Verdana",// ],//可选项},// 行号lineHeight: {// lineHeightList: ["1", "1.5", "2", "2.5"],//行高},// 标签emotion: {// emotions: "😀 😃 😄 😁 😆 😅 😂 🤣 😊 😇 🙂 🙃 😉".split(" "), // 数组可选项},// 上传图片的配置uploadImage: {// server服务端地址server: '/api/upload', //必填，否则上传图片会报错// fieldName文件名称默认值 'wangeditor-uploaded-image'fieldName: 'your-custom-name',// maxFileSize单个文件的最大体积限制，默认为 2MmaxFileSize: 1 * 1024 * 1024, // 1M//maxNumberOfFiles 最多可上传几个文件，默认为 100maxNumberOfFiles: 10,// allowedFileTypes选择文件时的类型限制，默认为 ['image/*'] 。如不想限制，则设置为 []allowedFileTypes: ['image/*'],// meta自定义上传参数，例如传递验证的 token 等。参数会被添加到 formData 中，一起上传到服务端。meta: {token: 'xxx',otherKey: 'yyy',},// metaWithUrl将 meta 拼接到 url 参数中，默认 falsemetaWithUrl: false,// headers自定义增加 http  headerheaders: {Accept: 'text/x-json',otherKey: 'xxx',},// withCredentials跨域是否传递 cookie ，默认为 falsewithCredentials: true,// timeout超时时间，默认为 10 秒timeout: 5 * 1000, // 5 秒// 下面是一些上传图片的回调函数//onBeforeUpload 上传之前触发onBeforeUpload(file) {// JS 语法// onBeforeUpload(file: File) { // TS 语法// file 选中的文件，格式如 { key: file }return file// 可以 return// 1. return file 或者 new 一个 file ，接下来将上传// 2. return false ，不上传这个 file},// onProgress上传进度的回调函数onProgress(progress) {// JS 语法// onProgress(progress: number) {  // TS 语法// progress 是 0-100 的数字console.log('progress', progress)},// onSuccess单个文件上传成功之后onSuccess(file, res) {// JS 语法// onSuccess(file: File, res: any) {  // TS 语法console.log(`${file.name} 上传成功`, res)},// onFailed单个文件上传失败onFailed(file, res) {// JS 语法//          onFailed(file: File, res: any) {// TS 语法console.log(`${file.name} 上传失败`, res)},// onError上传错误，或者触发 timeout 超时onError(file, err, res) {// JS 语法//  onError(file: File, err: any, res: any) {// TS 语法console.log(`${file.name} 上传出错`, err, res)},/*** 自定义插入* 如果你的服务端 response body 无法按照上文规定的格式，则无法插入图片，提示失败。但你可以使用 customInsert 来自定义插入图片。*/customInsert(res, insertFn) {// JS 语法// customInsert(res: any, insertFn: InsertFnType) {  // TS 语法// res 即服务端的返回结果// 从 res 中找到 url alt href ，然后插入图片insertFn(url, alt, href)},/*** 自定义上传* 如果你不想使用 wangEditor 自带的上传功能，例如你要上传到阿里云 OSS 。可以通过 customUpload 来自定义上传。*/customBrowseAndUpload(insertFn) {// JS 语法// customBrowseAndUpload(insertFn: InsertFnType) {   // TS 语法// 自己选择文件// 自己上传文件，并得到图片 url alt href// 最后插入图片insertFn(url, alt, href)},// 小于该值就插入 base64 格式（而不上传），默认为 0base64LimitSize: 5 * 1024, // 5kb},// 上传视频配置uploadVideo: {// 上传视频的配置比较复杂// server服务端地址server: '/api/upload', //必填，否则上传图片会报错// form-data fieldName ，默认值 'wangeditor-uploaded-video'fieldName: 'your-custom-name',//maxFileSize 单个文件的最大体积限制，默认为 10MmaxFileSize: 5 * 1024 * 1024, // 5M// maxNumberOfFiles最多可上传几个文件，默认为 5maxNumberOfFiles: 3,// allowedFileTypes选择文件时的类型限制，默认为 ['video/*'] 。如不想限制，则设置为 []allowedFileTypes: ['video/*'],// meta自定义上传参数，例如传递验证的 token 等。参数会被添加到 formData 中，一起上传到服务端。meta: {token: 'xxx',otherKey: 'yyy',},// metaWithUrl将 meta 拼接到 url 参数中，默认 falsemetaWithUrl: false,// headers自定义增加 http  headerheaders: {Accept: 'text/x-json',otherKey: 'xxx',},// withCredentials跨域是否传递 cookie ，默认为 falsewithCredentials: true,// timeout超时时间，默认为 30 秒timeout: 15 * 1000, // 15 秒// 视频不支持 base64 格式插入// 回调函数// onBeforeUpload上传之前触发onBeforeUpload(file) {// JS 语法// onBeforeUpload(file: File) {// TS 语法// file 选中的文件，格式如 { key: file }return file// 可以 return// 1. return file 或者 new 一个 file ，接下来将上传// 2. return false ，不上传这个 file},// onProgress上传进度的回调函数onProgress(progress) {// JS 语法// onProgress(progress: number) {// TS 语法// progress 是 0-100 的数字console.log('progress', progress)},// onSuccess单个文件上传成功之后onSuccess(file, res) {// JS 语法// onSuccess(file: File, res: any) {// TS 语法console.log(`${file.name} 上传成功`, res)},// onFailed单个文件上传失败onFailed(file, res) {// JS 语法// onFailed(file: File, res: any) {// TS 语法console.log(`${file.name} 上传失败`, res)},// onError上传错误，或者触发 timeout 超时onError(file, err, res) {// JS 语法// onError(file: File, err: any, res: any) {  // TS 语法console.log(`${file.name} 上传出错`, err, res)},/*** 自定义插入视频* 如果你的服务端 response body 无法按照上文规定的格式，则无法插入视频，提示失败。但你可以使用 customInsert 来自定义插入视频。*/customInsert(res, insertFn) {// JS 语法// customInsert(res: any, insertFn: InsertFnType) {  // TS 语法// res 即服务端的返回结果// 从 res 中找到 url poster ，然后插入视频insertFn(url, poster)},/*** 自定义上传* 如果你不想使用 wangEditor 自带的上传功能，例如你要上传到阿里云 OSS 。可以通过 customUpload 来自定义上传。*/async customUpload(file, insertFn) {// JS 语法// customUpload(file: File, insertFn: InsertFnType) {  // TS 语法// file 即选中的文件// 自己实现上传，并得到视频 url poster// 最后插入视频insertFn(url, poster)},/*** 自定义选择视频* 如果你不想使用 wangEditor 自带的选择文件功能，例如你有自己的图床，或者视频文件选择器。可以通过 customBrowseAndUpload 来自己实现选择视频、上传视频，并插入视频。*/customBrowseAndUpload(insertFn) {// JS 语法//  customBrowseAndUpload(insertFn: InsertFnType) {  // TS 语法// 自己选择文件// 自己上传文件，并得到视频 url poster// 最后插入视频insertFn(url, poster)},},// 代码高亮codeSelectLang: {// 代码语言codeLangs: [{ text: 'CSS', value: 'css' },{ text: 'HTML', value: 'html' },{ text: 'XML', value: 'xml' },// 其他],},},},mode: 'default', // or 'simple'}},methods: {// 提交按钮点击事件submit() {console.log(`编辑器内容`, this.html)console.log(`获取内容JSON`, this.editor.children)console.log(`显示HTML`, this.editor.getHtml())console.log(`显示Text`, this.editor.getText())},// onCreated编辑器创建完成的回调函数onCreated(editor) {this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错console.log('editor实例', this.editor)},// onChange编辑器内容、选区变化时的回调函数。onChange(editor) {console.log('onChange', editor)// console.log("content", editor.children);},// 编辑器 focus 时的回调函数。onFocus(editor) {console.log('onFocus', editor)},// 编辑器 blur 时的回调函数。onBlur(editor) {console.log('onBlur', editor)},// 编辑器销毁时的回调函数。onDestroyed(editor) {console.log('onDestroyed', editor)},// 自定义粘贴,可阻止编辑器的默认粘贴,实现自己的粘贴逻辑。customPaste(editor, event) {// event 是 ClipboardEvent 类型，可以拿到粘贴的数据// 可参考 https://developer.mozilla.org/zh-CN/docs/Web/API/ClipboardEvent// const html = event.clipboardData.getData('text/html') // 获取粘贴的 html// const text = event.clipboardData.getData('text/plain') // 获取粘贴的纯文本// const rtf = event.clipboardData.getData('text/rtf') // 获取 rtf 数据（如从 word wsp 复制粘贴）// 同步editor.insertText('粘贴内容后、我会同步执行')// 异步setTimeout(() => {editor.insertText('粘贴内容后、我会异步执行')}, 1000)// 阻止默认的粘贴行为event.preventDefault()return false// 继续执行默认的粘贴行为// return true},},mounted() {// 模拟 ajax 请求，异步渲染编辑器setTimeout(() => {// this.html = "<p'>模拟 Ajax 异步设置内容 HTML</p>";this.html ='<h1>模拟 Ajax 异步设置内容 HTML</h1><div data-w-e-type="todo"><input type="checkbox" disabled >代办1</div><div data-w-e-type="todo"><input type="checkbox" disabled checked>代办2</div><hr/><blockquote><span style="font-size: 22px;">🤑👌😚😀😃👌👆<br>1121</span><span style="font-size: 22px;"><sup>2123</sup></span><span style="font-size: 22px;">.<br></span><span style="font-size: 22px;"><strong>测试</strong></span><span style="font-size: 22px;"><br></span><span style="font-size: 22px;"><em>测试</em></span><span style="font-size: 22px;"><br></span><span style="font-size: 22px;"><em>测试123.</em></span><span style="font-size: 22px;"><br></span></blockquote>'}, 500)},created() {},beforeDestroy() {const editor = this.editorif (editor == null) returneditor.destroy() // 组件销毁时，及时销毁编辑器},})
</script>
<!--引入css样式-->
<style src="@wangeditor/editor/dist/css/style.css"></style>
<!--根据项目UI需求配置自己的css-->
<style lang="scss">.main {width: 80%;height: 100%;margin: 0 auto;.title {font-size: 20px;text-align: center;margin-bottom: 10px;}.sub-btn-box {margin-top: 10px;text-align: center;}.editor {// height: 200px !important;height: 700px !important;#w-e-textarea-1 {text-align: left !important;}.w-e-text-container {text-align: left !important;}}}
</style>