最近在做缺陷管理系统时用到了富文本编辑器，朋友推荐百度UEditor，看过文档之后觉得里面的功能丰富，但是配置也相对复杂，对于使用者要求较高。况且在轻量级网页应用的开发中也并不需要如此多的功能，所以真正需要的是一个使用简单的轻量级富文本编辑器，出于方便考虑，也应该尽可能保证“所见即所得”原则，那么wangEditor便是你的不二之选。
推荐理由：官网及入门文档写的十分友好，具有基本前端入门经验的人即可上手使用。
贴一个带有简单配置的demo，在vue及react中的使用以及更多文档请访问官网查看。
wangEditor官网地址
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>wangEditor demo</title>
</head>
<body>
<div id="editor">
<p>欢迎使用 <b>wangEditor</b> 富文本编辑器</p>
</div>
<!-- 注意， 只需要引用 JS，无需引用任何 CSS ！！！ wangEditor3开始不再依赖jQuery-->
<script type="text/javascript" src="http://unpkg.com/wangeditor/release/wangEditor.min.js"></script>
<script type="text/javascript">
var editor = new wangEditor('#editor')
// 或者 var editor = new wangEditor( document.getElementById('editor') )
//配置菜单栏显示项
editor.customConfig.menus = [
'head', // 标题
'bold', // 粗体
'fontSize', // 字号
'fontName', // 字体
'italic', // 斜体
'underline', // 下划线
'strikeThrough', // 删除线
'foreColor', // 文字颜色
'backColor', // 背景颜色
//'link', // 插入链接
//'list', // 列表
'justify', // 对齐方式
//'quote', // 引用
//'emoticon', // 表情
'image', // 插入图片
//'table', // 表格
//'video', // 插入视频
//'code', // 插入代码
'undo', // 撤销
'redo' // 重复
]
editor.customConfig.uploadImgServer = '/upload';//上传本地图片到服务器 '/upload'为服务端地址
editor.create();
editor.txt.html('<p>操作步骤:</p><br/><br/>');
editor.txt.append('<p>期望结果:</p><br/><br/>');
editor.txt.append('<p>实际结果:</p><br/><br/>');
</script>
</body>
</html>
实际效果：
