Neditor 富文本编辑器介绍

Wesley13
• 阅读 677

Neditor富文本编辑器介绍

Neditor 是我们团队基于 Ueditor 的一款富文本编辑器。 不论从功能还是从其它各方面来讲, Ueditor 都是一款无以替代的编辑器产品。 只是已经不符合现代化样式的需求,于是我们修改它的样式,实现了这样的效果:

Neditor 富文本编辑器介绍

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

入门部署和体验

第一步:下载编辑器

下载 Neditor 最新版

或从源码编译:

git clone 仓库地址
npm install
grunt notadd

第二步:创建 demo 文件

解压下载的包,在解压后的目录创建 demo.html 文件,填入下面的 html 代码

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>ueditor demo</title>
</head>
<body>
    <!-- 加载编辑器的容器 -->
    <script id="container" name="content" type="text/plain">这里写你的初始化内容</script>
    <!-- 配置文件 -->
    <script type="text/javascript" src="neditor.config.js"></script>
    <!-- 编辑器源码文件 -->
    <script type="text/javascript" src="ueditor.all.js"></script>
    <!-- 实例化编辑器 -->
    <script type="text/javascript">
        var ue = UE.getEditor('container');
    </script>
</body>
</html>

第三步:在浏览器打开demo.html

如果看到了下面这样的编辑器,恭喜你,初次部署成功!

Neditor 富文本编辑器介绍

自定义的参数

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

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

配置项也可以通过 neditor.config.js 文件修改,具体的配置方法请看[前端配置项说明](http://fex.baidu.com/ueditor/#start-config1.4 前端配置项说明.md)

设置和读取编辑器的内容

通 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 文档

相关链接

Ueditor 官网:http://ueditor.baidu.com

Ueditor API 文档:http://ueditor.baidu.com/doc

Ueditor github 地址:http://github.com/fex-team/ueditor

Neditor github 地址:http://github.com/notadd/neditor

详细文档

Ueditor 文档:http://fex.baidu.com/ueditor/

联系我们

QQ 群: 321735506 issue:github issue

捐赠

Neditor 富文本编辑器介绍

点赞
收藏
评论区
推荐文章
blmius blmius
3年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
待兔 待兔
3个月前
手写Java HashMap源码
HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程22
编程范儿 编程范儿
3年前
项目中的富文本编辑器该如何选择?
项目中经常需要用到富文本编辑器的时候,而常见的富文本编辑器都有哪些?该如何选择?先看看市面上都有哪些可用的富文本编辑器:(插件式的,支持Vue,React,Angular框架)(Typescript开发的Web富文本编辑器,轻量、简洁、易用、开源免费,支持JS直接引入使用,或者Vue2/3,React)(开源,插件多,功能齐全,支持
Easter79 Easter79
3年前
ssm项目中ueditor富文本编辑器的使用
一、下载 https://ueditor.baidu.com/website/index.html  将ueditor放到项目中合适的位置  !(https://oscimg.oschina.net/oscnet/429e83cb838b1eb4ed6dd0d348481174948.png)二、配置文件上传路径   在utf8js
Easter79 Easter79
3年前
Spring之WebSocket
初次学习WebSocket。在本次写的WebSocketDemo里使用到了如下插件(技术):1.百度的富文本编辑器:http://ueditor.baidu.com/website/(https://www.oschina.net/action/GoToLink?urlhttp%3A%2F%2Fueditor.baidu.com%2Fwebsit
Stella981 Stella981
3年前
Android蓝牙连接汽车OBD设备
//设备连接public class BluetoothConnect implements Runnable {    private static final UUID CONNECT_UUID  UUID.fromString("0000110100001000800000805F9B34FB");
Wesley13 Wesley13
3年前
UEditor编辑器小扩展
项目中使用UEditor编辑器作为富文本编辑器,用起来挺好。但随着文件服务器的搭建,项目中图片文件以及其它一下小文件被独立存储之后,UEditor用起来就不那么爽了。如果不做点改动的话,所有通过UEditor上传的文件,还是存储在项目中的/ueditor/jsp/upload/目录下(默认配置),无法和文件服务器配合使用。所以改动是必然的,具体操作步
Wesley13 Wesley13
3年前
ueditor1.4.3 springmvc图片上传
ueditor:百度富文本编辑器,地址:ueditor.baidu.com版本选择,之所以选择1.4.3,是因为ueditor1.4.2才修复在bootstrap环境下图片拖拽异常,看到1.4.3也修复了不少的bug,没敢使用1.4.2,稍微看了下源码,1.4.3里面很多todo注释,ueditor一直在改进,不太成熟,既然这么多bug,为什么要选ue
Wesley13 Wesley13
3年前
UEditor使用说明
UEditor使用说明UEditor是由百度web前端研发部开发所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点,开源基于BSD协议,允许自由使用和修改代码。 !(https://oscimg.oschina.net/oscnet/c5da02e392bca54c54520b8f38d0b
新增富文本单元格和XSS过滤器
一.富文本单元格        皕杰设计器新增了单元格富文本类型,我们在一些网站编辑文章的时候经常可以看到富文本和markdown等编辑器,其中以Word为例,输入文字后,选择不同的功能(通常是通过点击某个图标),例如加粗或者调整字体大小,处理