正文

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

张驰Terry  张驰Terry  2022-12-07  218

关键词：

前言

本文旨在向大家介绍在线文档的核心模块富文本编辑器技术，并介绍业内主流商业文档产品如何进行富文本编辑器技术选型。

富文本编辑器

富文本编辑器，Rich Text Editor, 简称 RTE, 是一种可内嵌于浏览器，所见即所得的文本编辑器。

富文本编辑器 - 常见交互

内容输入区域
输入内容
选区 & 操作
操作栏
顶部工具栏
侧边栏
内嵌工具栏
右击菜单

富文本编辑器 - 分级

富文本编辑器通常会做3个分级：L0、L1 和 L2

L0

依赖浏览器特性，主要是使用到了 designMode、ContentEditable、webkit-user-modify、execCommand 等特性。早期的编辑器都采用这种方案，但可定制的空间有限。例如早期的技术产品 WYSIWYG Editor。

<div class="kuaishou" contentediable="true">请输入正文</div> <!-- 富文本输入框 -->

documennt.execCommand('bold'); //操作

L1

L1 在 L0 的基础上继续使用浏览器的特性、DOM 的 API 来自主实现 Selection、Range、Element、TextNode 等，具备一定的可扩展性，但也会有很多难以解决的问题。主要商业产品包括石墨文档（Quill），腾讯文档（Etherpad ACE），飞书文档(Etherpad ACE), 语雀文档（slate, lake），印象笔记（PromiseMirror），Confluence WIKI以及SAAS 产品内集成的知识库（Teambition Thoughts、Pingcode 等等）；技术产品包括CKEditor、TinyMCE、Draft.js、 Slate、Quil.js 、ACE 等等，通常我们对 L1 编辑器从布局实现方式还区分为【传统模式】和【MVC模式】

传统模式

DOM 树等于数据，使用 DOM API 直接操作（CKEditor 4、TineMCE、UEditor）

MVC模式

数据和渲染分离，数据模型发生变更后，数据才发生变更（Slate、CKEditor 5、Quil.js）

L2

自定义输入和操作，包括光标、输入法、删除等基础动作，具备绘图布局等能力。主要商业产品包括Google Docs、 Office Word Online、WPS 以及轻雀文档。

富文本编辑器 - 对比

补充：Google Docs、WPS 以及 Office Online 之所以体验性能极致，产品体验丰富，也源于投入极大的研发成本。

富文本编辑器 - 技术选型

从团队规模角度

产品内容体验简单，并且缺乏编辑器开发者，推荐直接使用 Quill、 Slate.js、CKEditor、TIngMCE 进行二次开发。
产品内集成轻量级知识库，有5人以内的编辑器开发团队：推荐自研L1级别编辑器、
以协作编辑为产品核心，排版布局对标 Office，编辑器开发人员规模超过20+的编辑器研发团队: 推荐自研L2 编辑器。

从编辑器必备特性角度

健壮性 - 编辑器的稳定性是编辑器的生命线。
优秀的架构
能够定义一个文档模型，并且能够用一种简单的方式去区分两个文档模型是否在视觉上相等。
良好的MVC架构，创建一个在 DOM 与模型之间的映射，并且拥有完整的分层
在文档模型上能够定义表现良好的编辑操作（operation）。
可维护性 - 富文本编辑器代码量随着迭代会越来越大，所以能够用简单可依赖的方式去维护是很重要的
可扩展性 - 优秀的插件机制，优秀的扩展迭代能力。

userInput→ Action → Edit → Operation → Command → Mutation → Model → View（Layout，Redraw）→ DOM

block-style editor

类似 Notion 或者 Notion LIke 产品属于新的块级编辑体验笔记，拥有的页面和块无限层级，Back Link以及Database体验，与传统富文本编辑器在产品体验上有明显差异，本篇文章不着重描述，感兴趣可以先阅读 https://editorjs.io/

L2 富文本编辑器概览

分级

属于 L2 级

开发模式

编辑器核心输入区域是采用原生 JavaScript实现
顶部操作栏，侧边栏，内嵌栏，各种插件基于 React/Vue/原生JavaScript 皆可实现

核心模块

1.编辑引擎 & 计算引擎

独立的文档模型，管理文档 Model 与 View 之间的映射

2.布局引擎

重新实现渲染布局引擎，代替浏览器默认布局实现

3.协同引擎

多人协作操作OT，支撑多人同时在线协作编辑

4.插件引擎

支持编辑器block化的关键能力

关键设计

command 的原子操作抽象和设计
大型前端软件的架构分层，面向扩展开放，面向修改封闭

wangedit富文本编辑器增加上传视频功能(代码片段)

...司接到了了一个新的需求就是可以把项目的一个富文本的编辑器可以设置为能够上传视频于是乎就要对vue里面的这个组件进行操作了首先我们可以看一眼官网的文档需要用到的就直接到官网文档进行查询即可了需求（接口文... 查看详情

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

官方文档：http://simditor.tower.im/docs/doc-usage.htmllinkrel="stylesheet"type="text/css"href="[stylepath]/simditor.css"/>注意Simditor基于jQuery和module.js。hotkeys.js用于绑定热键。uploader.js与上传文件有关。如果您不需要上传功能，则不需要查看详情

百度富文本编辑器的使用(代码片段)

百度富文本编辑器的使用(2016年版本)对于大文章的网上编辑，你的输入编辑框肯定不够用，现在看看功能强大的富文本编辑框吧1.ueditor官方地址：http://ueditor.baidu.com/website/index.html 开发文档地址： http://ueditor.b... 查看详情

djangoxadmin集成djangoueditor富文本编辑器(代码片段)

本文档记录自己的学习历程！介绍UeditorHTML编辑器是百度开源的在线HTML编辑器,功能非常强大额外功能解决图片视频等无法上传显示问题Ueditor下载地址https://github.com/wsqy/DjangoUeditor.git解压后将DjangoUeditor文件夹复制到django项目目录... 查看详情

wangeditor富文本编辑器结合vue使用(代码片段)

一、wangEditor3.1.1wangEditor富文本编辑器具体参数配置请参考官方文档：https://www.kancloud.cn/wangfupeng/wangeditor3/332599。二、实现图文编辑 1varE=window.wangEditor;2//vm.editor=newE(document.getElementById(‘editor‘));3vm.edit 查看详情

富文本编辑器summernote的基本使用(代码片段)

summernote比较突出的优点就是能保持复制过来的东西的原有样式，并且比较流畅。官方文档地址：https://summernote.org/getting-started我是用到cdn引入　　　　<linkhref="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.9/summerno... 查看详情

kindeditor富文本框使用方法(代码片段)

这周我一共使用了两个文本框编辑器！我的上一篇文档讲的是wangeditor这个编辑器，现在就来讲讲kindeditor这个编辑器！首先还是去它的官网去下载脚本！http://kindeditor.net/demo.php所做的操作和那个wangeditor编辑器差不多都是需要在你... 查看详情

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

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

markdownspringboot-配置富文本编辑器(代码片段)

查看详情

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

Q1：富文本编辑器在模态框中只有第一次有效解决：在关闭模态框时移除富文本编辑器Kindeditor解决方法：$(‘#myModal‘).on(‘hidden.bs.modal‘,function()//关闭Dialog前移除编辑器KindEditor.remove(‘#content‘););UEditor解决方法：$(‘#adminModalLg... 查看详情

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

vue-quill-editor富文本编辑器使用(代码片段)

vue-quill-editorgithub地址：https://github.com/surmon-china/vue-quill-editor官方文档地址：https://www.npmjs.com/package/vue-quill-editor vue项目中，npm安装依赖npminstallvue-quill-editor--save两种引用方法，全局引用和局部引用全局引用，项查看详情

ueditor富文本编辑器跨域上传图片解决办法(代码片段)

在使用百度富文本编辑器的过程中,如果是有一台单独的图片服务器就需要将上传的图片内容放到图片服务器,也就是比如在a.com的编辑器上传图片,图片要保存到img.com的跨域上传图片功能,而在ueditor官方文档中说不支持单图上传的... 查看详情

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

借助富文本编辑器网站的编辑人员能够像Office一样，写出漂亮的所见即所得的页面。此处以tinymce为例在虚拟环境中安装包pipinstalldjango-tinymce目录： models.py settings.py urls.py admin.py ... 查看详情

tinymce-vue5富文本的实现(代码片段)

TinyMCE是一款易用、且功能强大的所见即所得的富文本编辑器。同类程序有：UEditor、Kindeditor、Simditor、CKEditor、wangEditor、Suneditor、froala等等。tiny中文文档：http://tinymce.ax-z.cn/本文介绍如何在vue项目中，使用TinyMCE实现富文本基本功... 查看详情

vue版富文本编辑器-vue-quill-editor-配置案例(代码片段)

vue-quill-editor-文档简单使用<template> 查看详情

vue版富文本编辑器-vue-quill-editor-配置案例(代码片段)

vue-quill-editor-文档简单使用<template> 查看详情

csdn博客园等6大技术博客平台的写作体验测评(代码片段)

目录功能对比markdown编辑器写作体验比较1.segmentfault.com体验5星，极好2.CSDN体验5星，极好3.开源中国OSChina.net体验3星，一般4.博客园cnblogs.com体验1星，极差5.知乎无markdown编辑器，富文本编辑器体验5星，极好6.简书评价5星，极好功... 查看详情