68 lines
2.2 KiB
JavaScript
68 lines
2.2 KiB
JavaScript
|
// 标识必须独一无二 - 标识是为了使用insertText插入标识文本后，查找到标识所在delta位置的索引
|
|||
|
|
export const linkFlag = '#-*=*-*=*-*=*@-link超链接标识link-@*=*-*=*-*=*-#'
|
|||
|
|
|
|||
|
|
export function addLink(editorCtx, attr) {
|
|||
|
|
// 先插入一段文本内容
|
|||
|
|
editorCtx.insertText({
|
|||
|
|
text: linkFlag
|
|||
|
|
})
|
|||
|
|
// 获取全文delta内容
|
|||
|
|
editorCtx.getContents({
|
|||
|
|
success(res) {
|
|||
|
|
let options = res.delta.ops
|
|||
|
|
const findex = options.findIndex(item => {
|
|||
|
|
return item.insert && typeof item.insert !== 'object' && item.insert?.indexOf(linkFlag) !== -1
|
|||
|
|
})
|
|||
|
|
// 根据标识查找到插入的位置
|
|||
|
|
if (findex > -1) {
|
|||
|
|
const findOption = options[findex]
|
|||
|
|
const findAttributes = findOption.attributes
|
|||
|
|
// 将该findOption分成三部分：前内容 要插入的link 后内容
|
|||
|
|
const [prefix, suffix] = findOption.insert.split(linkFlag);
|
|||
|
|
const handleOps = []
|
|||
|
|
// 前内容
|
|||
|
|
if (prefix) {
|
|||
|
|
const prefixOps = findAttributes ? {
|
|||
|
|
insert: prefix,
|
|||
|
|
attributes: findAttributes
|
|||
|
|
} : {
|
|||
|
|
insert: prefix
|
|||
|
|
}
|
|||
|
|
handleOps.push(prefixOps)
|
|||
|
|
}
|
|||
|
|
// 插入的link
|
|||
|
|
const linkOps = {
|
|||
|
|
insert: attr.text,
|
|||
|
|
attributes: {
|
|||
|
|
link: attr.href,
|
|||
|
|
textDecoration: attr.textDecoration || 'none', // 下划线
|
|||
|
|
color: attr.color || '#007aff'
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
handleOps.push(linkOps)
|
|||
|
|
// 后内容
|
|||
|
|
if (suffix) {
|
|||
|
|
const suffixOps = findAttributes ? {
|
|||
|
|
insert: suffix,
|
|||
|
|
attributes: findAttributes
|
|||
|
|
} : {
|
|||
|
|
insert: suffix
|
|||
|
|
}
|
|||
|
|
handleOps.push(suffixOps)
|
|||
|
|
}
|
|||
|
|
// 删除原options[findex]并在findex位置插入上述三个ops
|
|||
|
|
options.splice(findex, 1);
|
|||
|
|
options.splice(findex, 0, ...handleOps);
|
|||
|
|
// 最后重新初始化内容，注意该方法会导致光标重置到最开始位置
|
|||
|
|
editorCtx.setContents({
|
|||
|
|
delta: {
|
|||
|
|
ops: options
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
// 所以最后建议使富文本光标失焦，让用户手动聚焦光标
|
|||
|
|
editorCtx.blur()
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
}
|