EditorContext 实例,可通过 xhs.createEditorContext 获取。EditorContext 通过 id 跟一个 editor 组件绑定,操作对应的 editor 组件。
编辑器失焦,同时收起键盘
属性 | 类型 | 默认值 | 说明 |
---|---|---|---|
success | function | 接口调用成功的回调函数 | |
fail | function | 接口调用失败的回调函数 | |
complete | function | 接口调用结束的回调函数(调用成功、失败都会执行) |
清空编辑器内容
属性 | 类型 | 默认值 | 说明 |
---|---|---|---|
success | function | 接口调用成功的回调函数 | |
fail | function | 接口调用失败的回调函数 | |
complete | function | 接口调用结束的回调函数(调用成功、失败都会执行) |
修改样式
string name
属性 string value 值
name | value |
---|---|
bold | |
italic | |
underline | |
strike | |
ins | |
script | sub / super |
header | H1 / H2 / h3 / H4 / h5 / H6 |
align | left / center / right / justify |
direction | rtl |
indent | -1 / +1 |
list | ordered / bullet / check |
color | hex color |
backgroundColor | hex color |
margin/marginTop/marginBottom/marginLeft/marginRight | css style |
padding/paddingTop/paddingBottom/paddingLeft/paddingRight | css style |
font/fontSize/fontStyle/fontVariant/fontWeight/fontFamily | css style |
lineHeight | css style |
letterSpacing | css style |
textDecoration | css style |
textIndent | css style |
wordWrap | css style |
wordBreak | css style |
whiteSpace | css style |
获取编辑器内容
属性 | 类型 | 默认值 | 说明 |
---|---|---|---|
success | function | 接口调用成功的回调函数 | |
fail | function | 接口调用失败的回调函数 | |
complete | function | 接口调用结束的回调函数(调用成功、失败都会执行) |
属性 | 类型 | 默认值 | 说明 |
---|---|---|---|
html | string | 带标签的HTML内容 | |
text | string | 纯文本内容 | |
delta | object | 表示内容的delta对象 |
获取编辑器已选区域内的纯文本内容。当编辑器失焦或未选中一段区间时,返回内容为空
属性 | 类型 | 默认值 | 说明 |
---|---|---|---|
success | function | 接口调用成功的回调函数 | |
fail | function | 接口调用失败的回调函数 | |
complete | function | 接口调用结束的回调函数(调用成功、失败都会执行) |
属性 | 类型 | 默认值 | 说明 |
---|---|---|---|
text | string | 纯文本内容 |
插入分割线
属性 | 类型 | 默认值 | 说明 |
---|---|---|---|
success | function | 接口调用成功的回调函数 | |
fail | function | 接口调用失败的回调函数 | |
complete | function | 接口调用结束的回调函数(调用成功、失败都会执行) |
插入图片。
属性 | 类型 | 默认值 | 说明 |
---|---|---|---|
src | string | 图片地址, 仅支持 http(s)、base64 | |
alt | string | 图像无法显示时的替代文本 | |
width | string | 图片宽度(pixels/百分比) | |
height | string | 图片高度 (pixels/百分比) | |
extClass | string | 添加到图片 img 标签上的类名 | |
data | object | data 被序列化为 name=value;name1=value2 的格式挂在属性 data-custom 上 | |
success | function | 接口调用成功的回调函数 | |
fail | function | 接口调用失败的回调函数 | |
complete | function | 接口调用结束的回调函数(调用成功、失败都会执行) |
覆盖当前选区,设置一段文本
属性 | 类型 | 默认值 | 说明 |
---|---|---|---|
src | string | 图片地址, 仅支持 http(s)、base64 | |
alt | string | 图像无法显示时的替代文本 | |
width | string | 图片宽度(pixels/百分比) | |
height | string | 图片高度 (pixels/百分比) | |
extClass | string | 添加到图片 img 标签上的类名 | |
data | object | data 被序列化为 name=value;name1=value2 的格式挂在属性 data-custom 上 | |
success | function | 接口调用成功的回调函数 | |
fail | function | 接口调用失败的回调函数 | |
complete | function | 接口调用结束的回调函数(调用成功、失败都会执行) |
清除当前选区的样式
属性 | 类型 | 默认值 | 说明 |
---|---|---|---|
success | function | 接口调用成功的回调函数 | |
fail | function | 接口调用失败的回调函数 | |
complete | function | 接口调用结束的回调函数(调用成功、失败都会执行) |
初始化编辑器内容,html和delta同时存在时仅delta生效
属性 | 类型 | 默认值 | 说明 |
---|---|---|---|
html | string | 带标签的HTML内容 | |
delta | object | 表示内容的delta对象 | |
success | function | 接口调用成功的回调函数 | |
fail | function | 接口调用失败的回调函数 | |
complete | function | 接口调用结束的回调函数(调用成功、失败都会执行) |
使得编辑器光标处滚动到窗口可视区域内。
恢复
属性 | 类型 | 默认值 | 说明 |
---|---|---|---|
success | function | 接口调用成功的回调函数 | |
fail | function | 接口调用失败的回调函数 | |
complete | function | 接口调用结束的回调函数(调用成功、失败都会执行) |
撤销
属性 | 类型 | 默认值 | 说明 |
---|---|---|---|
success | function | 接口调用成功的回调函数 | |
fail | function | 接口调用失败的回调函数 | |
complete | function | 接口调用结束的回调函数(调用成功、失败都会执行) |
// 创建 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), });