新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷解決方案

創(chuàng)新互聯(lián)百度小程序教程：Editor富文本編輯器

Editor 富文本編輯器
- 介紹
- 使用方法
  - 1. 在項(xiàng)目中引用動(dòng)態(tài)庫(kù)
  - 2. 在使用到富文本編輯器組件的頁(yè)面配置動(dòng)態(tài)庫(kù)
  - 3. 編寫(xiě)*.swan文件
- Editor 組件屬性列表
  - 支持的標(biāo)簽
  - 支持的內(nèi)聯(lián)樣式
- EditorContext 實(shí)例
  - 使用方法
  - EditorContext.blur(Object object)
  - EditorContext.clear(Object object)
  - EditorContext.format(String name, String value)
  - EditorContext.getContents(Object object)
  - EditorContext.getSelectionText(Object object)
  - EditorContext.insertDivider(Object object)
  - EditorContext.insertImage(Object object)
  - EditorContext.insertText(Object object)
  - EditorContext.removeFormat(Object object)
  - EditorContext.setContents(Object object)
  - EditorContext.scrollIntoView()
  - EditorContext.redo(Object object)
  - EditorContext.undo(Object object)
- 示例
  - 圖片示例

Editor 富文本編輯器

介紹

Editor 富文本編輯器動(dòng)態(tài)庫(kù)提供了支持富文本編輯的editor組件和操作editor組件的createEditorContext方法，通過(guò)使用該動(dòng)態(tài)庫(kù)，用戶可以對(duì)圖片、文本進(jìn)行編輯。編輯器導(dǎo)出內(nèi)容支持帶標(biāo)簽的html和純文本的text，編輯器內(nèi)部采用delta格式進(jìn)行存儲(chǔ)。

成都創(chuàng)新互聯(lián)公司專注于崇州網(wǎng)站建設(shè)服務(wù)及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗(yàn)。熱誠(chéng)為您提供崇州營(yíng)銷型網(wǎng)站建設(shè)，崇州網(wǎng)站制作、崇州網(wǎng)頁(yè)設(shè)計(jì)、崇州網(wǎng)站官網(wǎng)定制、小程序開(kāi)發(fā)服務(wù)，打造崇州網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供崇州網(wǎng)站排名全網(wǎng)營(yíng)銷落地服務(wù)。

富文本編輯器組件中設(shè)置了一些基本樣式使得內(nèi)容可以正確展示，在開(kāi)發(fā)過(guò)程中可以進(jìn)行覆蓋，在其他組件或者環(huán)境中使用富文本編輯器導(dǎo)出的html時(shí)，需要額外維護(hù)以下DOM結(jié)構(gòu)：

使用方法

1. 在項(xiàng)目中引用動(dòng)態(tài)庫(kù)

參考使用動(dòng)態(tài)庫(kù)中提供的方法，在app.json中增添一項(xiàng)dynamicLib，與pages同級(jí)。

JSON

 
 
 
  
  
  "dynamicLib": {  
  
   "editorLib": {  
  
   "provider": "swan-editor"  
  
   }  
  
  },

2. 在使用到富文本編輯器組件的頁(yè)面配置動(dòng)態(tài)庫(kù)

在每個(gè)使用到富文本編輯器組件的頁(yè)面，配置*.json文件如：

JSON

 
 
 
  
  
  {  
  
   "usingSwanComponents": {  
  
   "editor": "dynamicLib://editorLib/editor"  
  
   }  
  
  }

3. 編寫(xiě)`*.swan`文件

SWAN

 
 
 
  
  
  
  
  
   read-only="{{readOnly}}"  
  
   placeholder="{{placeholder}}"  
  
  />

這是一種最基本的使用方式，其中readOnly和placeholder的值可以在*.js文件中設(shè)置。

JS


 
 
 
  
  
  Page({  
  
   data: {  
  
   readOnly: false,  
  
   placeholder: '請(qǐng)輸入...'  
  
   }  
  
  }); 
 
 
Editor 組件屬性列表



屬性
類型
默認(rèn)值
必填
說(shuō)明



read-only
Boolean
false
否
設(shè)置編輯器為只讀

placeholder
String

否
編輯器提示信息

show-img-size
Boolean
false
否
點(diǎn)擊圖片時(shí)顯示圖片大小控件

show-img-resize
Boolean
false
否
點(diǎn)擊圖片時(shí)顯示圖片縮放控件

show-img-toolbar
Boolean
false
否
點(diǎn)擊圖片時(shí)顯示圖片工具欄控件

bindready
EventHandle

否
編輯器初始化完成時(shí)觸發(fā)

bindfocus
EventHandle

否
編輯器聚焦時(shí)觸發(fā)，event.detail = { html, text, delta }

bindblur
EventHandle

否
編輯器失去焦點(diǎn)時(shí)觸發(fā)，event.detail = { html, text, delta }

bindinput
EventHandle

否
編輯器內(nèi)容改變時(shí)觸發(fā)，event.detail = { html, text, delta }

bindstatuschange
EventHandle

否
編輯器內(nèi)容或樣式通過(guò)EditorContext中的方法改變時(shí)觸發(fā)，返回選區(qū)已設(shè)置的樣式
編輯器內(nèi)支持部分HTML標(biāo)簽和內(nèi)聯(lián)樣式，但不支持class和id。
支持的標(biāo)簽
不滿足的標(biāo)簽會(huì)被忽略，div標(biāo)簽會(huì)被轉(zhuǎn)換為p標(biāo)簽存儲(chǔ)。



類型
節(jié)點(diǎn)



行內(nèi)元素
       

塊級(jí)元素

 
     
 
 
 
 
支持的內(nèi)聯(lián)樣式
內(nèi)聯(lián)樣式僅支持設(shè)置在行內(nèi)元素或塊級(jí)元素上，不能同時(shí)設(shè)置，如text-align歸類為塊級(jí)樣式，在span標(biāo)簽上設(shè)置是無(wú)效的。



類型
樣式



塊級(jí)樣式
text-align、direction

行內(nèi)樣式
color、background-color
EditorContext 實(shí)例
Editor 富文本編輯器動(dòng)態(tài)庫(kù)提供了createEditorContext的方法來(lái)獲取某個(gè)editor組件的實(shí)例，EditorContext通過(guò)id和一個(gè)editor組件綁定，操作對(duì)應(yīng)的editor組件。
使用方法

JS
 
 
 
  
  
  Page({  
  
   onEditorReady() {  
  
   this.editorCtx = requireDynamicLib('editorLib').createEditorContext('editorId');  
  
   }  
  
  }); 
 
 
EditorContext.blur(Object object)
解釋：編輯器失焦。
參數(shù)：Object object



屬性
類型
默認(rèn)值
必填
說(shuō)明



success
Function

否
接口調(diào)用成功的回調(diào)函數(shù)

fail
Function

否
接口調(diào)用失敗的回調(diào)函數(shù)

complete
Function

否
接口調(diào)用結(jié)束的回調(diào)函數(shù)（調(diào)用成功、失敗都會(huì)執(zhí)行）
EditorContext.clear(Object object)
解釋：清空編輯器內(nèi)容。
參數(shù)：Object object



屬性
類型
默認(rèn)值
必填
說(shuō)明



success
Function

否
接口調(diào)用成功的回調(diào)函數(shù)

fail
Function

否
接口調(diào)用失敗的回調(diào)函數(shù)

complete
Function

否
接口調(diào)用結(jié)束的回調(diào)函數(shù)（調(diào)用成功、失敗都會(huì)執(zhí)行）
EditorContext.format(String name, String value)
解釋：修改格式。
對(duì)已經(jīng)應(yīng)用樣式的選區(qū)設(shè)置會(huì)取消樣式。
參數(shù)
String name：屬性
String value：值
支持設(shè)置的樣式列表



name
value



bold


italic


underline


strike


ins


script
sub / super

header
H1 / H2 / H3 / H4 / H5 / H6

align
center / right / justify

direction
rtl

indent
-1 / +1

list
ordered / bullet / check

color
hex color

backgroudColor
hex color
EditorContext.getContents(Object object)
解釋：獲取編輯器內(nèi)容。
參數(shù)：Object object



屬性
類型
默認(rèn)值
必填
說(shuō)明



success
Function

否
接口調(diào)用成功的回調(diào)函數(shù)

fail
Function

否
接口調(diào)用失敗的回調(diào)函數(shù)

complete
Function

否
接口調(diào)用結(jié)束的回調(diào)函數(shù)（調(diào)用成功、失敗都會(huì)執(zhí)行）
object.success 回調(diào)函數(shù)
參數(shù)：Object res



屬性
類型
說(shuō)明



html
String
帶標(biāo)簽的html內(nèi)容

text
String
純文本內(nèi)容

delta
Object
描述內(nèi)容的delta對(duì)象
EditorContext.getSelectionText(Object object)
解釋：獲取編輯器內(nèi)選區(qū)的純文本內(nèi)容。當(dāng)編輯器失焦或未選中一段區(qū)間時(shí)，返回內(nèi)容為空。
參數(shù)：Object object



屬性
類型
默認(rèn)值
必填
說(shuō)明



success
Function

否
接口調(diào)用成功的回調(diào)函數(shù)

fail
Function

否
接口調(diào)用失敗的回調(diào)函數(shù)

complete
Function

否
接口調(diào)用結(jié)束的回調(diào)函數(shù)（調(diào)用成功、失敗都會(huì)執(zhí)行）
object.success 回調(diào)函數(shù)
參數(shù)：Object res



屬性
類型
說(shuō)明



text
String
純文本內(nèi)容
EditorContext.insertDivider(Object object)
解釋：插入分隔符。
參數(shù)：Object object



屬性
類型
默認(rèn)值
必填
說(shuō)明



success
Function

否
接口調(diào)用成功的回調(diào)函數(shù)

fail
Function

否
接口調(diào)用失敗的回調(diào)函數(shù)

complete
Function

否
接口調(diào)用結(jié)束的回調(diào)函數(shù)（調(diào)用成功、失敗都會(huì)執(zhí)行）
EditorContext.insertImage(Object object)
解釋：插入圖片。
參數(shù)：Object object



屬性
類型
默認(rèn)值
必填
說(shuō)明



src
String

是
圖片地址，目前僅支持 http(s)、base64、本地圖片

alt
String

否
圖片無(wú)法顯示時(shí)的替代文本

extClass
String

否
添加到圖片 img 標(biāo)簽上的類名

data
Object

否
data 會(huì)被序列化為name1=value1&name2=value2的格式掛在屬性 data-custom 上

success
Function

否
接口調(diào)用成功的回調(diào)函數(shù)

fail
Function

否
接口調(diào)用失敗的回調(diào)函數(shù)

complete
Function

否
接口調(diào)用結(jié)束的回調(diào)函數(shù)（調(diào)用成功、失敗都會(huì)執(zhí)行）
EditorContext.insertText(Object object)
解釋：覆蓋當(dāng)前選區(qū)，設(shè)置一段文本。
參數(shù)：Object object



屬性
類型
默認(rèn)值
必填
說(shuō)明



text
String

否
文本內(nèi)容

success
Function

否
接口調(diào)用成功的回調(diào)函數(shù)

fail
Function

否
接口調(diào)用失敗的回調(diào)函數(shù)

complete
Function

否
接口調(diào)用結(jié)束的回調(diào)函數(shù)（調(diào)用成功、失敗都會(huì)執(zhí)行）
EditorContext.removeFormat(Object object)
解釋：清除當(dāng)前選區(qū)的樣式。
參數(shù)：Object object



屬性
類型
默認(rèn)值
必填
說(shuō)明



success
Function

否
接口調(diào)用成功的回調(diào)函數(shù)

fail
Function

否
接口調(diào)用失敗的回調(diào)函數(shù)

complete
Function

否
接口調(diào)用結(jié)束的回調(diào)函數(shù)（調(diào)用成功、失敗都會(huì)執(zhí)行）
EditorContext.setContents(Object object)
解釋：初始化編輯器內(nèi)容，html和delta同時(shí)存在時(shí)僅delta生效。
需要注意的是，通過(guò)setContents設(shè)置編輯器內(nèi)容時(shí)，由于支持的html標(biāo)簽和內(nèi)聯(lián)樣式有限，建議開(kāi)發(fā)者在小程序內(nèi)通過(guò)delta進(jìn)行插入。
參數(shù)：Object object



屬性
類型
默認(rèn)值
必填
說(shuō)明



html
String

否
帶標(biāo)簽的html內(nèi)容

delta
Object

否
描述內(nèi)容的delta對(duì)象

success
Function

否
接口調(diào)用成功的回調(diào)函數(shù)

fail
Function

否
接口調(diào)用失敗的回調(diào)函數(shù)

complete
Function

否
接口調(diào)用結(jié)束的回調(diào)函數(shù)（調(diào)用成功、失敗都會(huì)執(zhí)行）
EditorContext.scrollIntoView()
解釋：將編輯器光標(biāo)處滾動(dòng)到窗口可視區(qū)域內(nèi)。
EditorContext.redo(Object object)
解釋：恢復(fù)。
參數(shù)：Object object



屬性
類型
默認(rèn)值
必填
說(shuō)明



success
Function

否
接口調(diào)用成功的回調(diào)函數(shù)

fail
Function

否
接口調(diào)用失敗的回調(diào)函數(shù)

complete
Function

否
接口調(diào)用結(jié)束的回調(diào)函數(shù)（調(diào)用成功、失敗都會(huì)執(zhí)行）
EditorContext.undo(Object object)
解釋：撤銷。
參數(shù)：Object object



屬性
類型
默認(rèn)值
必填
說(shuō)明



success
Function

否
接口調(diào)用成功的回調(diào)函數(shù)

fail
Function

否
接口調(diào)用失敗的回調(diào)函數(shù)

complete
Function

否
接口調(diào)用結(jié)束的回調(diào)函數(shù)（調(diào)用成功、失敗都會(huì)執(zhí)行）
示例
在開(kāi)發(fā)者工具中打開(kāi)
在開(kāi)發(fā)者工具中打開(kāi)
在 WEB IDE 中打開(kāi)
掃碼體驗(yàn)
代碼示例
請(qǐng)使用百度APP掃碼
圖片示例
SWAN
JS
CSS
 
 
 
  
  
    
  
     
  
     
  
     
  
     
  
     
  
     
  
     
  
     
  
    
  
    
  
    
  
   
  
  
   id="editorId"  
  
   class="editor"  
  
   placeholder="開(kāi)始輸入..."  
  
   bindready="onEditorReady"  
  
   bindstatuschange="onStatusChange"  
  
   show-img-size  
  
   show-img-resize  
  
   show-img-toolbar  
  
   />  
  
   
 
 
 
 
 
  
  
  const INIT_CONTENT_HTML = `  
  
   支持插入圖片  
  
   
  
  
     
  
     
  
     
  
     
  
   支持以下字符樣式  
  
     
  
   bold粗體  
  
   italic斜體  
  
   underline下劃線  
  
     
  
     
  
   _{sub下標(biāo)}  
  
   ^{super上標(biāo)}  
  
     
  
     
  
   支持以下列表樣式  
  
     
  
   
有序列表  
  
   
有序列表  
  
     
  
     
  
   
無(wú)序列表  
  
     
  
     
  
   
無(wú)序列表  
  
     
  
     
  
   
選框列表  
  
     
  
     
  
   
選框列表  
  
     
  
     
  
   支持以下字符大小  
  
   H1 一級(jí)標(biāo)題  
  
   H2 二級(jí)標(biāo)題  
  
   H3 三級(jí)標(biāo)題  
  
   H4 四級(jí)標(biāo)題  
  
   H5 五級(jí)標(biāo)題  
  
   H6 六級(jí)標(biāo)題  
  
     
  
   支持以下對(duì)齊方式  
  
   center中間對(duì)齊  
  
   right 右對(duì)齊  
  
   justify 自動(dòng)對(duì)齊  
  
     
  
   color 支持設(shè)置字體及背景顏色`;  
  
    
  
  Page({  
  
   data: {  
  
   formats: {}  
  
   },  
  
    
  
   // 編輯器初始化完成時(shí)觸發(fā)的事件，用于加載編輯器初始內(nèi)容  
  
   onEditorReady() {  
  
   this.editorCtx = requireDynamicLib('editorLib').createEditorContext('editorId');  
  
   this.initContent();  
  
   },  
  
    
  
   // 設(shè)置編輯器初始內(nèi)容  
  
   initContent() {  
  
   this.editorCtx.setContents({  
  
   html: INIT_CONTENT_HTML  
  
   });  
  
   },  
  
    
  
   // 編輯器內(nèi)插入圖片函數(shù)  
  
   insertImage() {  
  
   const editorCtx = this.editorCtx;  
  
   swan.chooseImage({  
  
   count: 1,  
  
   success: res => {  
  
   editorCtx.insertImage({  
  
   src: res.tempFilePaths[0],  
  
   alt: '插入圖片',  
  
   data: {  
  
   id: 'insert-image',  
  
   role: 'user'  
  
   },  
  
   success: () => {  
  
   swan.showToast({  
  
   title: '插入圖片成功'  
  
   });  
  
   },  
  
   fail: err => {  
  
   swan.showToast({  
  
   title: '插入圖片失敗',  
  
   icon: 'none'  
  
   });  
  
   }  
  
   });  
  
   }  
  
   });  
  
   },  
  
    
  
   /**  
  
   * 更改編輯器選區(qū)為不同格式  
  
   *  
  
   * @param {Object} e.target.dataset 獲取 swan 頁(yè)面的傳參：name、value  
  
   *  
  
   */  
  
   format(e) {  
  
   const {name, value} = e.target.dataset;  
  
   if (!name) {  
  
   return;  
  
   }  
  
   this.editorCtx.format(name, value);  
  
   },  
  
    
  
   /**  
  
   * 編輯器內(nèi)容或樣式通過(guò)方法改變時(shí)觸發(fā)的事件，返回選區(qū)已設(shè)置的樣式  
  
   *  
  
   * @param {Object} e.detail 事件對(duì)象  
  
   *  
  
   */  
  
   onStatusChange(e) {  
  
   const formats = e.detail;  
  
   this.setData({  
  
   formats  
  
   });  
  
   },  
  
    
  
   // 編輯器中插入分隔符  
  
   insertDivider() {  
  
   this.editorCtx.insertDivider();  
  
   },  
  
    
  
   // 清除編輯器中內(nèi)容，與工具欄的垃圾桶圖標(biāo)對(duì)應(yīng)  
  
   clear() {  
  
   const editorCtx = this.editorCtx;  
  
   swan.showModal({  
  
   title: '清空編輯器',  
  
   content: '確定清空編輯器全部?jī)?nèi)容？',  
  
   success: res => {  
  
   if (res.confirm) {  
  
   editorCtx.clear();  
  
   }  
  
   }  
  
   });  
  
   }  
  
  }); 
 
 
 
 
 
  
  
  @font-face {  
  
   font-family: "iconfont"; /* project id 2000141 */  
  
   src: url(http://at.alicdn.com/t/font_2000141_vma36b09h9.wof) format("woff"),  
  
   url(http://at.alicdn.com/t/font_2000141_vma36b09h9.ttf) format("truetype"),  
  
   url(http://at.alicdn.com/t/font_2000141_vma36b09h9.svg#iconfont) format("svg");  
  
  }  
  
    
  
  .iconfont {  
  
   display: inline-block;  
  
   font-size: 22px;  
  
   width: 30px;  
  
   height: 30px;  
  
   font-family: "iconfont" !important;  
  
   font-style: normal;  
  
   -webkit-font-smoothing: antialiased;  
  
   -moz-osx-font-smoothing: grayscale;  
  
  }  
  
    
  
  .icon-image:before {  
  
   content: "\e60e";  
  
  }  
  
    
  
  .icon-format-header-1:before {  
  
   content: "\e610";  
  
  }  
  
    
  
  .icon-format-header-2:before {  
  
   content: "\e60f";  
  
  }  
  
    
  
  .icon-format-bold:before {  
  
   content: "\e60a";  
  
  }  
  
    
  
  .icon-format-list:before {  
  
   content: "\e60b";  
  
  }  
  
    
  
  .icon-divider:before {  
  
   content: "\e609";  
  
  }  
  
    
  
  .icon-clear:before {  
  
   content: "\e60c";  
  
  }  
  
    
  
  .icon-format-italic:before {  
  
   content: "\e60d";  
  
  }  
  
    
  
  .editor-wrap {  
  
   width: 100%;  
  
   height: 100vh;  
  
  }  
  
    
  
  .editor {  
  
   display: block;  
  
   box-sizing: border-box;  
  
   width: 100%;  
  
   height: 100%;  
  
   margin-top: 50px;  
  
   padding: 38.043rpx 30.797rpx;  
  
  }  
  
    
  
  swan-editor {  
  
   display: block;  
  
  }  
  
    
  
  .ql-editor {  
  
   height: 100%;  
  
  }  
  
    
  
  .toolbar {  
  
   position: fixed;  
  
   box-sizing: border-box;  
  
   padding: 17px 17px;  
  
   width: 100%;  
  
   height: 45px;  
  
   top: 30;  
  
   left: 0;  
  
   border-top: .906rpx solid #e6e6e6;  
  
   border-bottom: .906rpx solid #e6e6e6;  
  
   display: flex;  
  
   align-items: center;  
  
   justify-content: space-between;  
  
   background-color: #fff;  
  
   z-index: 99;  
  
  }  
  
    
  
  .ql-active {  
  
   color: #3388ff;  
  
  } 
 
 
                                                

                                                文章名稱：創(chuàng)新互聯(lián)百度小程序教程：Editor富文本編輯器                                                

                                                當(dāng)前鏈接：http://www.5511xx.com/article/cojoiic.html

屬性	類型	默認(rèn)值	必填	說(shuō)明
read-only	Boolean	false	否	設(shè)置編輯器為只讀
placeholder	String		否	編輯器提示信息
show-img-size	Boolean	false	否	點(diǎn)擊圖片時(shí)顯示圖片大小控件
show-img-resize	Boolean	false	否	點(diǎn)擊圖片時(shí)顯示圖片縮放控件
show-img-toolbar	Boolean	false	否	點(diǎn)擊圖片時(shí)顯示圖片工具欄控件
bindready	EventHandle		否	編輯器初始化完成時(shí)觸發(fā)
bindfocus	EventHandle		否	編輯器聚焦時(shí)觸發(fā)，`event.detail = { html, text, delta }`
bindblur	EventHandle		否	編輯器失去焦點(diǎn)時(shí)觸發(fā)，`event.detail = { html, text, delta }`
bindinput	EventHandle		否	編輯器內(nèi)容改變時(shí)觸發(fā)，`event.detail = { html, text, delta }`
bindstatuschange	EventHandle		否	編輯器內(nèi)容或樣式通過(guò)`EditorContext`中的方法改變時(shí)觸發(fā)，返回選區(qū)已設(shè)置的樣式

類型	節(jié)點(diǎn)
行內(nèi)元素
塊級(jí)元素

類型	樣式
塊級(jí)樣式	text-align、direction
行內(nèi)樣式	color、background-color

屬性	類型	必填	說(shuō)明
success	Function	否	接口調(diào)用成功的回調(diào)函數(shù)
fail	Function	否	接口調(diào)用失敗的回調(diào)函數(shù)
complete	Function	否	接口調(diào)用結(jié)束的回調(diào)函數(shù)（調(diào)用成功、失敗都會(huì)執(zhí)行）

屬性	類型	必填	說(shuō)明
success	Function	否	接口調(diào)用成功的回調(diào)函數(shù)
fail	Function	否	接口調(diào)用失敗的回調(diào)函數(shù)
complete	Function	否	接口調(diào)用結(jié)束的回調(diào)函數(shù)（調(diào)用成功、失敗都會(huì)執(zhí)行）

name	value
bold
italic
underline
strike
ins
script	sub / super
header	H1 / H2 / H3 / H4 / H5 / H6
align	center / right / justify
direction	rtl
indent	-1 / +1
list	ordered / bullet / check
color	hex color
backgroudColor	hex color

屬性	類型	必填	說(shuō)明
success	Function	否	接口調(diào)用成功的回調(diào)函數(shù)
fail	Function	否	接口調(diào)用失敗的回調(diào)函數(shù)
complete	Function	否	接口調(diào)用結(jié)束的回調(diào)函數(shù)（調(diào)用成功、失敗都會(huì)執(zhí)行）

屬性	類型	說(shuō)明
html	String	帶標(biāo)簽的`html`內(nèi)容
text	String	純文本內(nèi)容
delta	Object	描述內(nèi)容的`delta`對(duì)象

屬性	類型	必填	說(shuō)明
success	Function	否	接口調(diào)用成功的回調(diào)函數(shù)
fail	Function	否	接口調(diào)用失敗的回調(diào)函數(shù)
complete	Function	否	接口調(diào)用結(jié)束的回調(diào)函數(shù)（調(diào)用成功、失敗都會(huì)執(zhí)行）

屬性	類型	說(shuō)明
text	String	純文本內(nèi)容

屬性	類型	必填	說(shuō)明
success	Function	否	接口調(diào)用成功的回調(diào)函數(shù)
fail	Function	否	接口調(diào)用失敗的回調(diào)函數(shù)
complete	Function	否	接口調(diào)用結(jié)束的回調(diào)函數(shù)（調(diào)用成功、失敗都會(huì)執(zhí)行）

屬性	類型	必填	說(shuō)明
src	String	是	圖片地址，目前僅支持 http(s)、base64、本地圖片
alt	String	否	圖片無(wú)法顯示時(shí)的替代文本
extClass	String	否	添加到圖片 img 標(biāo)簽上的類名
data	Object	否	data 會(huì)被序列化為`name1=value1&name2=value2`的格式掛在屬性 data-custom 上
success	Function	否	接口調(diào)用成功的回調(diào)函數(shù)
fail	Function	否	接口調(diào)用失敗的回調(diào)函數(shù)
complete	Function	否	接口調(diào)用結(jié)束的回調(diào)函數(shù)（調(diào)用成功、失敗都會(huì)執(zhí)行）

屬性	類型	必填	說(shuō)明
text	String	否	文本內(nèi)容
success	Function	否	接口調(diào)用成功的回調(diào)函數(shù)
fail	Function	否	接口調(diào)用失敗的回調(diào)函數(shù)
complete	Function	否	接口調(diào)用結(jié)束的回調(diào)函數(shù)（調(diào)用成功、失敗都會(huì)執(zhí)行）

屬性	類型	必填	說(shuō)明
success	Function	否	接口調(diào)用成功的回調(diào)函數(shù)
fail	Function	否	接口調(diào)用失敗的回調(diào)函數(shù)
complete	Function	否	接口調(diào)用結(jié)束的回調(diào)函數(shù)（調(diào)用成功、失敗都會(huì)執(zhí)行）

屬性	類型	必填	說(shuō)明
html	String	否	帶標(biāo)簽的`html`內(nèi)容
delta	Object	否	描述內(nèi)容的`delta`對(duì)象
success	Function	否	接口調(diào)用成功的回調(diào)函數(shù)
fail	Function	否	接口調(diào)用失敗的回調(diào)函數(shù)
complete	Function	否	接口調(diào)用結(jié)束的回調(diào)函數(shù)（調(diào)用成功、失敗都會(huì)執(zhí)行）

屬性	類型	必填	說(shuō)明
success	Function	否	接口調(diào)用成功的回調(diào)函數(shù)
fail	Function	否	接口調(diào)用失敗的回調(diào)函數(shù)
complete	Function	否	接口調(diào)用結(jié)束的回調(diào)函數(shù)（調(diào)用成功、失敗都會(huì)執(zhí)行）

屬性	類型	必填	說(shuō)明
success	Function	否	接口調(diào)用成功的回調(diào)函數(shù)
fail	Function	否	接口調(diào)用失敗的回調(diào)函數(shù)
complete	Function	否	接口調(diào)用結(jié)束的回調(diào)函數(shù)（調(diào)用成功、失敗都會(huì)執(zhí)行）


                                            
                                                
                                                    其他資訊
                                                
                                                
                                                    
                                                        
                                                                如何在win8系統(tǒng)打開(kāi)DVD光盤(pán)？windows8播放dvd
                                                            

                                                                重新突破Redis性能的新方案（rehashredis）
                                                            

                                                                電視機(jī)怎么設(shè)置分辨率，電視分辨率應(yīng)該怎么設(shè)置的
                                                            

                                                                了解AWT和Swing組件
                                                            

                                                                Oracle數(shù)據(jù)庫(kù)RMAN恢復(fù)之?dāng)?shù)據(jù)文件的恢復(fù)詳解

新聞中心

Editor 富文本編輯器

介紹

使用方法

1. 在項(xiàng)目中引用動(dòng)態(tài)庫(kù)

2. 在使用到富文本編輯器組件的頁(yè)面配置動(dòng)態(tài)庫(kù)

3. 編寫(xiě)*.swan文件

Editor 組件屬性列表

支持的標(biāo)簽

支持的內(nèi)聯(lián)樣式

EditorContext 實(shí)例

使用方法

EditorContext.blur(Object object)

EditorContext.clear(Object object)

EditorContext.format(String name, String value)

EditorContext.getContents(Object object)

EditorContext.getSelectionText(Object object)

EditorContext.insertDivider(Object object)

EditorContext.insertImage(Object object)

EditorContext.insertText(Object object)

EditorContext.removeFormat(Object object)

EditorContext.setContents(Object object)

EditorContext.scrollIntoView()

EditorContext.redo(Object object)

EditorContext.undo(Object object)

示例

圖片示例

H1 一級(jí)標(biāo)題

H2 二級(jí)標(biāo)題

H3 三級(jí)標(biāo)題

H4 四級(jí)標(biāo)題

H5 五級(jí)標(biāo)題

H6 六級(jí)標(biāo)題

其他資訊

3. 編寫(xiě)`*.swan`文件