vue基本使用wangeditor富文本编辑器

官方文档

• npm 下载 npm install wangeditor
• 代码

<template>
	<div class='wangeditor'>
		<div id="div3"></div>
	</div>
</template>

<script>
	// 引入
	import E from "wangeditor"
	export default {
		name: 'wangeditor',
		data() {
			return {

			}
		},
		mounted() {
			//初始化
			this.init();

		},
		methods: {
			init() {
				var editor = new E('#div3');
				// 兼容老版本 否则config 为 undefined 
				let config = editor.customConfig ? editor.customConfig : editor.config;
				
				// 监控变化，同步更新到 textarea
				editor.config.onchange = function(html) {
					console.log(html)
				}
				
				// 自定义菜单配置
				editor.config.menus = [
					'head',
					'bold',
					'italic',
					'underline'
				]
				//创建编辑器
				editor.create();
			}
		}
	}
</script>

• 页面展示