wangEditor系列之Vue2简单使用

---

一、安装

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

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

二、使用

1.1、模板

<div style="border: 1px solid #ccc">
	<Toolbar style="border-bottom: 1px solid #ccc" :editor="editor" :defaultConfig="toolbarConfig" :mode="mode" />
	<Editor style="height: 500px; overflow-y: hidden" v-model="html" :defaultConfig="editorConfig" :mode="mode" @onCreated="onCreated" />
</div>

1.2、script

<script>
import {
    
     Editor, Toolbar } from "@wangeditor/editor-for-vue";
export default {
    
    
	components: {
    
     Editor, Toolbar },
	data() {
    
    
		return {
    
    
			editor: null,
			html: "<p>hello</p>",
			toolbarConfig: {
    
    },
			editorConfig: {
    
     placeholder: "请输入内容..." },
			mode: "default" // or 'simple'
		};
	},
	methods: {
    
    
		onCreated(editor) {
    
    
			this.editor = Object.seal(editor); // 一定要用 Object.seal() ，否则会报错
		}
	},
	mounted() {
    
    
		// 模拟 ajax 请求，异步渲染编辑器
		setTimeout(() => {
    
    
			this.html = "<p>模拟 Ajax 异步设置内容 HTML</p>";
		}, 1500);
	},
	beforeDestroy() {
    
    
		const editor = this.editor;
		if (editor == null) return;
		editor.destroy(); // 组件销毁时，及时销毁编辑器
	}
};
</script>

1.3、引入style

在main.js中添加如下代码

import "@wangeditor/editor/dist/css/style.css";

写在最后

如果你感觉文章不咋地//(ㄒoㄒ)//，就在评论处留言，作者继续改进；o_O???
如果你觉得该文章有一点点用处，可以给作者点个赞；\\*^o^*//
如果你想要和作者一起进步，可以微信扫描二维码，关注前端老L；~~~///(^v^)\\\~~~
谢谢各位读者们啦(^_^)∠※！！！