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

35岁的程序员 2018-12-05 13:58:30 ⋅ 920 阅读

简介

Neditor 是基于 ueditor 的更现代化的富文本编辑器,支持HTTPS。

新特性

  • 增加日文翻译 by @sanluan

  • 添加 vue 版封装 (详见réadmet)

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

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

编辑器本身复杂性

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

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

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

<em><strong></strong>一句<strong></strong></em><strong></strong> <br>

github_editor.jpg

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

场景的需求

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

从word复制

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

图片问题

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

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

Ueditor 为什么这么好用?

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

editor编辑器图.png

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

Neditor 做了哪些改进?

整体图标更换为SVG


整体图标更换为SVG.png

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

图标进行了重绘.png

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


补充图标.png

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

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

整体样式的改进

新界面.png

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

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

项目地址:
Gitee: https://gitee.com/notadd/neditor
Github:https://github.com/notadd/neditor

---------------END----------------

后续的内容同样精彩

长按关注“IT实战联盟”哦




全部评论: 0

    我有话说:

    「开源资讯」Atom 1.52.0 1.53.0-beta0发布,跨平台文本编辑器

    Atom 同时发布了 1.52.0 1.53.0-beta0 版本。Atom 是 GitHub 专门为程序员推出的一个跨平台文本编辑器。具有简洁直观的图形用户界面,并有很多有趣的特点:支持

    Angular 11.0.0-rc.2 发布,Web 前端框架

    Angular 11.0.0-rc.2 现已发布,具体更新内容如下: Bug 修复 common:从r-> Y更改 week-numbering year 格式 compiler

    文本编辑器CKEditor 4.14.1 发布,优化编辑器表格大小

    CKEditor是新一代的FCKeditor,是一个重新开发的版本,CKEditor是全球最优秀的网页在线文字编辑器之一。

    Angular 11.1.0-next.2 发布,Web 前端框架

    Angular 11.1.0-next.2 现已发布,具体更新内容如下: Bug 修复 animations:在浏览器动画生成器中实现 getPosition compiler-cli

    Vue 3 正式发布

    Vue.js 3.0 "One Piece" 已正式发布,此框架新的主要版本提供了更好的性能、更小的捆绑包体积、更好的 TypeScript 集成、用于处理大规模用例的新 API,并为框架未来的长期

    Angular 11.1.0 正式发布,支持 TypeScript 4.1

    。 近日,Angular 11.1.0 正式发布...

    Atom 1.56.0 发布,GitHub 官方文本编辑器

    Atom 是由 GitHub 开发的自由及开放源代码的文字与代码编辑器支持 macOS、Windows Linux 操作系统,支持 Node.js 所写的插件,并内置由 Github 提供的

    前端框架 Angular 11.0.0 正式发布,不再支持 IE 9 、10

    前端框架 Angular 11.0.0 正式发布。 Angular 11.0.0 将 TypeScript 升级到 4.0, 对 TypeScript 3.9 不再支持。 放弃了对 IE 9 、10

    WebStorm 2021.1 Beta 发布:改进对版本控制、Stylelint Vue支持

    WebStorm 2021.1 首个 Beta 版本已发布。更新亮点如下: 改进对 Stylelint 的支持 支持 Vue 中的 CSS 模块 支持 Git commit 消息模板 增加将变更

    Python 3.9.1 发布,支持苹果 M1 macOS 11 Big Sur

    Python 3.9.1 已正式发布。Python 3.9.1 是 Python 3.9 的第一个维护版本,也是第一个在 Apple Silicon 上原生支持 macOS 11 Big Sur 的

    Syncthing 1.11.0 1.11.1 发布,连续文件同步工具

    Syncthing 是一个免费开源的工具,它能在你的各个网络计算机间同步文件/文件夹,它的同步数据是直接从一个系统中直接传输到另一个系统的,并且它是安全且私密的。 Syncthing 1

    Eclipse OpenJ9 v0.23.0 发布,Java 虚拟机

    Eclipse OpenJ9 v0.23.0 已发布,Eclipse OpenJ9 是 OpenJDK 的 JVM,此 Java 虚拟机经过优化,具备占用空间小、启动速度快以及吞吐量高等优势。 新

    PyCharm 2021.1 EAP 4 发布,支持 WSL 2 更快的索引

    PyCharm 2021.1 EAP 4 为 WSL 2支持带来了几个不错的补充,并使索引速度更快,同时引入了 GitHub 拉取请求模板。 支持 WSL 2 从现在开始,你可以在

    Textadept 11.0 发布,极简主义跨平台文本编辑器

    Textadept 是一个快速、极简主义可扩展的跨平台文本编辑器。使用 C 编写的非常轻量级的代码库,依赖于 Lua 的可扩展性。编辑器可以在图形环境(GTK2 CLI 环境

    Element 2.14.1 发布,基于 Vue 的桌面端组件库

    Element 2.14.1 发布了。Element 是一套为开发者、设计师产品经理准备的基于 Vue 2.0 的桌面端组件库,提供了配套设计资源,帮助你的网站快速成型。由饿了么公司前端团队开源

    IntelliJ IDEA 2021.1 EAP 1 发布,支持 Java 16 WSL 2

    IntelliJ IDEA 2021.1 EAP 1 现已发布,官方表示,其主要是将 IntelliJ IDEA 2021.1 作为一个高质量的版本来对待,它将增强产品的可用性用户界面

    Simplenote 2.9.0 发布,开源跨平台云笔记工具

    Simplenote 2.9.0 发布了。Simplenote 是一个简单、轻量级的跨平台云笔记工具,可以用来保存文字、表格、代码等信息,用户记录的内容可以与所有设备保持同步。Simplenote

    Eclipse Jetty 9.4.38、10.0.1 11.0.1 发布

    Eclipse Jetty 9.4.38、10.0.1 11.0.1 已经发布。这三个版本都包含了大量的 bug 修复改进,建议所有用户尽快升级。重要的是,这些版本涉及 CVE-2020

    Quarkus 1.9.2.Final 发布,Java 云原生、容器优先框架

    Quarkus 1.9.2.Final 现已发布。Quarkus 是 Kubernetes 原生的 Java 技术栈,它由同类中最佳的 Java 库标准精制而成,并针对容器云部署量身定