vue+wangEditor (富文本編輯器)

wangEditor —— 輕量級 web 富文本編輯器，配置方便，使用簡單。

• 官網：www.wangeditor.com/index.html
• 文檔：www.wangeditor.com/doc
• 源碼：github.com/wangeditor-team/wangEditor

---

 在寫vue項目的時候要是用富文本編輯器，在百度查找了不少vue專用的富文本，也看過這類的文章發現在我手里都實現不了（淚崩），偶然發現wangEditor用起來非常簡單，適合新手

下載

npm 安裝 npm i wangeditor --save

<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>

 基本使用

設置行高

// 設置編輯區域高度為 500px
this.editor.config.height = 500；

設置內容添加內容

//設置內容
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();

配置菜單
其他參數見官網

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

安裝

npm install highlight.js -S

在main文件里引用css文件

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

在wangEditor掛在highlight插件

this.editor.highlight = hljs;

這款富文本編輯器個人感覺還是蠻容易上手的，里面還有不少功能，不過我這個項目沒用上，有興趣的可以去官網看看https://www.wangeditor.com/index.html