富文本编辑器-1-选型

author author     2023-03-22     266

关键词:

参考技术A

团队的业务多为后台管理系统,部分业务需要使用富文本编辑器。早期团队选用了百度编辑器,但存在bug多、无人维护、扩展性差等问题,且后续业需要更灵活的编辑器。为了解决这些问题,决定重选编辑器。

基于以下原因,笔者决定使用Quill来开发团队的编辑器组件:
1. Delta和API
Quill返回json结构的数据,有API操作编辑器内部元素。也可以通过innerHtml获取dom。
2. 可定制
Quill可以修改、扩展现有的模块,也可以添加新的模块,甚至可以在parchment的基础上全部重写。有较强的灵活性。
3. 兼容性
当前版本兼容Chrome、IE11、Edge,已满足业务需求。
4. 与其他编辑器比较
相比CKEditor、TinyMCE等传统编辑器,有更好的API和定制功能。而Draft是基于React的编辑器,需要自己实现数据层的内容,使用成本更高。国内的wangEditor功能比较全面,但不具备扩展性。

1. 基础文本模块
分割线、格式刷、段落、撤回和重做
2. 多媒体模块
图片上传模块
3. 其他模块
工具栏的Tooltip模块
4. 预览功能

图片上传主要取决于业务需求,我们可以改写图片的handler方法,打开一个模态框或者打开本地文件夹,调接口上传图片。通用点是保存的时候,用Delta保留前面的内容并插入图片内容,最后更新Quill。

由于图片上传、预览主要取决于业务需求,与编辑器关系不大,后面不再提到。

在线文档技术揭秘开篇-富文本编辑器(代码片段)

前言本文旨在向大家介绍在线文档的核心模块富文本编辑器技术,并介绍业内主流商业文档产品如何进行富文本编辑器技术选型。 富文本编辑器富文本编辑器,RichTextEditor,简称RTE,是一种可内嵌于浏览器,所见即所得... 查看详情

有道云笔记新版编辑器架构设计(上)

在开发有道云笔记的新版编辑器的过程中,我们遇到很多实际问题,愈发感觉到这是一个非常有深度的前端技术领域,所以我们将新版编辑器的技术选型、架构和部分实现细节拿出来分享给大家,希望对大家开发富文本编辑器、... 查看详情

flutter从0到1实现高性能多功能的富文本编辑器(代码片段)

通过阅读本文,您将了解到了解富文本编辑器需要拥有的功能知道编写富文本编辑器需要的代码模块学会定义富文本配置JSON,并将其解析为富文本前言:经过前面两篇文章的基础知识铺垫,我们终于要进入到专栏... 查看详情

使用ivx中富文本组件的经验总结

...例中都会经常使用。ivx中也封装好了富文本组件和富文本编辑器组件,今天就说一下这两个组件该如何使用吧。一.富文本和富文本编辑器富文本编辑器是一种可内嵌于浏览器,用于编辑富文本内容和格式的文本编辑器。它与富... 查看详情

javascript中的富文本编辑

一说起富文本,人们第一印象就是像使用word一样,在网页上操作文档。实际上差不多就是这样。富文本编辑,又称为WYSIWYG(WhatYouSeeIsWhatYouGet所见即所得),指在网页中编辑富文本内容。本文将详细介绍如何通过javascript实现富文本... 查看详情

selenium+java-关于富文本编辑器的处理

Selenium+java-关于富文本编辑器的处理什么是富文本编辑器?富文本编辑器,RichTextEditor,简称RTE,是一种可内嵌于浏览器,所见即所得的文本编辑器。具体长啥样,如下图:通过自动化操作富文本编辑器模拟场景:在富文本编辑器中... 查看详情

百度富文本编辑器

...------------------------------------百度搜索—— 百度富文本编辑器——进入首页(百度编辑器-UEditor-首页)百度编辑器 -UEditor-首页 ——上方导航【下载】——选择对应的版本下载(我选的是1.4.3.3.Net版本utf-8版)【把资源... 查看详情

富文本编辑器(代码片段)

Django的富文本编辑器想要用首先下载pipinstalldjango-tinymce创建应用pythonmanage.pystartapptask_1创建模型fromdjango.dbimportmodelsfromtinymce.modelsimportHTMLFieldclassMessageInfo(models.Model):username=models.CharField(max_ 查看详情

常用html富文本编辑器

常用的HTML富文本编译器UEditor、CKEditor、TinyMCE、HTMLArea、eWebEditor、KindEditor简介 这篇文章主要介绍了常用的HTML富文本编译器UEditor、CKEditor、TinyMCE、HTMLArea、eWebEditor、KindEditor简介,需要的朋友可以参考下 1、UEditorUEditor是由... 查看详情

富文本编辑器tinymce的使用(reactvue)(代码片段)

富文本编辑器TinyMCE的使用(ReactVue)一,需求与介绍 1.1,需求   编辑新闻等富有个性化的文本 1.2,介绍TinyMCE是一款易用、且功能强大的所见即所得的富文本编辑器。TinyMCE的优势:开源可商用,基于LGPL2.1插件丰富,... 查看详情

flutter从0到1实现高性能多功能的富文本编辑器(模块分析篇)(代码片段)

通过阅读本文,您将了解到了解富文本编辑器需要拥有的功能知道编写富文本编辑器需要的代码模块学会定义富文本配置JSON,并将其解析为富文本前言:经过前面两篇文章的基础知识铺垫,我们终于要进入到专栏... 查看详情

关于富文本编辑器ueditor

             2017.1.18,星期三?    关于富文本编辑器:    富文本编辑器,RichTextEditor,简称RTE,是一种可内嵌于浏览器,所见即所得的文本编辑器。 查看详情

qt富文本编辑器qtextdocument

...请以链接形式标明本文标题和地址:本文标题:Qt富文本编辑器QTextDocument     本文地址:http://techieliang.com/2017/12/726/文章目录1.介绍2.基本使用 2.1.简单范例 2.2.QTextCursor光标操作/遍历嵌套 查看详情

富文本编辑器怎么用

参考技术A富文本编辑器,RichTextEditor,简称RTE,是一种可内嵌于浏览器,所见即所得的文本编辑器。它是一种解决可一般的用户不同html等网页标记但是需要在网页上设置字体的颜色、大小、样式等信息问题一个文本编辑器。下面简... 查看详情

富文本编辑器ckeditor的使用

...,项目中有个论坛模块,当用户发帖时,需要用到富文本编辑器,考虑了一下,决定使用CKEditor富文本编辑器,虽然现在问世的富文本编辑器很丰富,比如还有百度的UEditor等等,但是我选择使用CKEditor的原因是它能快速引入到我... 查看详情

Flux Form 中的富文本编辑器

】FluxForm中的富文本编辑器【英文标题】:RichTextEditorinsideFluxForm【发布时间】:2015-11-0314:56:55【问题描述】:我正在使用通量,我想使用通量以后端形式显示rte(富文本编辑器)。<f:sectionname="Configuration">//...Hereiwanttodisplayrte... 查看详情

在线文本的编辑框——kindeditor富文本编辑的使用(代码片段)

1.富文本编辑器介绍  富文本编辑器,RichTextEditor,简称RTE,它提供类似于MicrosoftWord的编辑功能。常用的富文本编辑器:  KindEditor   http://kindeditor.net/  UEditor   http://ueditor.baidu.com/website/  CKEdirot  http://ckedito... 查看详情

百度富文本编辑器ueditor

前言  配置.netmvc4项目使用ueditor编辑器,在配置过程中遇见了好几个问题,以此来记录解决办法。编辑器可以到http://ueditor.baidu.com/website/download.html#ueditor处下载.net的开发包,如下图,我下载的是1.2.6.1net版本的开发包。配置:1... 查看详情