av激情亚洲男人的天堂国语,日韩欧美精品一中文字幕,无码av一区二区三区无码,国产又色又爽又刺激的a片,国产又色又爽又刺激的a片

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

  • Editor 富文本編輯器
    • 介紹
    • 使用方法
      • 1. 在項目中引用動態(tài)庫
      • 2. 在使用到富文本編輯器組件的頁面配置動態(tài)庫
      • 3. 編寫*.swan文件
    • Editor 組件屬性列表
      • 支持的標簽
      • 支持的內聯樣式
    • EditorContext 實例
      • 使用方法
      • 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 富文本編輯器動態(tài)庫提供了支持富文本編輯的editor組件和操作editor組件的createEditorContext方法，通過使用該動態(tài)庫，用戶可以對圖片、文本進行編輯。編輯器導出內容支持帶標簽的html和純文本的text，編輯器內部采用delta格式進行存儲。

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

    富文本編輯器組件中設置了一些基本樣式使得內容可以正確展示，在開發(fā)過程中可以進行覆蓋，在其他組件或者環(huán)境中使用富文本編輯器導出的html時，需要額外維護以下DOM結構：

     
 
 
      
  
  
  
      2.   
  
  
    2.  
      3.   
  
  
      4.

    使用方法

    1. 在項目中引用動態(tài)庫

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

    • JSON
     
 
 
      
  
  
  
    1. "dynamicLib": {
      2.   
  
  
    2.  "editorLib": {
      3.   
  
  
    3.  "provider": "swan-editor"
      4.   
  
  
    4.  }
      5.   
  
  
    5. },
      6.

    2. 在使用到富文本編輯器組件的頁面配置動態(tài)庫

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

    • JSON
     
 
 
      
  
  
  
    1. {
      2.   
  
  
    2.  "usingSwanComponents": {
      3.   
  
  
    3.  "editor": "dynamicLib://editorLib/editor"
      4.   
  
  
    4.  }
      5.   
  
  
    5. }
      6.

    3. 編寫*.swan文件

    • SWAN
     
 
 
      
  
  
  
      2.   
  
  
    2.  read-only="{{readOnly}}"
      3.   
  
  
    3.  placeholder="{{placeholder}}"
      4.   
  
  
    4. />
      5.

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

    • JS
     
 
 
      
  
  
  
    1. Page({
      2.   
  
  
    2.  data: {
      3.   
  
  
    3.  readOnly: false,
      4.   
  
  
    4.  placeholder: '請輸入...'
      5.   
  
  
    5.  }
      6.   
  
  
    6. });
      7.

    Editor 組件屬性列表

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

    編輯器內支持部分HTML標簽和內聯樣式，但不支持class和id。

    支持的標簽

    不滿足的標簽會被忽略，div標簽會被轉換為p標簽存儲。

    類型 節(jié)點
    行內元素
    塊級元素

    支持的內聯樣式

    內聯樣式僅支持設置在行內元素或塊級元素上，不能同時設置，如text-align歸類為塊級樣式，在span標簽上設置是無效的。

    類型 樣式
    塊級樣式 text-align、direction
    行內樣式 color、background-color

    EditorContext 實例

    Editor 富文本編輯器動態(tài)庫提供了createEditorContext的方法來獲取某個editor組件的實例，EditorContext通過id和一個editor組件綁定，操作對應的editor組件。

    使用方法

    • JS
     
 
 
      
  
  
  
    1. Page({
      2.   
  
  
    2.  onEditorReady() {
      3.   
  
  
    3.  this.editorCtx = requireDynamicLib('editorLib').createEditorContext('editorId');
      4.   
  
  
    4.  }
      5.   
  
  
    5. });
      6.

    EditorContext.blur(Object object)

    解釋：編輯器失焦。

    參數：Object object

    屬性 類型 默認值 必填 說明
    success Function 否 接口調用成功的回調函數
    fail Function 否 接口調用失敗的回調函數
    complete Function 否 接口調用結束的回調函數（調用成功、失敗都會執(zhí)行）

    EditorContext.clear(Object object)

    解釋：清空編輯器內容。

    參數：Object object

    屬性 類型 默認值 必填 說明
    success Function 否 接口調用成功的回調函數
    fail Function 否 接口調用失敗的回調函數
    complete Function 否 接口調用結束的回調函數（調用成功、失敗都會執(zhí)行）

    EditorContext.format(String name, String value)

    解釋：修改格式。

    對已經應用樣式的選區(qū)設置會取消樣式。

    參數

    String name：屬性

    String value：值

    支持設置的樣式列表

    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)

    解釋：獲取編輯器內容。

    參數：Object object

    屬性 類型 默認值 必填 說明
    success Function 否 接口調用成功的回調函數
    fail Function 否 接口調用失敗的回調函數
    complete Function 否 接口調用結束的回調函數（調用成功、失敗都會執(zhí)行）

    object.success 回調函數

    參數：Object res

    屬性 類型 說明
    html String 帶標簽的html內容
    text String 純文本內容
    delta Object 描述內容的delta對象

    EditorContext.getSelectionText(Object object)

    解釋：獲取編輯器內選區(qū)的純文本內容。當編輯器失焦或未選中一段區(qū)間時，返回內容為空。

    參數：Object object

    屬性 類型 默認值 必填 說明
    success Function 否 接口調用成功的回調函數
    fail Function 否 接口調用失敗的回調函數
    complete Function 否 接口調用結束的回調函數（調用成功、失敗都會執(zhí)行）

    object.success 回調函數

    參數：Object res

    屬性 類型 說明
    text String 純文本內容

    EditorContext.insertDivider(Object object)

    解釋：插入分隔符。

    參數：Object object

    屬性 類型 默認值 必填 說明
    success Function 否 接口調用成功的回調函數
    fail Function 否 接口調用失敗的回調函數
    complete Function 否 接口調用結束的回調函數（調用成功、失敗都會執(zhí)行）

    EditorContext.insertImage(Object object)

    解釋：插入圖片。

    參數：Object object

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

    EditorContext.insertText(Object object)

    解釋：覆蓋當前選區(qū)，設置一段文本。

    參數：Object object

    屬性 類型 默認值 必填 說明
    text String 否 文本內容
    success Function 否 接口調用成功的回調函數
    fail Function 否 接口調用失敗的回調函數
    complete Function 否 接口調用結束的回調函數（調用成功、失敗都會執(zhí)行）

    EditorContext.removeFormat(Object object)

    解釋：清除當前選區(qū)的樣式。

    參數：Object object

    屬性 類型 默認值 必填 說明
    success Function 否 接口調用成功的回調函數
    fail Function 否 接口調用失敗的回調函數
    complete Function 否 接口調用結束的回調函數（調用成功、失敗都會執(zhí)行）

    EditorContext.setContents(Object object)

    解釋：初始化編輯器內容，html和delta同時存在時僅delta生效。

    需要注意的是，通過setContents設置編輯器內容時，由于支持的html標簽和內聯樣式有限，建議開發(fā)者在小程序內通過delta進行插入。

    參數：Object object

    屬性 類型 默認值 必填 說明
    html String 否 帶標簽的html內容
    delta Object 否 描述內容的delta對象
    success Function 否 接口調用成功的回調函數
    fail Function 否 接口調用失敗的回調函數
    complete Function 否 接口調用結束的回調函數（調用成功、失敗都會執(zhí)行）

    EditorContext.scrollIntoView()

    解釋：將編輯器光標處滾動到窗口可視區(qū)域內。

    EditorContext.redo(Object object)

    解釋：恢復。

    參數：Object object

    屬性 類型 默認值 必填 說明
    success Function 否 接口調用成功的回調函數
    fail Function 否 接口調用失敗的回調函數
    complete Function 否 接口調用結束的回調函數（調用成功、失敗都會執(zhí)行）

    EditorContext.undo(Object object)

    解釋：撤銷。

    參數：Object object

    屬性 類型 默認值 必填 說明
    success Function 否 接口調用成功的回調函數
    fail Function 否 接口調用失敗的回調函數
    complete Function 否 接口調用結束的回調函數（調用成功、失敗都會執(zhí)行）

    示例

    在開發(fā)者工具中打開

    在開發(fā)者工具中打開

    在 WEB IDE 中打開

    掃碼體驗

    代碼示例

    請使用百度APP掃碼

    圖片示例

    • SWAN
    • JS
    • CSS
     
 
 
      
  
  
  
      2.   
  
  
    2.  
      3.   
  
  
    3.  
      4.   
  
  
    4.  
      5.   
  
  
    5.  
      6.   
  
  
    6.  
      7.   
  
  
    7.  
      8.   
  
  
    8.  
      9.   
  
  
    9.  
      10.   
  
  
      11.   
  
  
      12.   
  
  
      13.   
  
  
    13.  
      14.   
  
  
    14.  id="editorId"
      15.   
  
  
    15.  class="editor"
      16.   
  
  
    16.  placeholder="開始輸入..."
      17.   
  
  
    17.  bindready="onEditorReady"
      18.   
  
  
    18.  bindstatuschange="onStatusChange"
      19.   
  
  
    19.  show-img-size
      20.   
  
  
    20.  show-img-resize
      21.   
  
  
    21.  show-img-toolbar
      22.   
  
  
    22.  />
      23.   
  
  
      24.  
 
 
     
 
 
      
  
  
  
    1. const INIT_CONTENT_HTML = `
      2.   
  
  
    2.  
      支持插入圖片
      3.   
  
  
    3.  
      4.   
  
  
    4.  
      5.   
  
  
    5.  image-alt
      6.   
  
  
    6.  
      7.   
  
  
    7.  
      8.   
  
  
    8.  
      支持以下字符樣式
      9.   
  
  
    9.  
      10.   
  
  
    10.  bold粗體
      11.   
  
  
    11.  italic斜體
      12.   
  
  
    12.  underline下劃線
      13.   
  
  
    13.  
      14.   
  
  
    14.  
      15.   
  
  
    15.  sub下標
      16.   
  
  
    16.  super上標
      17.   
  
  
    17.  
      18.   
  
  
    18.  
      19.   
  
  
    19.  
      支持以下列表樣式
      20.   
  
  
    20.  
          
  
  
      1.  
      2. 有序列表
        3.   
  
  
      3.  
      4. 有序列表
        5.   
  
  
      5.  
      21.   
  
  
    21.  
          
  
  
      •  
      • 無序列表
        •   
  
  
      •  
      22.   
  
  
    22.  
          
  
  
      •  
      • 無序列表
        •   
  
  
      •  
      23.   
  
  
    23.  
          
  
  
      •  
      • 選框列表
        •   
  
  
      •  
      24.   
  
  
    24.  
          
  
  
      •  
      • 選框列表
        •   
  
  
      •  
      25.   
  
  
    25.  
      26.   
  
  
    26.  
      支持以下字符大小
      27.   
  
  
    27.  
      H1 一級標題
      28.   
  
  
    28.  
      H2 二級標題
      29.   
  
  
    29.  
      H3 三級標題
      30.   
  
  
    30.  
      H4 四級標題
      31.   
  
  
    31.  
      H5 五級標題
      32.   
  
  
    32.  
      H6 六級標題
      33.   
  
  
    33.  
      34.   
  
  
    34.  
      支持以下對齊方式
      35.   
  
  
    35.  
      center中間對齊
      36.   
  
  
    36.  
      right 右對齊
      37.   
  
  
    37.  
      justify 自動對齊
      38.   
  
  
    38.  
      39.   
  
  
    39.  color 支持設置字體及背景顏色`;
      40.   
  
  
      41.   
  
  
    41. Page({
      42.   
  
  
    42.  data: {
      43.   
  
  
    43.  formats: {}
      44.   
  
  
    44.  },
      45.   
  
  
      46.   
  
  
    46.  // 編輯器初始化完成時觸發(fā)的事件，用于加載編輯器初始內容
      47.   
  
  
    47.  onEditorReady() {
      48.   
  
  
    48.  this.editorCtx = requireDynamicLib('editorLib').createEditorContext('editorId');
      49.   
  
  
    49.  this.initContent();
      50.   
  
  
    50.  },
      51.   
  
  
      52.   
  
  
    52.  // 設置編輯器初始內容
      53.   
  
  
    53.  initContent() {
      54.   
  
  
    54.  this.editorCtx.setContents({
      55.   
  
  
    55.  html: INIT_CONTENT_HTML
      56.   
  
  
    56.  });
      57.   
  
  
    57.  },
      58.   
  
  
      59.   
  
  
    59.  // 編輯器內插入圖片函數
      60.   
  
  
    60.  insertImage() {
      61.   
  
  
    61.  const editorCtx = this.editorCtx;
      62.   
  
  
    62.  swan.chooseImage({
      63.   
  
  
    63.  count: 1,
      64.   
  
  
    64.  success: res => {
      65.   
  
  
    65.  editorCtx.insertImage({
      66.   
  
  
    66.  src: res.tempFilePaths[0],
      67.   
  
  
    67.  alt: '插入圖片',
      68.   
  
  
    68.  data: {
      69.   
  
  
    69.  id: 'insert-image',
      70.   
  
  
    70.  role: 'user'
      71.   
  
  
    71.  },
      72.   
  
  
    72.  success: () => {
      73.   
  
  
    73.  swan.showToast({
      74.   
  
  
    74.  title: '插入圖片成功'
      75.   
  
  
    75.  });
      76.   
  
  
    76.  },
      77.   
  
  
    77.  fail: err => {
      78.   
  
  
    78.  swan.showToast({
      79.   
  
  
    79.  title: '插入圖片失敗',
      80.   
  
  
    80.  icon: 'none'
      81.   
  
  
    81.  });
      82.   
  
  
    82.  }
      83.   
  
  
    83.  });
      84.   
  
  
    84.  }
      85.   
  
  
    85.  });
      86.   
  
  
    86.  },
      87.   
  
  
      88.   
  
  
    88.  /**
      89.   
  
  
    89.  * 更改編輯器選區(qū)為不同格式
      90.   
  
  
    90.  *
      91.   
  
  
    91.  * @param {Object} e.target.dataset 獲取 swan 頁面的傳參：name、value
      92.   
  
  
    92.  *
      93.   
  
  
    93.  */
      94.   
  
  
    94.  format(e) {
      95.   
  
  
    95.  const {name, value} = e.target.dataset;
      96.   
  
  
    96.  if (!name) {
      97.   
  
  
    97.  return;
      98.   
  
  
    98.  }
      99.   
  
  
    99.  this.editorCtx.format(name, value);
      100.   
  
  
    100.  },
      101.   
  
  
      102.   
  
  
    102.  /**
      103.   
  
  
    103.  * 編輯器內容或樣式通過方法改變時觸發(fā)的事件，返回選區(qū)已設置的樣式
      104.   
  
  
    104.  *
      105.   
  
  
    105.  * @param {Object} e.detail 事件對象
      106.   
  
  
    106.  *
      107.   
  
  
    107.  */
      108.   
  
  
    108.  onStatusChange(e) {
      109.   
  
  
    109.  const formats = e.detail;
      110.   
  
  
    110.  this.setData({
      111.   
  
  
    111.  formats
      112.   
  
  
    112.  });
      113.   
  
  
    113.  },
      114.   
  
  
      115.   
  
  
    115.  // 編輯器中插入分隔符
      116.   
  
  
    116.  insertDivider() {
      117.   
  
  
    117.  this.editorCtx.insertDivider();
      118.   
  
  
    118.  },
      119.   
  
  
      120.   
  
  
    120.  // 清除編輯器中內容，與工具欄的垃圾桶圖標對應
      121.   
  
  
    121.  clear() {
      122.   
  
  
    122.  const editorCtx = this.editorCtx;
      123.   
  
  
    123.  swan.showModal({
      124.   
  
  
    124.  title: '清空編輯器',
      125.   
  
  
    125.  content: '確定清空編輯器全部內容？',
      126.   
  
  
    126.  success: res => {
      127.   
  
  
    127.  if (res.confirm) {
      128.   
  
  
    128.  editorCtx.clear();
      129.   
  
  
    129.  }
      130.   
  
  
    130.  }
      131.   
  
  
    131.  });
      132.   
  
  
    132.  }
      133.   
  
  
    133. });
      134.  
 
 
     
 
 
      
  
  
  
    1. @font-face {
      2.   
  
  
    2.  font-family: "iconfont"; /* project id 2000141 */
      3.   
  
  
    3.  src: url(http://at.alicdn.com/t/font_2000141_vma36b09h9.wof) format("woff"),
      4.   
  
  
    4.  url(http://at.alicdn.com/t/font_2000141_vma36b09h9.ttf) format("truetype"),
      5.   
  
  
    5.  url(http://at.alicdn.com/t/font_2000141_vma36b09h9.svg#iconfont) format("svg");
      6.   
  
  
    6. }
      7.   
  
  
      8.   
  
  
    8. .iconfont {
      9.   
  
  
    9.  display: inline-block;
      10.   
  
  
    10.  font-size: 22px;
      11.   
  
  
    11.  width: 30px;
      12.   
  
  
    12.  height: 30px;
      13.   
  
  
    13.  font-family: "iconfont" !important;
      14.   
  
  
    14.  font-style: normal;
      15.   
  
  
    15.  -webkit-font-smoothing: antialiased;
      16.   
  
  
    16.  -moz-osx-font-smoothing: grayscale;
      17.   
  
  
    17. }
      18.   
  
  
      19.   
  
  
    19. .icon-image:before {
      20.   
  
  
    20.  content: "\e60e";
      21.   
  
  
    21. }
      22.   
  
  
      23.   
  
  
    23. .icon-format-header-1:before {
      24.   
  
  
    24.  content: "\e610";
      25.   
  
  
    25. }
      26.   
  
  
      27.   
  
  
    27. .icon-format-header-2:before {
      28.   
  
  
    28.  content: "\e60f";
      29.   
  
  
    29. }
      30.   
  
  
      31.   
  
  
    31. .icon-format-bold:before {
      32.   
  
  
    32.  content: "\e60a";
      33.   
  
  
    33. }
      34.   
  
  
      35.   
  
  
    35. .icon-format-list:before {
      36.   
  
  
    36.  content: "\e60b";
      37.   
  
  
    37. }
      38.   
  
  
      39.   
  
  
    39. .icon-divider:before {
      40.   
  
  
    40.  content: "\e609";
      41.   
  
  
    41. }
      42.   
  
  
      43.   
  
  
    43. .icon-clear:before {
      44.   
  
  
    44.  content: "\e60c";
      45.   
  
  
    45. }
      46.   
  
  
      47.   
  
  
    47. .icon-format-italic:before {
      48.   
  
  
    48.  content: "\e60d";
      49.   
  
  
    49. }
      50.   
  
  
      51.   
  
  
    51. .editor-wrap {
      52.   
  
  
    52.  width: 100%;
      53.   
  
  
    53.  height: 100vh;
      54.   
  
  
    54. }
      55.   
  
  
      56.   
  
  
    56. .editor {
      57.   
  
  
    57.  display: block;
      58.   
  
  
    58.  box-sizing: border-box;
      59.   
  
  
    59.  width: 100%;
      60.   
  
  
    60.  height: 100%;
      61.   
  
  
    61.  margin-top: 50px;
      62.   
  
  
    62.  padding: 38.043rpx 30.797rpx;
      63.   
  
  
    63. }
      64.   
  
  
      65.   
  
  
    65. swan-editor {
      66.   
  
  
    66.  display: block;
      67.   
  
  
    67. }
      68.   
  
  
      69.   
  
  
    69. .ql-editor {
      70.   
  
  
    70.  height: 100%;
      71.   
  
  
    71. }
      72.   
  
  
      73.   
  
  
    73. .toolbar {
      74.   
  
  
    74.  position: fixed;
      75.   
  
  
    75.  box-sizing: border-box;
      76.   
  
  
    76.  padding: 17px 17px;
      77.   
  
  
    77.  width: 100%;
      78.   
  
  
    78.  height: 45px;
      79.   
  
  
    79.  top: 30;
      80.   
  
  
    80.  left: 0;
      81.   
  
  
    81.  border-top: .906rpx solid #e6e6e6;
      82.   
  
  
    82.  border-bottom: .906rpx solid #e6e6e6;
      83.   
  
  
    83.  display: flex;
      84.   
  
  
    84.  align-items: center;
      85.   
  
  
    85.  justify-content: space-between;
      86.   
  
  
    86.  background-color: #fff;
      87.   
  
  
    87.  z-index: 99;
      88.   
  
  
    88. }
      89.   
  
  
      90.   
  
  
    90. .ql-active {
      91.   
  
  
    91.  color: #3388ff;
      92.   
  
  
    92. }
      93.

    文章題目：創(chuàng)新互聯百度小程序教程：Editor富文本編輯器
    文章分享：http://uogjgqi.cn/article/cojoiic.html
    掃二維碼與項目經理溝通

    我們在微信上24小時期待你的聲音

    解答本文疑問/技術咨詢/運營咨詢/技術建議/互聯網交流