wangEditor 轻量级web富文本框 http://wangEditor.github.io/

发表于

wangEditor —— 轻量级 web 富文本编辑器，配置方便，使用简单。支持 IE10+ 浏览器

官网：www.wangEditor.com
文档：www.kancloud.cn/wangfupeng/wangeditor3/332599
源码：github.com/wangfupeng1988/wangEditor

直接下载：https://github.com/wangfupeng1988/wangEditor/releases
使用npm下载：npm install wangeditor （注意 wangeditor 全部是小写字母）
使用bower下载：bower install wangEditor （前提保证电脑已安装了bower）
使用CDN：//unpkg.com/wangeditor/release/wangEditor.min.js

demo 运行

下载源码 git clone git@github.com:wangfupeng1988/wangEditor.git
安装或者升级最新版本 node（最低v6.x.x）
进入目录，安装依赖包 cd wangEditor && npm i
安装包完成之后，windows 用户运行npm run win-example，Mac 用户运行npm run example
打开浏览器访问localhost:3000/index.html
用于 React、vue 或者 angular 可查阅文档中其他章节中的相关介绍

项目的根目录下安装 npm install wangeditor || npm install –save wangeditor
node_modle 下查看 wangeditor 是否安装成功，

成功安装即可：

1
import E from 'wangeditor';

初始化项目：本项目用vue

1
2
3
4
this.editList = new E('#div3');
this.editList.customConfig.showLinkImg = true;
this.editList.customConfig.uploadImgServer = '/upload'; // 上传图片设置后端服务器
this.editList.create();

读取内容 可以html和text的方式读取编辑器的内容,详情见说明文档： https://www.kancloud.cn/wangfupeng/wangeditor3/335775

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<div id="div1">
    <p>欢迎使用 wangEditor 编辑器</p>
</div>
<button id="btn1">获取html</button>
<button id="btn2">获取text</button>
<script type="text/javascript" src="/wangEditor.min.js"></script>
<script type="text/javascript">
    var E = window.wangEditor
    var editor = new E('#div1')
    editor.create()
    // 读取 html
    document.getElementById('btn1').addEventListener('click', function () {
        alert(editor.txt.html())
    }, false)
    // 读取 text
    document.getElementById('btn2').addEventListener('click', function () {
        alert(editor.txt.text())
    }, false)
</script>