介绍

Neditor是基于Ueditor的一款现代化界面的富文本编辑器，在百度富文本框UEditor的基础上进行了美化并扩展，样式更加美观，功能更加强大，本文将带你体验一下。先放一张截图：

相关地址

• Neditor 码云： http://gitee.com/notadd/neditor
• Neditor github 地址：http://github.com/notadd/neditor
• 演示地址：https://demo.neditor.notadd.com/
• Ueditor 官网：http://ueditor.baidu.com
• Ueditor API 文档：http://ueditor.baidu.com/doc
• Ueditor详细文档：http://fex.baidu.com/ueditor/

使用步骤

• 获取安装包

方式一：完整安装包 （推荐）

推荐直接到对应码云仓库或者Github仓库下载

方式二： npm安装

npm i @notadd/neditor -S

方式三：编译安装

git clone https://github.com/notadd/neditor.git
npm install
npm run build

• 打开index.html

无需服务端配置即可体验，下面是我本地打开全屏的效果图，初步部署成功

其它版本

Angular：https://github.com/notadd/ngx-neditor

Vue：https://github.com/caiya/vue-neditor-wrap（第三方维护）

参数配置

参数的具体配置可以参考官网api，实例化的时候配置就行了

var ue = UE.getEditor('container', {
 autoHeight: false
});

配置项也可以通过 neditor.config.js 文件修改，具体的参考官网文档以及相关后台配置说明

编辑器图片、视频、涂鸦、附件上传service

编辑器上传逻辑单独在 neditor.service.js 文件配置，具体的配置方法见注释

设置和读取编辑器的内容

通 getContent 和 setContent 方法可以设置和读取编辑器的内容

var ue = UE.getContent();
ue.ready(function(){
 //设置编辑器的内容
 ue.setContent('hello');
 //获取html内容，返回: <p>hello</p>
 var html = ue.getContent();
 //获取纯文本内容，返回: hello
 var txt = ue.getContentTxt();
});

因为是基于Ueditor开发的，所以更多的配置项可以参考UEditor的配置，值得注意的是IE8以下版本不承诺支持。

类似的选择

富文本编辑器比较多，如下两个也常用，可能没有UEditor那么强大，但是够用就行了

wangEditor：http://www.wangeditor.com/

Simditor：https://simditor.tower.im/

总结

百度的UEditor富文本编辑器很强大，但是奈何界面比不过现在很多编辑器，因此NEditor是一个非常值得尝试的选择，大家有能力的可以多支持支持开发者，可以选择一款适合自己项目的。