手機(jī)端富文本編輯器？github地址： https://github.com/yuruiyin/RichEditor 該組件是基于原生EditText+span的方式實(shí)現(xiàn)的，旨在提供一個(gè)功能齊全且使用方便的Android富文本編輯器。主要支持了加粗斜體等行內(nèi)樣式、那么，手機(jī)端富文本編輯器？一起來了解一下吧。
在項(xiàng)目需要用到富文本編輯器時(shí)，自己也篩選過不少插件，最終選擇了froala-editor，UI簡單功能強(qiáng)大，也列出了很多國外大佬在使用，自己實(shí)戰(zhàn)后確實(shí)感覺比其他的富文本編輯器好。
： https://froala.com/
main.js 或者寫在其他js文件再從main.js引入
1.新建froalaEditor.vue文件
2.自定義上傳圖片
3.小坑
該編輯器屬于付費(fèi)使用，不付費(fèi)默認(rèn)會帶上他的標(biāo)語，所以保存內(nèi)容的時(shí)候要過濾
4.文檔
https://froala.com/wysiwyg-editor/docs/framework-plugins/vue/#model
用了這個(gè)富文本編輯器后，感覺我很嫌棄以前用過的編輯器，哈哈，還有，我添加了自定義上傳圖片的案例，小伙伴們可以按照自己的實(shí)際情況來修改，上傳的話也是如此。拜拜
——By kkc_hq
基于原生EditText+span實(shí)現(xiàn)的Android富文本編輯器
github地址： https://github.com/yuruiyin/RichEditor
該組件是基于原生EditText+span的方式實(shí)現(xiàn)的，旨在提供一個(gè)功能齊全且使用方便的Android富文本編輯器。主要支持了加粗斜體等行內(nèi)樣式、標(biāo)題引用等段內(nèi)樣式以及插入圖片甚至自定義View等。
Step 1. Add the JitPack repository in your root build.gradle at the end of repositories:
Step 2. Add the dependency in your app build.gradle:
說明：各個(gè)樣式按鈕的layout由調(diào)用方自行完成
說明：其中ivBold為加粗ImageView，由調(diào)用方在layout中定義；R.mipmap.icon_bold_normal和R.mipmap.icon_bold_light是加粗按鈕正常狀態(tài)和點(diǎn)亮狀態(tài)圖片的資源id。
說明：插入自定義布局最終也是通過bitmap以ImageSpan的形式插入到編輯器中的。
在剛開發(fā)的項(xiàng)目之中，在移動(dòng)端/PC端，需要一個(gè)富文本編輯器，要求：簡單-輕量-實(shí)用。比較了幾種編輯器后，選擇了wangEditor。
移動(dòng)端的截圖（手機(jī)效果好些）：
PC端的截圖：
在wangEditor的（ http://www.wangeditor.com/ ）中，提供了一些常用的，可以按需來配置，還可以自己二次封裝：
先說配置：在PC端直接引入 wangEditor.js來創(chuàng)建，在移動(dòng)端用的vue.js模塊開發(fā)，所以用的： npm install wangeditor 來安裝。
移動(dòng)端：
1 .import wangeditor from 'wangeditor' 來引入
2 .this.editor = new wangeditor ('#div1')
4 .配置需要的選項(xiàng)，具體的到查看
5.常用的配置：
6 .this.editor.create(); //創(chuàng)建編輯器，到這里創(chuàng)建就完成了。
7 . 但是你去發(fā)現(xiàn)在移動(dòng)端，會不怎么適配，這時(shí)候就需要用rem來做適配。
如果：想要自己改變樣式，那么直接在 node_moudles/wangwditor 下找到 wangEditor.js ，來自行修改。
微信小程序富文本編輯器內(nèi)容提交到后臺方法如下：
1、在前端頁面中，獲取富文本編輯器中的內(nèi)容?？梢允褂眯〕绦蛱峁┑膚x.createSelectorQuery()方法結(jié)合Node節(jié)點(diǎn)操作獲取富文本編輯器的內(nèi)容。
2、將獲取到的富文本編輯器的內(nèi)容轉(zhuǎn)換為符合后臺接口要求的格式。例如，可以將內(nèi)容轉(zhuǎn)換為JSON格式或者HTML格式，以便后臺可以方便地解析和處理。
3、發(fā)送請求到后臺接口，并將轉(zhuǎn)換后的內(nèi)容作為請求參數(shù)進(jìn)行提交。
4、在后臺接口中，解析和處理富文本編輯器的內(nèi)容，例如可以將內(nèi)容存儲到數(shù)據(jù)庫中或者進(jìn)行其他的業(yè)務(wù)處理。
照著騰訊文檔小程序開發(fā)了微信小程序富文本編輯器組件，這幾天做個(gè)整理，如有這個(gè)需求可以前往騰訊文檔小程序操作看看實(shí)際效果。畢竟參照的是微信自家小程序，無法做到百分百效果，只能按現(xiàn)有開放api盡可能實(shí)現(xiàn)。
項(xiàng)目地址：
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標(biāo)簽有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()
在插入目標(biāo)文字時(shí)，將值設(shè)為\n'，可以實(shí)現(xià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
小程序技術(shù)專員-sanford 2019-09-20
不支持的。
以上就是手機(jī)端富文本編輯器的全部內(nèi)容，富文本編輯器，Multi-function Text Editor, 簡稱 MTE, 它提供類似于 Microsoft Word 的編輯功能，容易被不會編寫 HTML 的用戶并需要設(shè)置各種文本格式的用戶所喜愛。它的應(yīng)用也越來越廣泛。最先只有 IE 瀏覽器支持。
