vue-rich-editor

!!!从 V0.7.x 开始,API 有更新,请注意

介绍

示例

使用

配置

customLink 图标样式自定义

.ql-custom-link {
 .ql-custom-link-inner {
 // 图片
 background-image: url(https://dwz.cn/H9EkfLih);
 background-size: 100% 100%;
 // 重置掉文字
 &::before {
 content: '';
 }
 }
}

开启 @-at 功能

配置参数

const atList = [
 atListItem,
 atListItem,
 ...
];
const atListItem = {
 label: '', // 【*】 显式的文字
 ..., // 其他需要的数据
};

const atHooks = {
 click(opts) {
 //
 }
};
const opts = {
 list, // 当前 list,即 atList,为便利取值
 item, // 点击的项,即 list[clickIndex]
 index // 点击项的索引
};

方法

Emit - 主动抛出

编辑器状态相关

// focus
reFocus(options)
options = {
 Editor,
 source,
 range,
 oldRange,
 cursorLocation
}

// 内容高亮
reHighlighted(options)
options = {
 Editor,
 source,
 range,
 oldRange,
 cursorLocation,
 text
}

// blur
reBlur(options)
options = {
 Editor,
 source
}

// cursor move evt
reCursorMove(options)
options = {
 range,
 oldRange
}

图片相关

// 文件 上传图片
/**
 * 此处注意,更新到 V0.7.0 之后,参数格式变了
 */
reImageAdded(options)
options = {
 file, // 文件
 Editor, // 当前编辑器
 range,
 cursorLocation
}

// 链接上传图片
reImageLink(type, options)
type // string:'ok':点击确定,'cancel':点击取消
options = {
 url, // 输入路径
 Editor, // 当前编辑器
 range,
 cursorLocation
}

自定义链接

// 自定义链接回调
reCustomLink(opts)
opts = {
 code, // 状态码:0 成功;1 失败
 msg, // 状态描述
}

RefCall - 被动调用

获取移动端可使用富文本

⚠️🖍只可作为快捷函数使用,此函数输出的值,不能作为下次回填编辑器的文本

_$getTagFillHtml()
return = `${transedHtml}` | String

获取当前富文本有效内容

_$getEffectiveValue()
return = `${effectiveValue}` | String

待完善

issues