百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 编程网 > 正文

基于百度Ueditor的一款现代化风格的富文本编辑器——Neditor

yuyutoo 2024-10-12 01:12 1 浏览 0 评论

介绍

Neditor是基于Ueditor的一款现代化界面的富文本编辑器,在百度富文本框UEditor的基础上进行了美化并扩展,样式更加美观,功能更加强大,本文将带你体验一下。先放一张截图:

相关地址

  • Neditor 码云: http://gitee.com/notadd/neditor
  • Neditor github 地址:http://github.com/notadd/neditor
  • 演示地址:https://demo.neditor.notadd.com/
  • Ueditor 官网:http://ueditor.baidu.com
  • Ueditor API 文档:http://ueditor.baidu.com/doc
  • Ueditor详细文档:http://fex.baidu.com/ueditor/

使用步骤

  • 获取安装包

方式一:完整安装包 (推荐)

推荐直接到对应码云仓库或者Github仓库下载

方式二: npm安装

npm i @notadd/neditor -S

方式三:编译安装

git clone https://github.com/notadd/neditor.git
npm install
npm run build
  • 打开index.html

无需服务端配置即可体验,下面是我本地打开全屏的效果图,初步部署成功

其它版本

Angular:https://github.com/notadd/ngx-neditor

Vue:https://github.com/caiya/vue-neditor-wrap(第三方维护)

参数配置

参数的具体配置可以参考官网api,实例化的时候配置就行了

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

配置项也可以通过 neditor.config.js 文件修改,具体的参考官网文档以及相关后台配置说明

编辑器图片、视频、涂鸦、附件上传service

编辑器上传逻辑单独在 neditor.service.js 文件配置,具体的配置方法见注释

设置和读取编辑器的内容

通 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开发的,所以更多的配置项可以参考UEditor的配置,值得注意的是IE8以下版本不承诺支持。

类似的选择

富文本编辑器比较多,如下两个也常用,可能没有UEditor那么强大,但是够用就行了

wangEditor:http://www.wangeditor.com/

Simditor:https://simditor.tower.im/

总结

百度的UEditor富文本编辑器很强大,但是奈何界面比不过现在很多编辑器,因此NEditor是一个非常值得尝试的选择,大家有能力的可以多支持支持开发者,可以选择一款适合自己项目的。

相关推荐

MySQL5.5+配置主从同步并结合ThinkPHP5设置分布式数据库

前言:本文章是在同处局域网内的两台windows电脑,且MySQL是5.5以上版本下进行的一主多从同步配置,并且使用的是集成环境工具PHPStudy为例。最后就是ThinkPHP5的分布式的连接,读写...

thinkphp5多语言怎么切换(thinkphp5.1视频教程)

thinkphp5多语言进行切换的步骤:第一步,在配置文件中开启多语言配置。第二步,创建多语言目录。相关推荐:《ThinkPHP教程》第三步,编写语言包。视图代码:控制器代码:效果如下:以上就是thi...

基于 ThinkPHP5 + Bootstrap 的后台开发框架 FastAdmin

FastAdmin是一款基于ThinkPHP5+Bootstrap的极速后台开发框架。主要特性基于Auth验证的权限管理系统支持无限级父子级权限继承,父级的管理员可任意增删改子级管理员及权限设置支持单...

Thinkphp5.0 框架实现控制器向视图view赋值及视图view取值操作示

本文实例讲述了Thinkphp5.0框架实现控制器向视图view赋值及视图view取值操作。分享给大家供大家参考,具体如下:Thinkphp5.0控制器向视图view的赋值方式一(使用fetch()方...

thinkphp5实现简单评论回复功能(php评论回复功能源码下载)

由于之前写评论回复都是使用第三方插件:畅言所以也就没什么动手,现在证号在开发一个小的项目,所以就自己动手写评论回复,没写过还真不知道评论回复功能听着简单,但仔细研究起来却无法自拔,由于用户量少,所以...

ThinkPHP框架——实现定时任务,定时更新、清理数据

大家好,我是小蜗牛,今天给大家分享一下,如何用ThinkPHP5.1.*版本实现定时任务,例如凌晨12点更新数据、每隔10秒检测过期会员、每隔几分钟发送请求保证ip的活性等本次分享,主要用到一个名为E...

BeyongCms系统基于ThinkPHP5.1框架的轻量级内容管理系统

BeyongCms内容管理系统(简称BeyongCms)BeyongCms系统基于ThinkPHP5.1框架的轻量级内容管理系统,适用于企业Cms,个人站长等,针对移动App、小程序优化;提供完善简...

YimaoAdminv3企业建站系统,使用 thinkphp5.1.27 + mysql 开发

介绍YimaoAdminv3.0.0企业建站系统,使用thinkphp5.1.27+mysql开发。php要求5.6以上版本,推荐使用5.6,7.0,7.1,扩展(curl,...

ThinkAdmin-V5开发笔记(thinkpad做开发)

前言为了快速开发一款小程序管理后台,在众多的php开源后台中,最终选择了基于thinkphp5的,轻量级的thinkadmin系统,进行二次开发。该系统支持php7。文档地址ThinkAdmin-V5...

thinkphp5.0.9预处理导致的sql注入复现与详细分析

复现先搭建thinkphp5.0.9环境...

thinkphp5出现500错误怎么办(thinkphp页面错误)

thinkphp5出现500错误,如下图所示:相关推荐:《ThinkPHP教程》require():open_basedirrestrictionineffect.File(/home/ww...

Thinkphp5.0极速搭建restful风格接口层

下面是基于ThinkPHPV5.0RC4框架,以restful风格完成的新闻查询(get)、新闻增加(post)、新闻修改(put)、新闻删除(delete)等server接口层。1、下载Thin...

基于ThinkPHP5.1.34 LTS开发的快速开发框架DolphinPHP

DophinPHP(海豚PHP)是一个基于ThinkPHP5.1.34LTS开发的一套开源PHP快速开发框架,DophinPHP秉承极简、极速、极致的开发理念,为开发集成了基于数据-角色的权限管理机...

ThinkPHP5.*远程代码执行高危漏洞手工与升级修复解决方法

漏洞描述由于ThinkPHP5框架对控制器名没有进行足够的安全检测,导致在没有开启强制路由的情况下,黑客构造特定的请求,可直接GetWebShell。漏洞评级严重影响版本ThinkPHP5.0系列...

Thinkphp5代码执行学习(thinkphp 教程)

Thinkphp5代码执行学习缓存类RCE版本5.0.0<=ThinkPHP5<=5.0.10Tp框架搭建环境搭建测试payload...

取消回复欢迎 发表评论: