vue-rich-editor v0.8.1-beta.0

vue-rich-editor

！！！从 V0.7.x 开始，API 有更新，请注意

定制 vue 富文本编辑器，基于 Quill

介绍

1. 基于 quill 封装
2. 可配置模块
   • 行内样式（inline style）
   • 图片缩放（image resize）
   • 拖拽上传（image drop）
   • 链接上传图片（support via the url to upload pictures）
   • 剪贴板粘贴图片（support the clipboard to paste pictures）
   • 支持 @(at) 功能

示例

静态示例

codesandbox 示例不定期更新

使用

实例

配置

customLink 图标样式自定义

• 默认是文字风格，可自由修改，下面的例子是采用图片按钮内区域大小为：18*18

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

开启 @-at 功能

@ 默认不开启，需要开启的话，请先配置 quillRegisterKeys【如果之前使用了默认配置，即没有显式配置，需要将默认 key 显式注册一下】

配置参数

atList

const atList = [
    atListItem,
    atListItem,
    ...
];

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

atHooks

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

待完善

1. 行内样式（inline-style）
2. 图片缩放（image-resize）
3. link and style conflict
4. link placeholder
5. use the url to upload image
6. image drop

issues

• clipboard formats about
• matchvisual
• link placeholder