1.安装（vue2）

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

2. 使用（可封装成子组件）

<template><div style="border: 1px solid #ccc"><Toolbarstyle="border-bottom: 1px solid #ccc":editor="editor":default-config="toolbarConfig":mode="mode"/><Editorv-model.trim="html"style="height: 500px; overflow-y: hidden":default-config="editorConfig":mode="mode"@onChange="onChange"@onCreated="onCreated"/></div>
</template>
<script>
import Vue from "vue";
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
import { upload } from "@/api/guideCertificate/guideCertificateIndex";
import { getToken } from "@/utils/auth";
import { DomEditor } from '@wangeditor/editor'
const editorConfig = {// JS 语法MENU_CONF: {},// 其他属性...
};
editorConfig.MENU_CONF["uploadImage"] = {server: "/concatenation/dzznInfo/upload",fieldName: "multipartFile",// 自定义增加 http  headerheaders: {Authorization: getToken(),},async customUpload(file, insertFn) {// JS 语法console.log(file);const fileData = new FormData();fileData.append("multipartFile", file);upload(fileData).then((res) => {insertFn(res.data.filePath, "", "");});// file 即选中的文件// 自己实现上传，并得到图片 url alt href// 最后插入图片// insertFn(url, alt, href)},// 继续写其他配置...// 【注意】不需要修改的不用写，wangEditor 会去 merge 当前其他配置
};
editorConfig.MENU_CONF["uploadVideo"] = {server: "/concatenation/dzznInfo/upload",fieldName: "multipartFile",// 自定义增加 http  headerheaders: {Authorization: getToken(),},async customUpload(file, insertFn) {// JS 语法console.log(file);const fileData = new FormData();fileData.append("multipartFile", file);upload(fileData).then((res) => {insertFn(res.data.filePath, "", "");});// file 即选中的文件// 自己实现上传，并得到图片 url alt href// 最后插入图片// insertFn(url, alt, href)},// 继续写其他配置...// 【注意】不需要修改的不用写，wangEditor 会去 merge 当前其他配置
};export default Vue.extend({components: { Editor, Toolbar },props: {value: {type: [Number, String],default: undefined,},},data() {return {editor: null,editorContent: null,editorContents: null,html: undefined,toolbarConfig: {},editorConfig,mode: "default", // or 'simple'};},mounted() {// 模拟 ajax 请求，异步渲染编辑器// setTimeout(() => {// }, 1500)},watch: {value(nl, ol) {this.html = this.value;// console.log(nl, ol, "====================");this.onChange(this.editor);},},beforeDestroy() {const editor = this.editor;if (editor == null) return;editor.destroy(); // 组件销毁时，及时销毁编辑器},methods: {onCreated(editor) {this.editor = Object.seal(editor); // 一定要用 Object.seal() ，否则会报错// this.toolbarConfig = {excludeKeys: ["fullScreen","group-video","insertImage"]}this.editorContents = editor.getText();if (this.editorContents) {this.editorContent = editor.getHtml();this.$emit("change", this.editorContent);} else {this.$emit("change", "");}},onChange(editor) {//   console.log("onChange", editor.getHtml()); // onChange 时获取编辑器最新内容this.editorContents = editor.getText();if (this.editorContents) {this.editorContent = editor.getHtml();this.$emit("change", this.editorContent);} else {this.$emit("change", "");}// this.$emit("change", editor.getHtml());const toolbar = DomEditor.getToolbar(editor)console.log("工具栏配置", toolbar.getConfig().toolbarKeys); // 工具栏配置},},
});
</script>
<style src="@wangeditor/editor/dist/css/style.css"></style>
<style lang="scss">
.notice {table {border: none;border-collapse: collapse;margin-top: 25px;}table td,table th{border: 1px solid #ccc;padding: 3px 5px;min-width: 50px;height: 20px;}table th {border-right: 1px solid #ccc;border-bottom: 2px solid #ccc;text-align: center;background-color: #f1f1f1;}blockquote{display: block;border-left: 8px solid #d0e5f2;padding: 5px 10px;margin: 10px 0;line-height: 1.4;font-size: 100%;background-color: #f1f1f1;}code{display: inline-block;*display: inline;*zoom: 1;background-color: #f1f1f1;border-radius: 3px;padding: 3px 5px;margin: 0 3px;    }pre code {display: block;}ul, ol{margin: 10px 0 10px 20px;}pre {border: 1px solid #ccc;background-color: #f8f8f8;padding: 10px;margin: 5px 0px;font-size: 0.8em;border-radius: 3px;}.ql-editor ul li {list-style-type: disc;    // 解决序列li前面的.不展示问题}.ql-editor ol li {list-style-type: decimal;   // 解决序列li前面的数字不展示问题}}</style>

3.父组件使用

子组件将文本内容传到父组件，change事件接收内容

以上就可以实现富文本编辑器的使用

注：自己在使用的过程中的遇到的一下麻烦

1.文本内容的回显

可以使用v-html

2.如何移除某些不需要的菜单配置

首先我们可以通过 toolbar.getConfig() 获取工具栏默认配置

import { DomEditor } from '@wangeditor/editor'const toolbar = DomEditor.getToolbar(editor)toolbar.getConfig().toolbarKeys

再通过以下代码将我们不需要的工具移除

this.toolbarConfig = {excludeKeys: ["fullScreen","group-video","insertImage"]}

3.富文本回显一些样式丢失如表格边框 li标签的圆点，我用了notice包裹再外面防止影响全局样式，所以你们用的时候记得加类！

.notice {table {border: none;border-collapse: collapse;margin-top: 25px;}table td,table th{border: 1px solid #ccc;padding: 3px 5px;min-width: 50px;height: 20px;}table th {border-right: 1px solid #ccc;border-bottom: 2px solid #ccc;text-align: center;background-color: #f1f1f1;}blockquote{display: block;border-left: 8px solid #d0e5f2;padding: 5px 10px;margin: 10px 0;line-height: 1.4;font-size: 100%;background-color: #f1f1f1;}code{display: inline-block;*display: inline;*zoom: 1;background-color: #f1f1f1;border-radius: 3px;padding: 3px 5px;margin: 0 3px;    }pre code {display: block;}ul, ol{margin: 10px 0 10px 20px;}pre {border: 1px solid #ccc;background-color: #f8f8f8;padding: 10px;margin: 5px 0px;font-size: 0.8em;border-radius: 3px;}.ql-editor ul li {list-style-type: disc;    // 解决序列li前面的.不展示问题}.ql-editor ol li {list-style-type: decimal;   // 解决序列li前面的数字不展示问题}}

wangEditor使用教程相关推荐

富文本编辑：wangEditor使用教程
文章目录前言一.官方文档二.样式问题前言孩子最近做的一个项目需要用到富文本编辑,本来想用github上的react-draft-wysiwyg资源,但是发现出现了版本问题,React更新到了 ...
我为什么要做富文本编辑器【wangEditor5总结】
wangEditor 官网 www.wangEditor.com 了解最新版的编辑器 --------------------------------------------------------- ...
java 富文本框_java-富文本（wangEditor框架）的使用教程
富文本的使用教程(wangEditor框架) 一,相信很多人用过很多富文本的框架,现在我向大家推荐一个很实用的一个富文本框架,具有丰富的功能项,容易使用. 所以本博客介绍这个富文本编辑器的使用哈!觉得 ...
轻量级web富文本框——wangEditor使用手册（2）——扩展一个“缩进”功能 demo
最新版wangEditor: 配置说明:http://www.wangeditor.com/doc.html demo演示:http://www.wangeditor.com/wangEditor/d ...
使用Grunt搭建自动化的web前端开发环境-完整教程
jQuery在使用grunt,bootstrap在使用grunt,百度UEditor在使用grunt,你没有理由不学.不用! AD: jQuery在使用grunt,bootstrap在使用grunt, ...
轻量级web富文本框——wangEditor使用手册（4）——配置下拉菜单 demo
最新版wangEditor: 配置说明:http://www.wangeditor.com/doc.html demo演示:http://www.wangeditor.com/wangEditor/d ...
更加简洁易用——wangEditor富文本编辑器新版本发布
1. 前言 wangEditor富文本编辑器(www.wangEditor.com)从去年11月份发布,至今已经有将近10各月了.它就像一个襁褓中的小婴儿,在我的努力以及众多使用者的支持下不断摸索.成 ...
【我的产品观】开发wangEditor一年总结
1. 引言标题说是一周年,其实是不是正好是一周年,我也忘记了,光从github的提交记录看也不准确.印象中觉得,如果要论想法,到现在一年多了,如果要论实际写代码,可能差不多正好一年. 从8月底在济南 ...
在vue中使用wangEditor上传视频
一.效果展示实现效果原本效果二.修改wangEditor源码添加插入视频panel 只修改Video.prototype._createPanel方法 // 原型 Video.prototyp ...

wangEditor使用教程

1.安装（vue2）

2. 使用（可封装成子组件）

3.父组件使用

以上就可以实现富文本编辑器的使用

注：自己在使用的过程中的遇到的一下麻烦

1.文本内容的回显

2.如何移除某些不需要的菜单配置

3.富文本回显一些样式丢失如表格边框 li标签的圆点，我用了notice包裹再外面防止影响全局样式，所以你们用的时候记得加类！

wangEditor使用教程相关推荐

最新文章

热门文章

wangEditor使用教程

1.安装 （vue2）

2. 使用 （可封装成子组件）

3.父组件使用

以上就可以实现富文本编辑器的使用

注：自己在使用的过程中的遇到的一下麻烦

1.文本内容的回显

2.如何移除某些不需要的菜单配置

3.富文本回显一些样式丢失 如表格边框 li标签的圆点，我用了notice包裹再外面 防止影响全局样式，所以你们用的时候记得加类！

wangEditor使用教程相关推荐

最新文章

热门文章

1.安装（vue2）

2. 使用（可封装成子组件）

3.富文本回显一些样式丢失如表格边框 li标签的圆点，我用了notice包裹再外面防止影响全局样式，所以你们用的时候记得加类！