百度Ueditor开源的一款现代化界面的富文本编辑器!

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

百度Ueditor开源的一款现代化界面的富文本编辑器!

如何使用Ueditor

第一步,下载编辑器

方式一:完整安装包(推荐)

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

方式二:npm安装

npm i @notadd/neditor -S

方式三:编译安装

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

第二步:在浏览器打开 index.html

无需服务端配置即可体验,进入到目录 dist , 使用浏览器打开文件 index.html 。下面是我本地打开全屏的效果图,初步部署成功

安装成功后的编辑器显示

技术支持

自定义的参数

编辑器有很多可自定义的参数项,在实例化的时候可以传入给编辑器:

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

配置项也可以通过 neditor.config.js 文件修改,具体的配置方法请看 [前端配置项说明]( 前端配置项说明.md)、后端配置项说明

编辑器图片、视频、涂鸦、附件上传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 的更多API请看API 文档

项目地址

Neditor码云

Neditor github地址

Ueditor文档

注:对IE8以下版本不再承诺兼容

结束语

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

1. 本站所有免费资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!
2. 本站不保证所提供下载的免费资源的准确性、安全性和完整性,免费资源仅供下载学习之用!如有链接无法下载、失效,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或技术教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
5. 加入前端开发QQ群:565733884,我们大家一起来交流技术!
码云笔记 » 百度Ueditor开源的一款现代化界面的富文本编辑器!

发表评论