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

第一招、灵活搭配，组合接入广告组件

　目前，针对小程序场景，微信广告已上线Banner广告、插屏广告、激励式广告等6种广告组件。多种选择之下，流量主可以针对不同场景使用不同广告组件，提升流量利用效率。

例如“热门微博”接入了所有广告组件，基于场景特点，该小程序在浏览频次较裤颂高的热门流页面与视频流页面，接入插屏广戚纯睁告组件与样式原生的视频广告组件，同时，在视频播放前展示视频前贴广告。多广告组件的配合使用，大大提升广告曝光。

第二招、挖掘广告接入场景

一个小程序如果广告组件接入场景单一，考高岁虑到平衡用户体验，在该场景下能承载的广告就相对有限。因此，挖掘更多的接入场景，能够为流量主带来广告收入的增长。

以“激励场景”为例，对工具类小程序来说，可以在现有小程序功能中，提供更多查询次数、获得更多模板、领取更多会员积分等权限，让用户通过观看广告“解锁”权限。而对内容类小程序来说，当内容运营较为成熟时，可以专门设置一些精品内容作为“激励点”，用户可通过观看广告来兑换浏览权限。

例如某视频内容类小程序开发者，结合对用户使用习惯的洞察，在“播放完成返回首页”的场景增加嵌入插屏广告组件，有效利用了用户浏览过程中的停顿时间。全方位接入插屏广告组件后，小程序的ARPU值提升约40%。

第三招、数据分析，接入调优

每个小程序都有独特的内容和功能，适宜的广告接入方案也不尽相同，需要通过长期测试和数据分析，不断进行调优，最后找出最优方案。

例如，生活类视频内容的小程序，在接入激励式广告组件时，首轮测试方案是以“解锁慢放功能”作为“激励点”，让用户在观看广告后可以进行慢放学习。开发者对不同位置的广告组件均使用了不同的广告单元并逐一进行命名，方便快速分析细分数据。分析发现激励式广告组件的曝光率不到1%，这说明大多数用户对慢放功能的使用需求不强。

基于数据表现，流量主调整方案以“解锁全屏观看”作为“激励点”，有效提升了该位置广告的曝光率，收入增长3倍。

另外，借助微信广告的数据看板，流量主也可以查看广告关键数据的大盘涨跌趋势，并更准确地了解用户画像，从而找到优化空间和方向。

选择小程序开发，创建一个新的小程序项目。</p>

</li>

<li>

<p>在小程序项目中，选择添加页面，选择网页视图组件，将金山文档的链接嵌入到网页视图组件中。</p>

</li>

<li>

<p>在小程序的配置文件中，添加金山文档的域名和链接地址，确保小程序可以正常访问金山文档。</p>

</li>

<li>

<p>在小程序中添加相关的功能按钮和 *** 作界面，以便用户可以方便地使用金山文档的功能。</p>

</li>

<li>

<p>确保小程序的设裂纯计和功能符合微如橘信小程序的规范和要求，提交审核并发布小程序。</p>

</li>

</ol>

<p>需要注意的是，制作金山文档的微信小程序，需要具备一定的前端开发能力和对微信小程序开发的了解。如果您没有相关的经验和技能，建议寻求专业的小程序开发服肆橡咐务机构的帮助。</p>

---