Vue使用wangEditor富文本编辑器案例

以下为Vue中使用wangEditor富文本编辑器的案例，下面有demo供大家参考：富文本就是保存时将Html传给后台保存，前端在Vue回显页面里可以使用V-html解析，编辑时回显可以看下官网，其实很简单的。

npm安装

npm install wangeditor

页面使用

<template>
	<div class="hello">
		<div><div id="wangeditor1" style="padding-top: 30px;"></div></div>
		<div><button @click="sava()">保存</button></div>
	</div>
</template>

<script>
var ele;
var editor;
import E from 'wangeditor'; //引入富文本插件
export default {
	name: 'HelloWorld',
	data() {
		return {};
	},
	mounted() {
		ele = document.getElementById('wangeditor1');
		editor = new E(ele);
		editor.config.height = 500; //配置高度
		editor.config.menus = [//配置顶部导航，不写显示全部,现在关闭了视频等目前用不到的
			'head',
			'bold',
			'fontSize',
			'fontName',
			'italic',
			'underline',
			'strikeThrough',
			'indent',
			'lineHeight',
			'foreColor',
			'backColor',
			'list',
			'todo',
			'justify',
			'quote',
			'image',
			'table',
			'splitLine',
			'undo',
			'redo'
		];
		//开启配置
		// editor.config.debug = true
		// 隐藏“网络图片”tab
		// editor.config.showLinkImg = true
		// 关闭粘贴内容中的样式
		// editor.config.pasteFilterStyle = false
		// 忽略粘贴内容中的图片
		// editor.config.pasteIgnoreImg = false
		// 将图片大小限制为 3M
		// editor.config.uploadImgMaxSize = 5 * 1024 * 1024
		// 限制一次最多上传 1 张图片
		editor.config.uploadImgMaxLength = 1;

		editor.config.showLinkImgAlt = false; // 配置alt选项 关闭图片描述
		editor.config.showLinkImgHref = false; // 配置超链接 关闭图片点击跳转链接配置
		editor.config.uploadImgServer = 'uploadImg'; //上传路径 不写会关闭图片本地上传功能，但可以用网络图片
		editor.config.uploadFileName = 'myFileName'; //上传入参 不写会关闭图片本地上传功能，但可以用网络图片
		editor.create();
	},
	methods: {
		sava() {
			console.log(editor.txt.html());
		}
	}
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped></style>