wangEditor富文本编辑器使用方法

wangEditor富文本编辑器使用方法

本文以angular为例，vue/react可做参考

最近产品提了一个需求，需要实现pc端编辑文章，微信小程序/支付宝小程序 端预览文章

实现类似于微信公众号的编辑器效果，废话不多说，上图。

pc端编辑效果

手机端预览效果

一、PC端配置

1、安装到项目

// 使用npm安装
npm i wangeditor --save

2、引入到页面

// 引入到项目
import E from 'wangeditor';

// 初始化富文本编辑器
this.editor = new E('#editorMenu', '#editor');
this.setEditorConfig();  // 执行配置
this.editor.create();    // 创建

// html部分
<div class="wangeditor-box">
	<div id="editorMenu"></div>
    <div id="editor"