基于 Ueditor 的现代化富文本编辑器 Neditor

MIT
JavaScript
跨平台
2017-05-27
左华栋

Neditor

Demo: https://neditor.notadd.com/demo/

为什么好的网页编辑器这么难做?

可能很多人都有不少经历,用网页编辑器,明明自己想要的是这样的效果,比如加粗、换行,但实际发出来的文章格式是错的,怎么改也改不过来。从word里面粘贴进来的文字,格式都变了。

编辑器本身复杂性

举个例子,“这样一句话”,对其中“一句话”进行加粗:

这样一句话
然后对“这样一句”进行斜体
这样**一句
然后对“样一句”加粗
*这
一句*话**

这时候,你想整体再取消加粗,上各种颜色,再取消等等操作,很多编辑器多多少少都会出问题了。
因为 html 代码里早都乱成一锅粥了,如下:

<em>这<strong>样</strong>一句<strong></strong></em><strong>话</strong> <br>

github上多达4W多个跟编辑器有关的项目

不同场景的需求

比如论坛,隐藏帖、出售帖、回复可见。
不同场景下就有不同需求,这就很难处理了

从word复制

好不容易把这些问题解决了,要知道,word 文档格式跟网页所用的html代码可完全不是一回事,有的人甚至把表格直接给你粘贴过来,这怎么处理?

图片问题

还有问题就是,网页编辑器是在线编辑,从 word 文档里复制来的图片是本地的,得考虑图片怎么粘上去。
或者是从别的地方粘贴过来,加了防盗链怎么办?

所以,所有这些问题都注定网页编辑器不好做,淘宝做的编辑器 KISSY Editor 况且还有诸多问题,何况我们这些人呢

Ueditor 为什么这么好用?

百度前端团队做了许多努力,现在 Ueditor 是公认最好用的中文富文本编辑器。

ueditor编辑器图

光看这自动化程度就知道有多复杂了,但是随着时间的推移,大家感觉百度编辑器并不是那么漂亮。于是我们对 Ueditor 进行修改,有了现在的 Neditor 。

Neditor 做了哪些改进?

  • 整体图标更换为SVG

  • 第一版图标对所有图标进行了重绘

  • 补充和增加图标后又补充了一些图标

对其中图标放大,SVG即使完全放大也不会失真(矢量图),便于使用在各种场景下。

在渲染速度上,几乎跟普通png没有什么差别,我们将所有SVG图标合成在一起,这样只需要加载一次即可。并且完全兼容旧浏览器。(IE8以上)

整体样式的改进

细节图,我们对每一处细节都做了改进,不论是弹窗还是右键菜单。

得益于我们对开源的热爱,这一切,您都可以免费使用。

项目地址:

Giteehttps://gitee.com/notadd/neditor
Githubhttps://github.com/notadd/neditor

加载中

评论(55)

紫辰潇湘
紫辰潇湘
不错,还可以
左华栋
左华栋 软件作者
百度做出来后,偶尔维护,但是阿里是真放弃维护。。。
风情万种
风情万种
来个手机版吧
w
wangtifang
期待vue版本的
山东-小木
山东-小木
作者什么时候能出一个类似的markdown编辑器 急需 或者能在这个编辑器里支持markdown也行
叫我刀刀
叫我刀刀
不错 , 虽然demo打不开
w
weenhall
jsp版打开demo报错
yanhl
yanhl
neditor.all.min.js 这个文件呢,找不到啊,难道一定要自己写嘛
分流砥柱
分流砥柱
neditor 不是解决了上传图片按钮,反应迟钝,多次弹出的bug了吗?我试了并没有呀。
L
LiuKZH
有个问题,上传了视频,再编辑会报错哦Uncaught TypeError: Cannot read property 'substr' of undefined at a (neditor.all.min.js:11) at neditor.all.min.js:11 at Object.each (neditor.all.min.js:5) at b (neditor.all.min.js:11) at UE.Editor. (ne

Web 富文本编辑器 Neditor 2.1.10 发布,完成细节美化

更新内容: 更新iconfont文件,修复替换图标错误 完成细节美化 Demo: https://demo.neditor.notadd.com/ Neditor 是基于 ueditor 的更现代化的富文本编辑器,支持HTTPS。 下载地址 Neditor ...

前天 09:31

Web 富文本编辑器 Neditor 2.1.9 发布,已支持 vue 和 angular

新特性 增加日文翻译 by @sanluan 添加 vue 版封装 (详见readme) Demo: https://demo.neditor.notadd.com/ Neditor 是基于 ueditor 的更现代化的富文本编辑器,支持HTTPS。 下载地址 Nedito...

12/05 10:30

Web 富文本编辑器 Neditor 2.1.8 发布, 修复 BUG

BUG 修复 修复cut操作的撤销栈记录不正确的问题 by @zzkaqq 修复:webkit浏览器里加粗和删除线同时作用于一段文字时,无法直接取消删除线的问题 by @zzkaqq 修复火狐滚动高度错误 by @dxcswl...

12/03 10:10

Web 富文本编辑器 Neditor 2.1.7 发布,支持优酷,爱奇艺视频

新功能: 支持优酷,爱奇艺视频网站 Demo: https://demo.neditor.notadd.com/ Neditor 是基于 ueditor 的更现代化的富文本编辑器,支持HTTPS。 下载地址 Neditor 码云: http://gitee.com/n...

11/30 00:09

Web 富文本编辑器 Neditor 2.1.5 发布,优化上传逻辑

BUG 修复: 优化了上传逻辑 完善了service Demo: https://demo.neditor.notadd.com/ 下载地址 Neditor 码云: http://gitee.com/notadd/neditor Neditor github 地址:http://github.com/not...

10/11 17:22

Neditor 2.1.5 发布,BUG 修复版

BUG 修复: 修改对话框默认字段 模板地址修改 Demo: https://demo.neditor.notadd.com/ 下载地址 Neditor 码云: http://gitee.com/notadd/neditor Neditor github 地址:http://github.com...

09/19 12:16

Neditor 2.1.2:更换了"替换"图标,修正主题图片路径

BUG 修复: 修正主题图片路径 @zongwei007 优化: 更换了替换图标 修改video服务名称 Demo: https://demo.neditor.notadd.com/ 下载地址 Neditor 码云: http://gitee.com/notadd/neditor Ne...

08/31 17:00

Neditor 2.1.1 发布:简化上传配置,更改相关注释

优化 优化了config 配置 更改了部分注释 这个版本配置上传接口更加简单了! Demo: https://demo.neditor.notadd.com/ 下载地址 Neditor 码云: http://gitee.com/notadd/neditor Neditor gi...

08/29 18:19

ngx-neditor 1.0.1 发布,更现代化的富文本编辑器 angular 组件

ngx-neditor 1.0.1 发布: 首个版本,封装为 Angular 插件。 支持 Angular 4+ neditor demo: https://demo.neditor.notadd.com/ 下载地址 码云: http://gitee.com/notadd/ngx-neditor gith...

08/18 15:21

Neditor 2.1.0 发布,更好用的中文 Web 编辑器

此版本已经将上传接口封装为 service ,只需少量修改就能支持各类后端及云存储。 新功能 将上传服务重写为 service ,支持各类接口及云存储。 删除编译后的 utf8-php 文件夹 BUG 修复 修复视...

08/17 15:01

没有更多内容

加载失败,请刷新页面

暂无问答

一些常用工具地址,随时更新中~

一些常用工具地址的备份: 一款比较全的先到化界面编辑器Neditor:https://gitee.com/notadd/neditor 前端ui组件库,类似element ui。iView:https://www.iviewui.com (有测试过,用法类似e...

09/05 14:50
48
0
我为什么不看好 PHP 发展 ?

讲道理来说对 php 还是蛮有感情的,从第一次看到 HHVM ,swoole , PHP7 ,再到后来 laravel reactphp php-pm 等项目,php 社区有着源源不断的潜力,和一群热爱开发的人来给它续命。 糟心的设...

08/29 15:44
2.1K
4

没有更多内容

加载失败,请刷新页面

没有更多内容

返回顶部
顶部