小程序开放平台

文档中心
基础
路由
跳转
转发
界面
网络
支付
数据缓存
媒体
图片
地图
视频
富文本
createEditorContext
EditorContext
位置
开放接口
设备
XHSML
性能
第三方平台
文件
数据分析
画布

xhs.EditorContext

开发
>
JS API
>
媒体
>
富文本
>
EditorContext
>
更新时间:2025-04-10 19:45:25

EditorContext 实例,可通过 xhs.createEditorContext 获取。EditorContext 通过 id 跟一个 editor 组件绑定,操作对应的 editor 组件。

方法

EditorContext.blur

编辑器失焦,同时收起键盘

参数

属性
类型
默认值
说明
successfunction接口调用成功的回调函数
failfunction接口调用失败的回调函数
completefunction接口调用结束的回调函数(调用成功、失败都会执行)

EditorContext.clear

清空编辑器内容

参数

属性
类型
默认值
说明
successfunction接口调用成功的回调函数
failfunction接口调用失败的回调函数
completefunction接口调用结束的回调函数(调用成功、失败都会执行)

EditorContext.format

修改样式

string name

属性 string value 值

支持设置的样式列表

name
value
bold
italic
underline
strike
ins
scriptsub / super
headerH1 / H2 / h3 / H4 / h5 / H6
alignleft / center / right / justify
directionrtl
indent-1 / +1
listordered / bullet / check
colorhex color
backgroundColorhex color
margin/marginTop/marginBottom/marginLeft/marginRightcss style
padding/paddingTop/paddingBottom/paddingLeft/paddingRightcss style
font/fontSize/fontStyle/fontVariant/fontWeight/fontFamilycss style
lineHeightcss style
letterSpacingcss style
textDecorationcss style
textIndentcss style
wordWrapcss style
wordBreakcss style
whiteSpacecss style

EditorContext.getContents

获取编辑器内容

参数

属性
类型
默认值
说明
successfunction接口调用成功的回调函数
failfunction接口调用失败的回调函数
completefunction接口调用结束的回调函数(调用成功、失败都会执行)

object.success

属性
类型
默认值
说明
htmlstring带标签的HTML内容
textstring纯文本内容
deltaobject表示内容的delta对象

EditorContext.getSelectionText

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

参数

属性
类型
默认值
说明
successfunction接口调用成功的回调函数
failfunction接口调用失败的回调函数
completefunction接口调用结束的回调函数(调用成功、失败都会执行)

object.success

属性
类型
默认值
说明
textstring纯文本内容

EditorContext.insertDivider

插入分割线

参数

属性
类型
默认值
说明
successfunction接口调用成功的回调函数
failfunction接口调用失败的回调函数
completefunction接口调用结束的回调函数(调用成功、失败都会执行)

EditorContext.insertImage

插入图片。

参数

属性
类型
默认值
说明
srcstring图片地址, 仅支持 http(s)、base64
altstring图像无法显示时的替代文本
widthstring图片宽度(pixels/百分比)
heightstring图片高度 (pixels/百分比)
extClassstring添加到图片 img 标签上的类名
dataobjectdata 被序列化为 name=value;name1=value2 的格式挂在属性 data-custom 上
successfunction接口调用成功的回调函数
failfunction接口调用失败的回调函数
completefunction接口调用结束的回调函数(调用成功、失败都会执行)

EditorContext.insertText

覆盖当前选区,设置一段文本

参数

属性
类型
默认值
说明
srcstring图片地址, 仅支持 http(s)、base64
altstring图像无法显示时的替代文本
widthstring图片宽度(pixels/百分比)
heightstring图片高度 (pixels/百分比)
extClassstring添加到图片 img 标签上的类名
dataobjectdata 被序列化为 name=value;name1=value2 的格式挂在属性 data-custom 上
successfunction接口调用成功的回调函数
failfunction接口调用失败的回调函数
completefunction接口调用结束的回调函数(调用成功、失败都会执行)

EditorContext.removeFormat

清除当前选区的样式

参数

属性
类型
默认值
说明
successfunction接口调用成功的回调函数
failfunction接口调用失败的回调函数
completefunction接口调用结束的回调函数(调用成功、失败都会执行)

EditorContext.setContents

初始化编辑器内容,html和delta同时存在时仅delta生效

参数

属性
类型
默认值
说明
htmlstring带标签的HTML内容
deltaobject表示内容的delta对象
successfunction接口调用成功的回调函数
failfunction接口调用失败的回调函数
completefunction接口调用结束的回调函数(调用成功、失败都会执行)

EditorContext.scrollIntoView

使得编辑器光标处滚动到窗口可视区域内。

EditorContext.redo

恢复

参数

属性
类型
默认值
说明
successfunction接口调用成功的回调函数
failfunction接口调用失败的回调函数
completefunction接口调用结束的回调函数(调用成功、失败都会执行)

EditorContext.undo

撤销

参数

属性
类型
默认值
说明
successfunction接口调用成功的回调函数
failfunction接口调用失败的回调函数
completefunction接口调用结束的回调函数(调用成功、失败都会执行)

实例代码

创建 EditorContext

// 创建 EditorContext 对象
const editorContext = xhs.createEditorContext('myEditor'); // 替换为实际的 editor 组件 id

失焦操作

editorContext.blur({
  success: () => console.log('编辑器失焦成功'),
  fail: (err) => console.error('编辑器失焦失败:', err),
});

清空编辑器内容

editorContext.clear({
  success: () => console.log('编辑器内容清空成功'),
  fail: (err) => console.error('清空编辑器内容失败:', err),
});

修改样式

editorContext.format('bold', true); // 设置加粗
editorContext.format('color', '#ff0000'); // 设置字体颜色为红色

获取编辑器内容

editorContext.getContents({
  success: (res) => {
    console.log('HTML 内容:', res.html);
    console.log('纯文本内容:', res.text);
    console.log('Delta 对象:', res.delta);
  },
  fail: (err) => console.error('获取编辑器内容失败:', err),
});

获取选区文本

editorContext.getSelectionText({
  success: (res) => {
    console.log('选区文本内容:', res.text);
  },
  fail: (err) => console.error('获取选区文本失败:', err),
});

插入分割线

editorContext.insertDivider({
  success: () => console.log('分割线插入成功'),
  fail: (err) => console.error('插入分割线失败:', err),
});

插入图片

editorContext.insertImage({
  src: 'https://example.com/image.jpg', // 替换为实际图片地址
  alt: '示例图片',
  width: '100%',
  success: () => console.log('图片插入成功'),
  fail: (err) => console.error('插入图片失败:', err),
});

插入文本

editorContext.insertText({
  text: '这是插入的文本内容',
  success: () => console.log('文本插入成功'),
  fail: (err) => console.error('插入文本失败:', err),
});

清除选区样式

editorContext.removeFormat({
  success: () => console.log('选区样式清除成功'),
  fail: (err) => console.error('清除选区样式失败:', err),
});

初始化编辑器内容

editorContext.setContents({
  html: '<p>这是初始化的 HTML 内容</p>',
  success: () => console.log('编辑器内容初始化成功'),
  fail: (err) => console.error('初始化编辑器内容失败:', err),
});

滚动到光标处

editorContext.scrollIntoView({
  success: () => console.log('滚动到光标处成功'),
  fail: (err) => console.error('滚动到光标处失败:', err),
});

撤销操作

editorContext.undo({
  success: () => console.log('撤销成功'),
  fail: (err) => console.error('撤销失败:', err),
});

恢复操作

editorContext.redo({
  success: () => console.log('恢复成功'),
  fail: (err) => console.error('恢复失败:', err),
});