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()
在插入目标文字时，将值设为
'，可以实现换行
this.editorCtx.insertText({ text: '
' });
参考：请问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换成微信原生即可。
绛旓細uniapp鎻掍欢甯傚満锛 https://ext.dcloud.net.cn/plugin?id=6365 editor瀵屾枃鏈紪杈戝櫒缁勪欢瀹樻柟鏂囨。锛 https://developers.weixin.qq.com/miniprogram/dev/component/editor.html 鍚﹀垯浼氬彈鍒灏忕▼搴css褰卞搷銆傚皬绋嬪簭鏈韩editor鏍囩鏈塩ss鏍峰紡锛 editor { display: block; position: relative; ...
绛旓細.replace(//ig, '').replace(/<img([\s\w"-=\/\.:;]+)((?:(height="[^"]+")))/ig, '<img$1').replace(/<img([\s\w"-=\/\.:;]+)((?:(width="[^"]+")))/ig, '<img$1').replace(/<img([\s\w"-=\/\.:;]+)((?:(style="[^"]+")))/ig, '<img$...
绛旓細鍦ㄤ竴鑸儏鍐典笅锛屼娇鐢UniApp寮鍙戝井淇″皬绋嬪簭骞舵病鏈夋槑鏄剧殑娉曞緥鎴栨妧鏈笂鐨勯闄┿俇niApp鏄竴涓熀浜嶸ue.js鐨勮法骞冲彴搴旂敤妗嗘灦锛屽彲浠ョ敤浜庡悓鏃跺紑鍙戝涓钩鍙扮殑搴旂敤锛屽寘鎷井淇″皬绋嬪簭銆傛綔鍦ㄧ殑鎶鏈闄╋細1.鎬ц兘锛氳法骞冲彴寮鍙戞鏋跺彲鑳藉紩鍏ヤ竴浜涙ц兘寮閿锛屽鑷村簲鐢ㄥ湪鏌愪簺鎯呭喌涓嬪彲鑳戒笉濡傚師鐢熷紑鍙戠殑鏁堟灉濂姐傜劧鑰岋紝UniApp涓鐩村湪涓嶆柇...
绛旓細姝ラ 1銆乿eu.config.js 涓帹鑽愬畨瑁卌opy-webpack-plugin 5.0.0 鐗堟湰銆uniapp 妗嗘灦鏂囨。鏈夎鏄 vue-config 鎵撳紑缁堢杩愯 npm 瀹夎鐗堟湰 npm install [email protected] 闇瑕5.0鐗堟湰锛岄珮鐗堟湰Uniapp涓嶆敮鎸 2銆佸垱寤轰綘鑷繁浜戝嚱鏁扮洰褰曟枃浠躲傛垜璁剧疆鐨勶細wxcloud/cloudfunctions 3銆佷慨鏀筸anifest.json...
绛旓細瑕佸垽鏂竴涓灏忕▼搴鏄師鐢熷紑鍙戣繕鏄娇鐢ㄤ簡UniApp妗嗘灦杩涜寮鍙戯紝鍙互鑰冭檻浠ヤ笅鍑犱釜鏂归潰锛1.浠ｇ爜缁撴瀯鍜屾枃浠剁洰褰曪細鍘熺敓寮鍙戠殑灏忕▼搴忎唬鐮侀氬父鍏锋湁鐙珛鐨勬枃浠剁洰褰曠粨鏋勶紝鍖呭惈鐗瑰畾鐨勬枃浠跺拰鏂囦欢澶癸紝濡俛pp.js銆乤pp.json銆乸ages鏂囦欢澶圭瓑銆傝屼娇鐢UniApp寮鍙鐨勫皬绋嬪簭鍒欏彲鑳藉叿鏈夌粺涓鐨勬枃浠剁洰褰曠粨鏋勶紝鍖呭惈涓浜涗笌UniApp鐩稿叧鐨勬枃浠...
绛旓細uniapp鍜寰俊灏忕▼搴鐨勫尯鍒槸寮鍙璇█鐨勪笉鍚屻佸紑鍙戞祦绋嬬殑涓嶅悓銆侀儴缃茶祫婧愮殑涓嶅悓銆1.寮鍙戣瑷涓嶅悓锛歶ni-app鏄湪vue鍩虹涓婂紑鍙戯紝璇█閲囩敤js锛宧5锛宑ss锛岃屽師鐢熷井淇″皬绋嬪簭鏄湪js鍩虹涓婂紑鍙戠殑銆2.寮鍙戞祦绋嬩笉鍚岋細uni-app鍙互浣跨敤vscode锛寃ebstrom绛夌幇浠ｅ墠绔紑鍙戝伐鍏疯繘琛屽紑鍙戯紝鏀寔澶氬钩鍙帮紱鑰屽井淇″皬绋嬪簭鍙兘浣跨敤...
绛旓細1銆佽法骞冲彴鎬т笉鍚岋細uniapp鏄竴涓法骞冲彴鐨寮鍙妗嗘灦锛屽彲浠ュ悓鏃剁敓鎴愰傜敤浜庡涓钩鍙扮殑搴旂敤锛屽iOS銆丄ndroid銆乄eb绛夈傝寰俊灏忕▼搴鍙兘鍦ㄥ井淇＄敓鎬佸唴杩愯銆2銆佸姛鑳介檺鍒朵笉鍚岋細寰俊灏忕▼搴忓湪鍔熻兘涓婃湁涓浜涢檺鍒讹紝渚嬪涓嶈兘浣跨敤涓浜涘簳灞傜殑绯荤粺鍔熻兘锛屽钃濈墮銆佹憚鍍忓ご绛夈傝寀niapp鍒欐病鏈夎摑鐗欍佹憚鍍忓ご绛夐檺鍒躲
绛旓細1銆侀鍏堝垱寤轰竴涓熀浜uniapp鐨勫皬绋嬪簭椤圭洰銆2銆佸叾娆″皢uniapp涓殑浠ｇ爜鍜岃祫婧愭枃浠舵嫹璐濆埌寰俊灏忕▼搴鐨勯」鐩枃浠朵腑銆3銆佹渶鍚庡湪寰俊寮鍙鑰呭伐鍏蜂腑瀵煎叆椤圭洰锛屽苟杩涜娴嬭瘯锛岀‘淇濆皬绋嬪簭鍦ㄥ井淇″钩鍙颁笂姝ｅ父杩愯銆
绛旓細鍒ゆ柇灏忕▼搴鏄師鐢熷紑鍙戣繕鏄娇鐢ㄤ簡UniApp寮鍙鍙互鏍规嵁浠ヤ笅鍑犱釜鏂归潰鏉ヨ繘琛屽垽鏂細1.浠ｇ爜缁撴瀯鍜屾枃浠剁被鍨嬶細鍘熺敓寮鍙戠殑灏忕▼搴忛氬父浣跨敤鍚勪釜骞冲彴鎻愪緵鐨勫紑鍙戝伐鍏峰拰妗嗘灦杩涜寮鍙戯紝浠ｇ爜缁撴瀯鍜屾枃浠剁被鍨嬩笌鍏蜂綋骞冲彴鐩稿叧銆傝屼娇鐢║niApp寮鍙戠殑灏忕▼搴忥紝浠ｇ爜缁撴瀯鍜屾枃浠剁被鍨嬬浉瀵圭粺涓锛屽寘鍚簡涓濂楄法骞冲彴鐨勪唬鐮併2.寮鍙戝伐鍏凤細鍘熺敓寮鍙...
绛旓細uniapp鎵撳寘寰俊灏忕▼搴鍜屾姈闊冲皬绋嬪簭鐨勫尯鍒湁寮鍙戣瑷锛岀晫闈㈠竷灞銆1銆佸紑鍙戣瑷锛氬井淇″皬绋嬪簭浣跨敤鐨勬槸鍩轰簬WXML鍜學XSS鐨勫皬绋嬪簭寮鍙璇█锛屾姈闊冲皬绋嬪簭浣跨敤鐨勬槸TikTok鐨刄I缁勪欢鍜孞SX璇硶銆2銆佺晫闈㈠竷灞锛氬井淇″皬绋嬪簭鐨勭晫闈㈠竷灞浣跨敤鐨勬槸绫讳技HTML鍜孋SS鐨刉XML鍜學XSS锛屾姈闊冲皬绋嬪簭鐨勭晫闈㈠竷灞浣跨敤鐨勬槸鍩轰簬Flexbox鐨凾ikTokUI...
