189 8069 5689

创新互联百度小程序教程：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富文本编辑器
    网站URL：http://cdxtjz.cn/article/cojoiic.html

    其他资讯

    联系我们

    您好HELLO!
    感谢您来到成都网站建设公司，若您有合作意向，请您为我们留言或使用以下方式联系我们， 我们将尽快给你回复，并为您提供真诚的设计服务，谢谢。
    • 电话：028- 86922220 18980695689
    • 商务合作邮箱：631063699@qq.com
    • 合作QQ： 532337155
    • 成都网站设计地址：成都市青羊区锣锅巷31号五金站写字楼6楼

    小谭建站工作室

    成都小谭网站建设公司拥有多年以上互联网从业经验的团队，始终保持务实的风格，以"帮助客户成功"为已任，专注于提供对客户有价值的服务。 我们已为众企业及上市公司提供专业的网站建设服务。我们不只是一家网站建设的网络公司；我们对营销、技术、管理都有自己独特见解，小谭建站采取“创意+综合+营销”一体化的方式为您提供更专业的服务！

    小谭观点

    相对传统的成都网站建设公司而言，小谭是互联网中的网站品牌策划，我们精于企业品牌与互联网相结合的整体战略服务。
    我们始终认为，网站必须注入企业基因，真正使网站成为企业vi的一部分，让整个网站品牌策划体系变的深入而持久。
    友情链接： 资中发电机维修   网站推广   成都移动机房   网站建设   成都定制网站   书籍刊物设计   成都网站设计   达州服务器托管   网站解决方案   sslhqy.com   
    © Copyright 2023 小谭建站工作室All Rights Reserved.  成都网站建设 / 成都网站建设 / 响应式网站建设 / 成都服务器租用