富文本编辑器在线（富文本编辑器官网）

大家好！今天让创意岭的小编来大家介绍下关于富文本编辑器在线的问题，以下是小编对此问题的归纳整理，让我们一起来看看吧。

开始之前先推荐一个非常厉害的Ai人工智能工具：开始之前先推荐一个非常厉害的Ai人工智能工具，一键生成原创文章、方案、文案、工作计划、工作报告、论文、代码、作文、做题和对话答疑等等

只需要输入关键词，就能返回你想要的内容，越精准，写出的就越详细，有微信小程序端、在线网页版、PC客户端

官网：https://ai.de1919.com

本文目录:

• 1、ios富文本编辑器

• 2、uniapp开发微信小程序富文本编辑器（样式仿腾讯文档）

• 3、富文本编辑器如何实现部分内容不可编辑,部分内容可编辑

• 4、富文本编辑器-1-选型

一、ios富文本编辑器

方案 ：html+wkwebview，支持加粗、下划线、斜体、对齐方式、字体更改颜色、插入图片、插入视频、插入链接、清除格式、撤回上一个操作

核心 ：利用html5新特性contenteditable，当div的contenteditable为true时，div进入编辑状态，可以通过执行html5的命令对文本进行操作。命令文档地址：https://developer.mozilla.org/zh-TW/docs/Web/API/Document/execCommand。

具体实现 ：

一：文件目录

1.editor.html,该文件实现了编辑器的节点骨架，一个contenteditable为true的div。

2.ZJSTextEditor.js，该文件是编辑器的核心内容，主要实现编辑器的各种操作，以插入视频为例,外部的wkwebview只需要执行js方法evaluateJavaScript:‘zss_editor.insertVideo(...)’，将url带入

3.EditorView这个文件主要是放wkwebview，以及wkwebview调用ZJSTextEditor.js中js方法的部分。如页面加载完，设置占位文字，或者默认对一些标签的处理

二：开发中产品提出的需求和我的设计方案

1.web端要求dom结构为<p>...</p> <p>...</p> <p>...</p> <p>...</p> <p>...</p>,也就是n个p里包含着你插入的视频图片等子节点？

我的方案：

1.1：在editor.html文件中插入的div中，插入一个默认的空p标签<p><br></p>,这样会保证你在文字中间插入图片、视频或者换行时，系统给你新增一个p标签包裹而不是div标签

1.2：在插入图片后加入一个空p，在文字中间插入视频后加入一个空的p和br再删除br，插入br是为了在文字中间插入视频时，让系统自动给你补全p标签，否则视频会被加在该文字的下一行。

2.每个图片要紧紧跟随一个图片输入框，且图片输入框支持粘贴，且图片和图片输入框可以通过某个按钮同时被删除？

我的方案：

图片有三个途径添加，第一个是粘贴来的新闻中带有图片，第二个是自己插入的图片，第三个是从html刚刚开始加载时自带图片（从web端发布的文章，在ios端编辑）。

2.1：每个图片要紧紧跟着一个图片输入框，我在三个途径处分别做了图片的处理，首先是自己插入的图片，我在插入图片时，紧接着插入一个textarea标签和一个p标签。插入一个p标签的目的是满足需求1，其次是粘贴来的新闻和html刚刚加载自带的图片，我选择遍历所有的图片标签，首先检查img标签的name属性是否有值，若没有值，新增textarea标签，并设置img标签和textarea标签的name属性为同一个UUID，若name属性有值，检查它的后一个兄弟节点是否跟随一个同name的dom，如果有且是i标签（提交数据时，要将所有的输入框变成i标签，此刻要从i标签变回输入框），将它转化成输入框，如果没有，添加默认输入框。

2.2：图片输入框支持粘贴，textarea自带粘贴

2.3：图片和图片输入框可以通过某个按钮同时被删除，设置img标签和textarea标签的name属性为同一个UUID，用name的原因是document.getElementsByName给的是该name的一组标签，删除时，只需要根据name删除即可

3.从微信或者头条粘贴过来的文章格式有误，文字偏大或者偏小？

我的解决方案：

由于拿不到原文章的js，所以只能在粘贴时去除标签内的所有内联样式。当然这个地方有个特殊情况要处理，比如用户在编辑时，设置了对齐方式，系统会自动给标签加上内联样式，这个样式我们不应该去掉。我的处理方案时自定义一个属性名zjs-style，在用户设置对齐方式时，将标签的style值赋值给zjs-style，我们在合适的时机，根据zjs-style复原其style

4.输入框在提交后变成不可输入的展示区域？

我的解决方案：

在提交时，遍历所有的textarea，若textarea没有值，去掉该textarea，若有值的话，将该textarea替换成i标签，且name值赋值给新的i。

5.从web端来的数据支持展示和再编辑？

我的解决方案：

在editor.html的div中加入默认占位文字<!-- defaultContent -->，在html资源加载前，将占位文字替换为后台给的html内容，并在网页加载完后，做相关处理

调试工具 ：

二、uniapp开发微信小程序富文本编辑器（样式仿腾讯文档）

照着腾讯文档小程序开发了微信小程序富文本编辑器组件，这几天做个整理，如有这个需求可以前往腾讯文档小程序操作看看实际效果。毕竟参照的是微信自家小程序，无法做到百分百效果，只能按现有开放api尽可能实现。

项目地址：

https://github.com/chellel/wechat-editor-project

uniapp插件市场：

https://ext.dcloud.net.cn/plugin?id=6365

editor富文本编辑器组件官方文档：

https://developers.weixin.qq.com/miniprogram/dev/component/editor.html

否则会受到小程序css影响。小程序本身editor标签有css样式：

editor {

display: block;

position: relative;

box-sizing: border-box;

-webkit-user-select: text;

user-select: text;

outline: 0;

overflow: hidden;

width: 100%;

height: 200px;

min-height: 200px;

}

that.updatePosition(keyboardHeight)

that.editorCtx.scrollIntoView()

在插入目标文字时，将值设为n'，可以实现换行

this.editorCtx.insertText({ text: 'n' });

参考：请问editor组件控制拉起键盘操作支持吗？

https://developers.weixin.qq.com/community/develop/doc/0006eeb6ae8cf0e7f3293e13f56400?highLine=editor%25E6%2598%25BE%25E7%25A4%25BA%25E9%2594%25AE%25E7%259B%2598

小程序技术专员-sanford 2019-09-20

不支持的。iOS无法通过接口拉起键盘，必须用户点击；安卓则可以。所以，终究是不一致，不行。。

该组件主要为微信editor组件的api调用集成封装，因此受到的限制同文档描述一致，即编辑器内支持部分 HTML 标签和内联样式，不支持class和id，支持的标签详见： https://developers.weixin.qq.com/miniprogram/dev/component/editor.html 。

不满足的标签会被忽略，<div>会被转行为<p>储存。

这也是为什么在做富文本解析时，仅仅用rich-text组件无法有效还原html内容，在解析内容的时候就需要将内容中的HTML标签转换成微信小程序所支持的标签。因此最好方式是引入市场封装好的富文本解析插件去解析html。

所以，开发者需要自行权衡在做富文本编辑开发时，是否使用微信自带的editor组件，或者参考腾讯文档小程序采用webview内嵌网页等方式去渲染。

小程序富文本编辑器editor初体验：( https://www.jianshu.com/p/a932639ba7a6 )

如果是微信原生开发，将demo组件中的相关dom元素标签和api换成微信原生即可。

三、富文本编辑器如何实现部分内容不可编辑,部分内容可编辑

1、首先打开富文本编辑器并登录自己的账号。

2、其次点击编辑设置。

3、最后店部分内容不可编辑，部分内容可编辑即可。

四、富文本编辑器-1-选型

团队的业务多为后台管理系统，部分业务需要使用富文本编辑器。早期团队选用了百度编辑器，但存在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。

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

以上就是关于富文本编辑器在线相关问题的回答。希望能帮到你，如有更多相关问题，您也可以联系我们的客服进行咨询，客服也会为您讲解更多精彩的知识和内容。

推荐阅读：

富文本编辑器在线（富文本编辑器官网）

烟草排行榜（中国烟草排行前十）

建筑设计开题报告怎么写（建筑设计开题报告怎么写好）