基于 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

的码云指数为
超过 的项目
加载中

评论(56)

y
yeerba
一个巨大的问题 就是编辑页面如果很高.在火狐下输入文字后,下拉,就会重复显示所输出的文字. 控制台提示 此网站似乎使用 scroll-linked 定位效果。这可能无法与异步平移一起使用;参见 https://developer.mozilla.org/docs/Mozilla/Performance/ScrollLinkedEffects 详细了解,也可加入我们一起讨论相关的工具和功能!
紫辰潇湘
紫辰潇湘
不错,还可以
风情万种
风情万种
来个手机版吧
w
wangtifang
期待vue版本的
山东-小木
山东-小木
作者什么时候能出一个类似的markdown编辑器 急需 或者能在这个编辑器里支持markdown也行
叫我刀刀
叫我刀刀
不错 , 虽然demo打不开
极客编程111
你是拆台的么
weenhall
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

Neditor 2.1.17 发布,修复涂鸦板报错

BUG 修复 修复涂鸦上传报错 @Skqing Demo: https://demo.neditor.notadd.com/ Neditor 是基于 ueditor 的更现代化的富文本编辑器,支持HTTPS。 下载地址 Neditor 码云: http://gitee.com/n...

2019/04/28 09:31

Neditor 2.1.16 发布,修复缩放图片问题

BUG 修复 修复缩放图片时,鼠标mouseUp后图片还是在缩放 by @ShinyHwong Demo: https://demo.neditor.notadd.com/ Neditor 是基于 ueditor 的更现代化的富文本编辑器,支持HTTPS。 下载地址 ...

2019/04/22 09:58

Neditor 2.1.15 发布,修复图片浮动被过滤

Neditor 2.1.15 发布了,主要改进内容包括: BUG 修复 修复图片浮动被过滤 (by @Zclhlmgqzc) Demo: https://demo.neditor.notadd.com/ Neditor 是基于 ueditor 的更现代化的富文本编辑器,...

2019/01/10 12:11

Neditor 2.1.14 发布,修复了列表图标无效的问题

Neditor 2.1.14 发布了,主要改进内容包括: 修复了列表图标无效的问题和uParse的列表路径配置问题 Demo: https://demo.neditor.notadd.com/ Neditor 是基于 ueditor 的更现代化的富文本编辑...

2019/01/08 09:16

Web 富文本编辑器 Neditor 2.1.13 发布,修复字体显示区显示“none” 的问题

更新内容: BUG 修复 修复 字体大小和字体选择后显示区显示 none 的问题 #105 Demo: https://demo.neditor.notadd.com/ Neditor 是基于 ueditor 的更现代化的富文本编辑器,支持HTTPS。 下载...

2018/12/29 17:15

Web 富文本编辑器 Neditor 2.1.12 发布,支持远程图片本地化

BUG 修复 解决粘贴图片时提交的图片表单名称为 undefined 的问题 (by @ciey ) 注:此版本支持远程图片本地化(默认开启)【关闭请在: config 里设置 catchRemoteImageEnable】 更新内容: ...

2018/12/27 13:11

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

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

2018/12/10 09:31

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

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

2018/12/05 10:30

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

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

2018/12/03 10:10

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

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

2018/11/30 00:09

没有更多内容

加载失败,请刷新页面

1
回答
CMS后台更换成neditor(基于百度Ueditor)后,发布内容页面编辑器默认高度问题

个人测试的一个用dedecms搭建的网站,富文本编辑器更换为Ueditor后界面显示一切正常,但ueditor的表格控制有点问题,遂改成了neditor,...

05/07 16:18

没有更多内容

加载失败,请刷新页面

没有更多内容

替换雷劈网表单设计器使用的默认主题,使用neditor

替换步骤: 1.前往雷劈网下载demo,快速通道http://formdesign.leipi.org/downloads.html 2.下载neditor,快速通道:https://www.oschina.net/p/neditor 3.将formdesign/js/ueditor-formdesig...

2018/01/22 15:04
33
0
vue 集成 NEditor 富文本

下载NEditor 放在 vue 项目下面 public 文件中。 安装 vue-neditor-wrap 执行命令 npm install vue-neditor-wrap 代码使用 <VueNeditorWrap ref="VueNeditorWrap" v-model="content" :config...

2019/08/07 10:15
49
0
自己动手用electron+vue开发博客园文章编辑器客户端【二】

回顾 在上一篇文章中, 咱们聊了我开发的这个程序是什么样子、为什么要开发这个程序 electron的工程结构,他是怎么启动和退出的 以及我们怎么用electron的技术,登录博客园,拿到会话信息; ...

2019/01/21 07:16
25
0

没有更多内容

加载失败,请刷新页面

没有更多内容

返回顶部
顶部