正文

富文本編輯器在線（富文本編輯器官網(wǎng)）

發(fā)布時間：2023-03-29 05:36:14 稿源：創(chuàng)意嶺閱讀： 120 當前文章關鍵詞排名出租

大家好！今天讓創(chuàng)意嶺的小編來大家介紹下關于富文本編輯器在線的問題，以下是小編對此問題的歸納整理，讓我們一起來看看吧。

開始之前先推薦一個非常厲害的Ai人工智能工具：開始之前先推薦一個非常厲害的Ai人工智能工具，一鍵生成原創(chuàng)文章、方案、文案、工作計劃、工作報告、論文、代碼、作文、做題和對話答疑等等

只需要輸入關鍵詞，就能返回你想要的內(nèi)容，越精準，寫出的就越詳細，有微信小程序端、在線網(wǎng)頁版、PC客戶端

官網(wǎng)：https://ai.de1919.com

本文目錄:

1、ios富文本編輯器
2、uniapp開發(fā)微信小程序富文本編輯器（樣式仿騰訊文檔）
3、富文本編輯器如何實現(xiàn)部分內(nèi)容不可編輯,部分內(nèi)容可編輯
4、富文本編輯器-1-選型

富文本編輯器在線（富文本編輯器官網(wǎng)）

一、ios富文本編輯器

方案：html+wkwebview，支持加粗、下劃線、斜體、對齊方式、字體更改顏色、插入圖片、插入視頻、插入鏈接、清除格式、撤回上一個操作

核心：利用html5新特性contenteditable，當div的contenteditable為true時，div進入編輯狀態(tài)，可以通過執(zhí)行html5的命令對文本進行操作。命令文檔地址：https://developer.mozilla.org/zh-TW/docs/Web/API/Document/execCommand。

具體實現(xiàn) ：

一：文件目錄

1.editor.html,該文件實現(xiàn)了編輯器的節(jié)點骨架，一個contenteditable為true的div。

2.ZJSTextEditor.js，該文件是編輯器的核心內(nèi)容，主要實現(xiàn)編輯器的各種操作，以插入視頻為例,外部的wkwebview只需要執(zhí)行js方法evaluateJavaScript:‘zss_editor.insertVideo(...)’，將url帶入

3.EditorView這個文件主要是放wkwebview，以及wkwebview調(diào)用ZJSTextEditor.js中js方法的部分。如頁面加載完，設置占位文字，或者默認對一些標簽的處理

二：開發(fā)中產(chǎn)品提出的需求和我的設計方案

1.web端要求dom結構為... ... ... ... ...,也就是n個p里包含著你插入的視頻圖片等子節(jié)點？

我的方案：

1.1：在editor.html文件中插入的div中，插入一個默認的空p標簽 ,這樣會保證你在文字中間插入圖片、視頻或者換行時，系統(tǒng)給你新增一個p標簽包裹而不是div標簽

1.2：在插入圖片后加入一個空p，在文字中間插入視頻后加入一個空的p和br再刪除br，插入br是為了在文字中間插入視頻時，讓系統(tǒng)自動給你補全p標簽，否則視頻會被加在該文字的下一行。

2.每個圖片要緊緊跟隨一個圖片輸入框，且圖片輸入框支持粘貼，且圖片和圖片輸入框可以通過某個按鈕同時被刪除？

我的方案：

圖片有三個途徑添加，第一個是粘貼來的新聞中帶有圖片，第二個是自己插入的圖片，第三個是從html剛剛開始加載時自帶圖片（從web端發(fā)布的文章，在ios端編輯）。

2.1：每個圖片要緊緊跟著一個圖片輸入框，我在三個途徑處分別做了圖片的處理，首先是自己插入的圖片，我在插入圖片時，緊接著插入一個textarea標簽和一個p標簽。插入一個p標簽的目的是滿足需求1，其次是粘貼來的新聞和html剛剛加載自帶的圖片，我選擇遍歷所有的圖片標簽，首先檢查img標簽的name屬性是否有值，若沒有值，新增textarea標簽，并設置img標簽和textarea標簽的name屬性為同一個UUID，若name屬性有值，檢查它的后一個兄弟節(jié)點是否跟隨一個同name的dom，如果有且是i標簽（提交數(shù)據(jù)時，要將所有的輸入框變成i標簽，此刻要從i標簽變回輸入框），將它轉化成輸入框，如果沒有，添加默認輸入框。

2.2：圖片輸入框支持粘貼，textarea自帶粘貼

2.3：圖片和圖片輸入框可以通過某個按鈕同時被刪除，設置img標簽和textarea標簽的name屬性為同一個UUID，用name的原因是document.getElementsByName給的是該name的一組標簽，刪除時，只需要根據(jù)name刪除即可

3.從微信或者頭條粘貼過來的文章格式有誤，文字偏大或者偏小？

我的解決方案：

由于拿不到原文章的js，所以只能在粘貼時去除標簽內(nèi)的所有內(nèi)聯(lián)樣式。當然這個地方有個特殊情況要處理，比如用戶在編輯時，設置了對齊方式，系統(tǒng)會自動給標簽加上內(nèi)聯(lián)樣式，這個樣式我們不應該去掉。我的處理方案時自定義一個屬性名zjs-style，在用戶設置對齊方式時，將標簽的style值賦值給zjs-style，我們在合適的時機，根據(jù)zjs-style復原其style

4.輸入框在提交后變成不可輸入的展示區(qū)域？

我的解決方案：

在提交時，遍歷所有的textarea，若textarea沒有值，去掉該textarea，若有值的話，將該textarea替換成i標簽，且name值賦值給新的i。

5.從web端來的數(shù)據(jù)支持展示和再編輯？

我的解決方案：

在editor.html的div中加入默認占位文字，在html資源加載前，將占位文字替換為后臺給的html內(nèi)容，并在網(wǎng)頁加載完后，做相關處理

調(diào)試工具：

二、uniapp開發(fā)微信小程序富文本編輯器（樣式仿騰訊文檔）

照著騰訊文檔小程序開發(fā)了微信小程序富文本編輯器組件，這幾天做個整理，如有這個需求可以前往騰訊文檔小程序操作看看實際效果。畢竟參照的是微信自家小程序，無法做到百分百效果，只能按現(xiàn)有開放api盡可能實現(xiàn)。

項目地址：

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'，可以實現(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

小程序技術專員-sanford 2019-09-20

不支持的。iOS無法通過接口拉起鍵盤，必須用戶點擊；安卓則可以。所以，終究是不一致，不行。。

該組件主要為微信editor組件的api調(diào)用集成封裝，因此受到的限制同文檔描述一致，即編輯器內(nèi)支持部分 HTML 標簽和內(nèi)聯(lián)樣式，不支持class和id，支持的標簽詳見： https://developers.weixin.qq.com/miniprogram/dev/component/editor.html 。

不滿足的標簽會被忽略，<div>會被轉行為儲存。

這也是為什么在做富文本解析時，僅僅用rich-text組件無法有效還原h(huán)tml內(nèi)容，在解析內(nèi)容的時候就需要將內(nèi)容中的HTML標簽轉換成微信小程序所支持的標簽。因此最好方式是引入市場封裝好的富文本解析插件去解析html。

所以，開發(fā)者需要自行權衡在做富文本編輯開發(fā)時，是否使用微信自帶的editor組件，或者參考騰訊文檔小程序采用webview內(nèi)嵌網(wǎng)頁等方式去渲染。

小程序富文本編輯器editor初體驗：( https://www.jianshu.com/p/a932639ba7a6 )

如果是微信原生開發(fā)，將demo組件中的相關dom元素標簽和api換成微信原生即可。

三、富文本編輯器如何實現(xiàn)部分內(nèi)容不可編輯,部分內(nèi)容可編輯

1、首先打開富文本編輯器并登錄自己的賬號。

2、其次點擊編輯設置。

3、最后店部分內(nèi)容不可編輯，部分內(nèi)容可編輯即可。

四、富文本編輯器-1-選型

團隊的業(yè)務多為后臺管理系統(tǒng)，部分業(yè)務需要使用富文本編輯器。早期團隊選用了百度編輯器，但存在bug多、無人維護、擴展性差等問題，且后續(xù)業(yè)需要更靈活的編輯器。為了解決這些問題，決定重選編輯器。

基于以下原因，筆者決定使用Quill來開發(fā)團隊的編輯器組件：