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换成微信原生即可。

智能小程序为开发者提供对接百度生态的能力，为智能小程序导入百度信息流流量，旨在打造更加开放、互联互通的小程序生态。

信息流接入

当用户在百度 App（10.9.5或以上版本）中查看首页信息流时，百度信息流会根据用户属性和喜好个性化的推荐分发小程序的相关内容，从而使智能小程序的页面出现在信息流列表中。开发者只需要进行简单的配置工作，就可以使自己开发的智能小程序被百度信息流收录、分发。

收录

智能小程序被百度信息流收录的前提是：

获取投放资格。需要开发者发送小程序基础信息（如小程序id，小程序名称等）至邮箱ext_sapp_dt@baidu.com 提交投放申请，从而获取具体接口信息

开发者提交物料并被审核通过，建议开发者需要按照其素材的规范进行提交从而保证分发内容的质量。

分发

当智能小程序的素材被百度正常收录后，百度信息流将会按照素材的内容和相应的标签为其匹配合适的用户进行展示，从而实现个性化分发。

注：百度信息流投放为免费功能，获取到的是自然用户流量；素材展示的样式和用户目前将由百度信息流决定。

百度信息流

智能小程序在百度信息流投放的内容为原生内容，点击该内容将可进入小程序页面，包括大图，三图，左图右文，视频播放等样式。

---