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

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

以下为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>


效果图:

attachments-2021-06-hutpdrHm60c07e3fc5348.png

Vue代码示例下载:(先运行npm install安装环境包,在npm run serve启动)

你可能感兴趣的文章

相关问题

0 条评论

请先 登录 后评论
admin
admin

608 篇文章

作家榜 »

  1. admin 608 文章
  2. 粪斗 185 文章
  3. 王凯 92 文章
  4. 廖雪 78 文章
  5. 牟雪峰 12 文章
  6. 李沁雪 9 文章
  7. 全易 2 文章
  8. 魏晓亮 0 文章