Neditor

基于 Ueditor 的现代化富文本编辑器
授权协议 MIT
开发语言 JavaScript
所属分类 Web应用开发、 可视化HTML编辑器
软件类型 开源软件
地区 国产
投 递 者 刘兴修
操作系统 跨平台
开源组织
适用人群 未知
 软件概览

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

  • neditor是ueditor的亚种。我已经实现了vue+neditor的封装,下面记录一下常用工具栏的配置。 1、配置方法 实例化编辑器的时候传入 toolbars 参数 2、参数列表 名称 描述 anchor 锚点 undo 撤销 redo 重做 bold 加粗 indent 首行缩进 snapscreen 截图 italic 斜体 underline 下划线 strikethrough 删除

  • 1、<neditor v-if="neditorLoad" v-model="formFields.content" class="wd-editor" /> 加上v-if="neditorLoad" 2、neditorLoad默认false; 3、数据赋值成功之后,this.neditorLoad = true; 即可解决因为赋值时neditor还没有加载完成,导致赋值失败

  • Neditor是基于Ueditor的一款现代化界面的富文本编辑器。 最新版去掉了后端相关代码,纯AJAX提交,对于很多同学来说都希望简单改一下UE的后端上传代码就可以用。 具体步骤如下: 1、neditor.config.js增加如下的配置项imageFieldName:"upfile", 2、修改neditor.service.js,请求地址请更改为自己服务器的请求地址UE.Editor.pro

  • Neditor实际上是基于Ueditor开发的,所以Ueditor理论上也可以实现同样功能,但笔者未做测试 Vue版本Neditor传送门 参考neditor.all.js第15184行,可得知有字数统计事件 UE.plugins["wordcount"] = function() { var me = this; me.setOpt("wordCount", true); me.a

 相关资料
  • 本文向大家介绍vue2.0项目中使用Ueditor富文本编辑器示例代码,包括了vue2.0项目中使用Ueditor富文本编辑器示例代码的使用技巧和注意事项,需要的朋友参考一下 最近在vue项目中需要使用富文本编辑器,于是将Ueditor集成进来,作为公共组件。 项目地址:https://github.com/suweiteng/vue2-management-platform  1.放入静态资源

  • 本文向大家介绍nodejs后台集成ueditor富文本编辑器的实例,包括了nodejs后台集成ueditor富文本编辑器的实例的使用技巧和注意事项,需要的朋友参考一下 UEditor是由百度web前端研发部开发所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点,开源基于MIT协议,允许自由使用和修改代码.. 1 下载ueditor nodejs版本 2 复制public目录下面的文

  • 本文向大家介绍PHP如何搭建百度Ueditor富文本编辑器,包括了PHP如何搭建百度Ueditor富文本编辑器的使用技巧和注意事项,需要的朋友参考一下 本文为大家分享了PHP搭建百度Ueditor富文本编辑器的方法,供大家参考,具体内容如下 下载UEditor 官网:下载地址 将下载好的文件解压到thinkphp项目中,本文是解压到PUBLIC目录下并改文件夹名称为ueditor 第一步 引入ja

  • 本文向大家介绍Django集成百度富文本编辑器uEditor攻略,包括了Django集成百度富文本编辑器uEditor攻略的使用技巧和注意事项,需要的朋友参考一下 首先从 ueEditor官网 下载最新版本的包,目前官网上提供了ASP、.NET、PHP、JSP版本的,django版本只有一个第三方个人开发的,但看上出配置起来稍微复杂一点。 这里不介绍uEditor的使用方法,也不过多解释uEdit

  • Django集成UEditor (封装成应用) 百度富文本编辑器 http://ueditor.baidu.com/website/ 使用效果 测试环境 ubuntu 16.04 python3.5.2 django1.11.7 目前测试解决了出现的以下两个问题,都是python版本问题 error1 # name 'file' is not defined controller.py 68行

  • 本文向大家介绍vue2.x集成百度UEditor富文本编辑器的方法,包括了vue2.x集成百度UEditor富文本编辑器的方法的使用技巧和注意事项,需要的朋友参考一下 最近开发vue项目过程中,由于产品需要在项目中添加富文本编辑器,也在npm上找了几个基于vue开发的富文本编辑器,但是对兼容性比较高,不能兼容到IE9,10。所以最后决定使用百度UEditor。然后又是各种找如何集成到vue中。好记

  • 富文本编辑,又称为WYSIWYG(What You See Is What You Get,所见即所得)。在网页中编辑富文本内容,是人们对Web 应用程序最大的期待之一。虽然也没有规范,但在IE 最早引入的这一功能基础上,已经出现了事实标准。而且,Opera、Safari、Chrome 和Firefox 都已经支持这一功能。这一技术的本质,就是在页面中嵌入一个包含空HTML 页面的iframe。通

  • 本文向大家介绍vue集成百度UEditor富文本编辑器使用教程,包括了vue集成百度UEditor富文本编辑器使用教程的使用技巧和注意事项,需要的朋友参考一下 在前端开发的项目中,难免会遇到需要在页面上集成一个富文本编辑器。那么,如果你有这个需求,希望可以帮助到你。 vue是前端开发者所追捧的框架,简单易上手,但是基于vue的富文本编辑器大多数太过于精简。于是我将百度富文本编辑器放到vue项目中使