创新互联百度小程序教程：Editor富文本编辑器

  • Editor 富文本编辑器
    • 介绍
    • 使用方法
      • 1. 在项目中引用动态库
      • 2. 在使用到富文本编辑器组件的页面配置动态库
      • 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 富文本编辑器动态库提供了支持富文本编辑的editor组件和操作editor组件的createEditorContext方法，通过使用该动态库，用户可以对图片、文本进行编辑。编辑器导出内容支持带标签的html和纯文本的text，编辑器内部采用delta格式进行存储。

    成都创新互联公司专注于崇州网站建设服务及定制，我们拥有丰富的企业做网站经验。 热诚为您提供崇州营销型网站建设，崇州网站制作、崇州网页设计、崇州网站官网定制、小程序开发服务，打造崇州网络公司原创品牌,更为您提供崇州网站排名全网营销落地服务。

    富文本编辑器组件中设置了一些基本样式使得内容可以正确展示，在开发过程中可以进行覆盖，在其他组件或者环境中使用富文本编辑器导出的html时，需要额外维护以下DOM结构：

     
 
 
      
  
  
  
      2.   
  
  
    2.  
      3.   
  
  
      4.

    使用方法

    1. 在项目中引用动态库

    参考使用动态库中提供的方法，在app.json中增添一项dynamicLib，与pages同级。

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

    2. 在使用到富文本编辑器组件的页面配置动态库

    在每个使用到富文本编辑器组件的页面，配置*.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 否 编辑器初始化完成时触发
    bindfocus EventHandle 否 编辑器聚焦时触发，event.detail = { html, text, delta }
    bindblur EventHandle 否 编辑器失去焦点时触发，event.detail = { html, text, delta }
    bindinput EventHandle 否 编辑器内容改变时触发，event.detail = { html, text, delta }
    bindstatuschange EventHandle 否 编辑器内容或样式通过EditorContext中的方法改变时触发，返回选区已设置的样式

    编辑器内支持部分HTML标签和内联样式，但不支持class和id。

    支持的标签

    不满足的标签会被忽略，div标签会被转换为p标签存储。

    类型 节点
    行内元素
    块级元素

    支持的内联样式

    内联样式仅支持设置在行内元素或块级元素上，不能同时设置，如text-align归类为块级样式，在span标签上设置是无效的。

    类型 样式
    块级样式 text-align、direction
    行内样式 color、background-color

    EditorContext 实例

    Editor 富文本编辑器动态库提供了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 否 接口调用结束的回调函数（调用成功、失败都会执行）

    EditorContext.clear(Object object)

    解释：清空编辑器内容。

    参数：Object object

    属性 类型 默认值 必填 说明
    success Function 否 接口调用成功的回调函数
    fail Function 否 接口调用失败的回调函数
    complete Function 否 接口调用结束的回调函数（调用成功、失败都会执行）

    EditorContext.format(String name, String value)

    解释：修改格式。

    对已经应用样式的选区设置会取消样式。

    参数

    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 否 接口调用结束的回调函数（调用成功、失败都会执行）

    object.success 回调函数

    参数：Object res

    属性 类型 说明
    html String 带标签的html内容
    text String 纯文本内容
    delta Object 描述内容的delta对象

    EditorContext.getSelectionText(Object object)

    解释：获取编辑器内选区的纯文本内容。当编辑器失焦或未选中一段区间时，返回内容为空。

    参数：Object object

    属性 类型 默认值 必填 说明
    success Function 否 接口调用成功的回调函数
    fail Function 否 接口调用失败的回调函数
    complete Function 否 接口调用结束的回调函数（调用成功、失败都会执行）

    object.success 回调函数

    参数：Object res

    属性 类型 说明
    text String 纯文本内容

    EditorContext.insertDivider(Object object)

    解释：插入分隔符。

    参数：Object object

    属性 类型 默认值 必填 说明
    success Function 否 接口调用成功的回调函数
    fail Function 否 接口调用失败的回调函数
    complete Function 否 接口调用结束的回调函数（调用成功、失败都会执行）

    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 否 接口调用结束的回调函数（调用成功、失败都会执行）

    EditorContext.insertText(Object object)

    解释：覆盖当前选区，设置一段文本。

    参数：Object object

    属性 类型 默认值 必填 说明
    text String 否 文本内容
    success Function 否 接口调用成功的回调函数
    fail Function 否 接口调用失败的回调函数
    complete Function 否 接口调用结束的回调函数（调用成功、失败都会执行）

    EditorContext.removeFormat(Object object)

    解释：清除当前选区的样式。

    参数：Object object

    属性 类型 默认值 必填 说明
    success Function 否 接口调用成功的回调函数
    fail Function 否 接口调用失败的回调函数
    complete Function 否 接口调用结束的回调函数（调用成功、失败都会执行）

    EditorContext.setContents(Object object)

    解释：初始化编辑器内容，html和delta同时存在时仅delta生效。

    需要注意的是，通过setContents设置编辑器内容时，由于支持的html标签和内联样式有限，建议开发者在小程序内通过delta进行插入。

    参数：Object object

    属性 类型 默认值 必填 说明
    html String 否 带标签的html内容
    delta Object 否 描述内容的delta对象
    success Function 否 接口调用成功的回调函数
    fail Function 否 接口调用失败的回调函数
    complete Function 否 接口调用结束的回调函数（调用成功、失败都会执行）

    EditorContext.scrollIntoView()

    解释：将编辑器光标处滚动到窗口可视区域内。

    EditorContext.redo(Object object)

    解释：恢复。

    参数：Object object

    属性 类型 默认值 必填 说明
    success Function 否 接口调用成功的回调函数
    fail Function 否 接口调用失败的回调函数
    complete Function 否 接口调用结束的回调函数（调用成功、失败都会执行）

    EditorContext.undo(Object object)

    解释：撤销。

    参数：Object object

    属性 类型 默认值 必填 说明
    success Function 否 接口调用成功的回调函数
    fail Function 否 接口调用失败的回调函数
    complete Function 否 接口调用结束的回调函数（调用成功、失败都会执行）

    示例

    在开发者工具中打开

    在开发者工具中打开

    在 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.  // 编辑器初始化完成时触发的事件，用于加载编辑器初始内容
      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.  * 更改编辑器选区为不同格式
      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.  * 编辑器内容或样式通过方法改变时触发的事件，返回选区已设置的样式
      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.

    文章标题：创新互联百度小程序教程：Editor富文本编辑器
    文章路径：http://www.hantingmc.com/qtweb/news39/145489.html

    网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

    广告

    声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

    猜你还喜欢下面的内容

    虚拟主机知识

    行业网站建设

    红锐电子　　 　成都企业网站改版　　 　成都户外广告牌设计　　 　成都广告公司　　 　九针服饰　　 　化妆品企业网站建设方案　　 　服务器租用　　 　简阳电信服务器托管　　 　蓬溪网站建设　　 　鸿程源茂　　 　成都网站建设　　 　宜宾做网站　　 　微信小程序开发　　 　网站推广优化　　 　卡多尼人工智　　 　重庆网站建设　　 　主机租用　　 　成都画册设计公司　　 　双流网站建设　　 　资阳做网站