微信小程序API 富文本

2022-04-29 15:17 更新

EditorContext

基礎(chǔ)庫 2.7.0 開始支持,低版本需做兼容處理。

EditorContext 實(shí)例,可通過 wx.createSelectorQuery 獲取。

EditorContext 通過 id 跟一個 editor 組件綁定,操作對應(yīng)的 editor 組件。

方法:

EditorContext.blur(Object object)

基礎(chǔ)庫 2.8.3 開始支持,低版本需做兼容處理。

編輯器失焦,同時(shí)收起鍵盤。

參數(shù)

Object object

屬性類型默認(rèn)值必填說明
successfunction接口調(diào)用成功的回調(diào)函數(shù)
failfunction接口調(diào)用失敗的回調(diào)函數(shù)
completefunction接口調(diào)用結(jié)束的回調(diào)函數(shù)(調(diào)用成功、失敗都會執(zhí)行)


EditorContext.clear(Object object)

基礎(chǔ)庫 2.7.0 開始支持,低版本需做兼容處理。

清空編輯器內(nèi)容

參數(shù)

Object object

屬性類型默認(rèn)值必填說明
successfunction接口調(diào)用成功的回調(diào)函數(shù)
failfunction接口調(diào)用失敗的回調(diào)函數(shù)
completefunction接口調(diào)用結(jié)束的回調(diào)函數(shù)(調(diào)用成功、失敗都會執(zhí)行)


EditorContext.format(string name, string value)

基礎(chǔ)庫 2.7.0 開始支持,低版本需做兼容處理。

修改樣式

參數(shù)

string name

屬性

string value

支持設(shè)置的樣式列表

namevalueverson
bold2.7.0
italic2.7.0
underline2.7.0
strike2.7.0
ins2.7.0
scriptsub / super2.7.0
headerH1 / H2 / h3 / H4 / h5 / H62.7.0
alignleft / center / right / justify2.7.0
directionrtl2.7.0
indent-1 / +12.7.0
listordered / bullet / check2.7.0
colorhex color2.7.0
backgroundColorhex color2.7.0
margin/marginTop/marginBottom/marginLeft/marginRightcss style2.7.0
padding/paddingTop/paddingBottom/paddingLeft/paddingRightcss style2.7.0
font/fontSize/fontStyle/fontVariant/fontWeight/fontFamilycss style2.7.0
lineHeightcss style2.7.0
letterSpacingcss style2.7.0
textDecorationcss style2.7.0
textIndentcss style2.8.0
wordWrapcss style2.10.2
wordBreakcss style2.10.2
whiteSpacecss style2.10.2

對已經(jīng)應(yīng)用樣式的選區(qū)設(shè)置會取消樣式。css style 表示 css 中規(guī)定的允許值。


EditorContext.getContents(Object object)

基礎(chǔ)庫 2.7.0 開始支持,低版本需做兼容處理。

獲取編輯器內(nèi)容

參數(shù)

Object object

屬性類型默認(rèn)值必填說明
successfunction接口調(diào)用成功的回調(diào)函數(shù)
failfunction接口調(diào)用失敗的回調(diào)函數(shù)
completefunction接口調(diào)用結(jié)束的回調(diào)函數(shù)(調(diào)用成功、失敗都會執(zhí)行)

object.success 回調(diào)函數(shù)

參數(shù)
Object res
屬性類型說明
htmlstring帶標(biāo)簽的HTML內(nèi)容
textstring純文本內(nèi)容
deltaObject表示內(nèi)容的delta對象


EditorContext.getSelectionText(Object object)

基礎(chǔ)庫 2.10.2 開始支持,低版本需做兼容處理。

獲取編輯器已選區(qū)域內(nèi)的純文本內(nèi)容。當(dāng)編輯器失焦或未選中一段區(qū)間時(shí),返回內(nèi)容為空。

參數(shù)

Object object

屬性類型默認(rèn)值必填說明
successfunction接口調(diào)用成功的回調(diào)函數(shù)
failfunction接口調(diào)用失敗的回調(diào)函數(shù)
completefunction接口調(diào)用結(jié)束的回調(diào)函數(shù)(調(diào)用成功、失敗都會執(zhí)行)

object.success 回調(diào)函數(shù)

參數(shù)
Object res
屬性類型說明
textstring純文本內(nèi)容


EditorContext.insertDivider(Object object)

基礎(chǔ)庫 2.7.0 開始支持,低版本需做兼容處理。

插入分割線

參數(shù)

Object object

屬性類型默認(rèn)值必填說明
successfunction接口調(diào)用成功的回調(diào)函數(shù)
failfunction接口調(diào)用失敗的回調(diào)函數(shù)
completefunction接口調(diào)用結(jié)束的回調(diào)函數(shù)(調(diào)用成功、失敗都會執(zhí)行)


EditorContext.insertImage(Object object)

基礎(chǔ)庫 2.7.0 開始支持,低版本需做兼容處理。

插入圖片。

地址為臨時(shí)文件時(shí),獲取的編輯器html格式內(nèi)容中 <img> 標(biāo)簽增加屬性 data-local,delta 格式內(nèi)容中圖片 attributes 屬性增加 data-local 字段,該值為傳入的臨時(shí)文件地址。

開發(fā)者可選擇在提交階段上傳圖片到服務(wù)器,獲取到網(wǎng)絡(luò)地址后進(jìn)行替換。替換時(shí)對于html內(nèi)容應(yīng)替換掉 <img> 的 src 值,對于 delta 內(nèi)容應(yīng)替換掉 insert { image: abc } 值。

參數(shù)

Object object

屬性類型默認(rèn)值必填說明
srcstring圖片地址,僅支持 http(s)、base64、云圖片(2.8.0)、臨時(shí)文件(2.8.3)。
altstring圖像無法顯示時(shí)的替代文本
widthstring圖片寬度(pixels/百分比)
heightstring圖片高度 (pixels/百分比)
extClassstring添加到圖片 img 標(biāo)簽上的類名
dataObjectdata 被序列化為 name=value;name1=value2 的格式掛在屬性 data-custom 上
successfunction接口調(diào)用成功的回調(diào)函數(shù)
failfunction接口調(diào)用失敗的回調(diào)函數(shù)
completefunction接口調(diào)用結(jié)束的回調(diào)函數(shù)(調(diào)用成功、失敗都會執(zhí)行)

示例代碼

this.editorCtx.insertImage({
  src: 'xx',
  width: '100px',
  height: '50px',
  extClass: className
})


EditorContext.insertText(Object object)

基礎(chǔ)庫 2.7.0 開始支持,低版本需做兼容處理。

覆蓋當(dāng)前選區(qū),設(shè)置一段文本

參數(shù)

Object object

屬性類型默認(rèn)值必填說明
textstring文本內(nèi)容
successfunction接口調(diào)用成功的回調(diào)函數(shù)
failfunction接口調(diào)用失敗的回調(diào)函數(shù)
completefunction接口調(diào)用結(jié)束的回調(diào)函數(shù)(調(diào)用成功、失敗都會執(zhí)行)


EditorContext.redo(Object object)

基礎(chǔ)庫 2.7.0 開始支持,低版本需做兼容處理。

恢復(fù)

參數(shù)

Object object

屬性類型默認(rèn)值必填說明
successfunction接口調(diào)用成功的回調(diào)函數(shù)
failfunction接口調(diào)用失敗的回調(diào)函數(shù)
completefunction接口調(diào)用結(jié)束的回調(diào)函數(shù)(調(diào)用成功、失敗都會執(zhí)行)


EditorContext.removeFormat(Object object)

基礎(chǔ)庫 2.7.0 開始支持,低版本需做兼容處理。

清除當(dāng)前選區(qū)的樣式

參數(shù)

Object object

屬性類型默認(rèn)值必填說明
successfunction接口調(diào)用成功的回調(diào)函數(shù)
failfunction接口調(diào)用失敗的回調(diào)函數(shù)
completefunction接口調(diào)用結(jié)束的回調(diào)函數(shù)(調(diào)用成功、失敗都會執(zhí)行)


EditorContext.scrollIntoView()

基礎(chǔ)庫 2.8.3 開始支持,低版本需做兼容處理。

使得編輯器光標(biāo)處滾動到窗口可視區(qū)域內(nèi)。


EditorContext.setContents(Object object)

基礎(chǔ)庫 2.7.0 開始支持,低版本需做兼容處理。

初始化編輯器內(nèi)容,html和delta同時(shí)存在時(shí)僅delta生效

參數(shù)

Object object

屬性類型默認(rèn)值必填說明
htmlstring帶標(biāo)簽的HTML內(nèi)容
deltaObject表示內(nèi)容的delta對象
successfunction接口調(diào)用成功的回調(diào)函數(shù)
failfunction接口調(diào)用失敗的回調(diào)函數(shù)
completefunction接口調(diào)用結(jié)束的回調(diào)函數(shù)(調(diào)用成功、失敗都會執(zhí)行)


EditorContext.undo(Object object)

基礎(chǔ)庫 2.7.0 開始支持,低版本需做兼容處理。

撤銷

參數(shù)

Object object

屬性類型默認(rèn)值必填說明
successfunction接口調(diào)用成功的回調(diào)函數(shù)
failfunction接口調(diào)用失敗的回調(diào)函數(shù)
completefunction接口調(diào)用結(jié)束的回調(diào)函數(shù)(調(diào)用成功、失敗都會執(zhí)行)


以上內(nèi)容是否對您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號