vue+wangEditor (富文本编辑器)

wangEditor —— 轻量级 web 富文本编辑器，配置方便，使用简单。

• 官网：www.wangeditor.com/index.html
• 文档：www.wangeditor.com/doc
• 源码：github.com/wangeditor-team/wangEditor

---

 在写vue项目的时候要是用富文本编辑器，在百度查找了不少vue专用的富文本，也看过这类的文章发现在我手里都实现不了（泪崩），偶然发现wangEditor用起来非常简单，适合新手

下载

copy

npm 安装 npm i wangeditor --save

copy

<template>  
	<div>    
		<div ref="box"></div>  
	</div>
</template>
<script>  
//引用  
import E from "wangeditor";  
export default {    
	data() {      
		return {        
			//将富文本示例放在data里        
			editor:'',      
		}    
	},    
	mounted() {      
		//初始化      
		this.editor = new E(this.$refs.box);
		this.editor.create();    
	},  
}
</script>

 基本使用

设置行高

copy

// 设置编辑区域高度为 500px
this.editor.config.height = 500；

设置内容添加内容

copy

//设置内容
this.editor.txt.html('<p>用 JS 设置的内容</p>');
//获取html内容
this.editor.txt.html();
//获取text内容
this.editor.txt.text();
//获取json
this.editor.txt.getJSON();
//清空内容
this.editor.txt.clear();

配置菜单
其他参数见官网

copy

this.editor.config.menus = [  
  "head",  
  "bold",  
  "fontSize",  
  "italic",  
  "strikeThrough",  
  "indent",  
  "foreColor",  
  "backColor",  
  "list",  
  "underline",  
  "image",  
  "quote",  
  "code",  
  "undo",
]

代码高亮

需要安装 highlight js 插件实现代码高亮的样式功能
highlight js官网: https://highlightjs.org

安装

copy

npm install highlight.js -S

在main文件里引用css文件

copy

import 'highlight.js/styles/monokai-sublime.css'

在wangEditor挂在highlight插件

copy

this.editor.highlight = hljs;

这款富文本编辑器个人感觉还是蛮容易上手的，里面还有不少功能，不过我这个项目没用上，有兴趣的可以去官网看看https://www.wangeditor.com/index.html