关于几款开发项目中使用的富文本编辑器

富文本编辑器,Rich Text Editor, 简称 RTE, 是一种可内嵌于浏览器,所见即所得的文本编辑器。网上提供许多免费的富文本编辑器内嵌于自己的网站或程序里(当然付费的功能会更强大些),方便用户编辑文章或信息。以下是个人筛选出来比较好的开源富文本编辑器(仅供参考)。

WYSIWYG模式

TinyMCE

文档:http://tinymce.ax-z.cn/
下载地址:http://tinymce.ax-z.cn/download-all.php
Github:https://github.com/tinymce/tinymce

功能强大、所见即所得的富文本编辑器
适用于React,Vue和Angular 
界面风格简单,
具备常用的文档操作功能,如格式,插入超链接,加粗,一,二,三级标题等
复制和粘贴:粘贴浏览器,屏幕截图,word中的任何内容
支持本地或者插入链接的形式进行图片上传和视频上传
对图片进行在线二次编辑
保存文本为本地草稿及恢复最近草稿

在这里插入图片描述
浏览器兼容性:
http://tinymce.ax-z.cn/general/system-requirements.php

ummernote

官网/文档:https://summernote.org/
Github:https://github.com/summernote/summernote/

Summernote是一个轻量级(100多kb,不算插件)JavaScript库,可以帮助您在线创建所见即所得的编辑器。
依赖于Jquery构建
自身风格基于Bootstrap,支持bootstrap3和bootstrap4
复制和粘贴:粘贴浏览器,屏幕截图,word中的任何内容
图片上传和视频上传依托插件可实现(本身视频不具备上传功能)
对图片进行在线二次编辑

markdown模式

Tui.editor

文档:https://github.com/nhn/tui.editor/blob/master/docs/getting-started.md
下载地址:https://github.com/nhn/tui.editor/releases
Github:https://github.com/nhn/tui.editor
一款同时支持富文本及Markdown语法的所见即所得开源编辑器
适用于React,VueAngular
提供了Markdown模式和WYSIWYG模式
具备以下功能:

实时预览:编辑Markdown,同时关注呈现的HTML。您的修改将立即应用。
滚动同步:在Markdown和Preview之间同步滚动。您不需要分别滚动每个。
自动缩进:光标将始终位于您想要的位置。
语法突出显示:您可以立即检查损坏的Markdown语法。
表格:通过表格的上下文菜单,您可以添加或删除表格的列或行,还可以在单​​元格中排列文本。
代码块编辑器:代码块区域可以通过图层弹出编辑器进行编辑。
工具栏:通过工具栏,您可以为正在编辑的文档设置样式或向其中添加元素。
复制和粘贴:粘贴浏览器,屏幕截图,Excel,PowerPoint等中的任何内容。
上传图片: 支持本地上传和URL上传

Editor.md

官方:http://editor.md.ipandao.com/
Github:https://github.com/pandao/editor.md
完整示例:http://editor.md.ipandao.com/examples/full.html(所有用法示例都有)
国内开源的一款在线Markdown编辑器,可嵌入的 Markdown 在线编辑器(组件),基于 CodeMirror、jQuery 和 Marked 构建。
主要特性

支持“标准”Markdown / CommonMark和Github风格的语法,也可变身为代码编辑器;
支持实时预览、图片(跨域)上传,视频上传、预格式文本/代码/表格插入、代码折叠、搜索替换、只读模式、自定义样式主题和多语言语法高亮等功能;
支持ToC(Table of Contents)、Emoji表情、Task lists、@链接等Markdown扩展语法;
支持TeX科学公式(基于KaTeX)、流程图 Flowchart 和 时序图 Sequence Diagram;
支持识别和解析HTML标签,并且支持自定义过滤标签解析,具有可靠的安全性和几乎无限的扩展性;
支持 AMD / CMD 模块化加载(支持 Require.js & Sea.js),并且支持自定义扩展插件;
兼容主流的浏览器(IE8+)和Zepto.js,且支持iPad等平板设备;
支持自定义主题样式;

在这里插入图片描述

移动端

小程序原生editor组件:
https://developers.weixin.qq.com/miniprogram/dev/component/editor.html
基于uni-app框架的editor:
https://uniapp.dcloud.io/component/editor.html#editor

PS:小程序对于返回的html还是markdown格式文本都需要解析。
1.wxParsehttps://github.com/icindy/wxParse
作者似乎已经弃坑了,两年多没有再进行迭代了,所以该组件也存在很多问题
2.Towxml:https://github.com/sbfkcel/towxml
Towxml 3.0 目前是比较完善的解析插件。拥有许多强大的功能。下面是官方解析后的效果图:
在这里插入图片描述

  • 1
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
以厘php框架是一个支持阿里云(函数计算),腾讯(函数计算),swoole(webserver模式) 的云php框架,系统自带管理后台方便快速的进行开发。 基础核心完结不新增功能函数等 系统介绍: 前端以layui,jquery为基础,还包括了kindeditor 富文本编辑器、echarts 图表绘制! 原创前端快速表单函数,jsfrom 快速生成表单修改新增数据! 极简路由模式,根据url访问对应的类调用对应的函数! 每个功能以插件形式集成,使得每个插件都是相互独立,又能相互关联,强大又灵活! 特有的插件函数 Construct 没有找到的类函数,直接会调用这里,方便开发功能系统! 特有的url只能以小写函数名访问,大写函数名只能通过内部调用! 总结:小巧,灵活,强大,方便,支持云的php框架。 系统注意: 需要伪静态支持,php 7+系列直接安装即可; 直接导入ELikj.sql 登陆账号:admin 登陆密码:qqqqaa 强烈建议! 实战类,函数接收2个参数最佳! 阿里云部署: 函数入口aliyun.handler 手工导入数据库 ELikj.sql 腾讯云部署: 执行方法 tencent.main_handler 手工导入数据库 ELikj.sql swool部署: shell 执行 php swoole.php 插件开发说明: 插件开发注意 插件所有公用功能建议写在插件类,方便其他插件调用! 插件存放目录/ELikj/Controller/插件名字小写.Class.php; 插件的扩展、后台渲染和数据处理,存放到/Tpl/插件目录/; ELitpl函数,加载其他扩展; 插件的扩展,调用自己的函数,使用 $THIS 调用来调用。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值