事件&回调

注意，本篇wiki只适用 0.8.42 及以上版本

目录

• 事件列表
  • urlProcessor 解析url
  • fileUpload 上传文件

---

事件列表

urlProcessor 解析url

urlProcessor(url: string, srcType: 'image' | 'audio' | 'video' | 'autolink' | 'link')

对图片、视频、音频、超链接字符串、超链接 里的url做处理

举个例子，使超链接字符串生成的标签都要是https

代码如下：

cherry.on('urlProcessor', function(url, type){
    console.log(url, type);
    if (type === 'autolink') {
        return url.replace(/^http:/, 'https:');
    }
    return url;
});

效果如下：

---

fileUpload 上传文件

fileUpload(file: File, callback: function)

上传文件的回调

其中callback会接收以下参数：

• url 上传文件后的url 或 base64内容
• params.name 回填的alt信息
• params.poster 封面图片地址（视频的场景下生效）
• params.isBorder 是否有边框样式（图片场景下生效）
• params.isShadow 是否有阴影样式（图片场景下生效）
• params.isRadius 是否有圆角样式（图片场景下生效）
• params.width 设置宽度，可以是像素、也可以是百分比（图片、视频场景下生效）
• params.height 设置高度，可以是像素、也可以是百分比（图片、视频场景下生效）

举个例子，将上传的图片全部转成base64格式

代码如下：

cherry.on('fileUpload', function(file, callback){
    if (/image/i.test(file.type)) {
        // 如果上传的是图片，则默认回显base64内容（因为没有图床）
        // 创建 FileReader 对象
        const reader = new FileReader();
        // 读取文件内容
        reader.onload = (event) => {
        // 获取 base64 内容
        const base64Content = event.target.result;
        callback(base64Content, {
            name: `${file.name.replace(/\.[^.]+$/, '')}`,
            isShadow: true,
            isRadius: true,
            width: '30%',
            height: 'auto',
        });
        };
        reader.readAsDataURL(file);
    } else {
        callback('images/demo-dog.png');
    }
})

效果如下：

---

afterChange 编辑区内容变更

afterChange(text: string, html: string)

编辑区内容有实际变更后触发，其中text为markdown内容

---

afterInit cherry完成初始化

afterInit(text: string, html: string)

cherry完成初始化后触发，其中text为markdown内容

---

beforeImageMounted 加载图片

beforeImageMounted(srcProp: string, src: string)

在预览区输出<img>标签之前触发

举个例子，将图片的src属性替换成data-temp-src属性

代码如下：

cherry.on('beforeImageMounted', function(srcProp, src) {
    return {srcProp: 'data-temp-src', src}
})

效果：

<img data-temp-src="xxxx">

---

onClickPreview 点击预览区域

onClickPreview(e: MouseEvent)

鼠标点击预览区域时触发

---

onCopyCode 复制预览区代码块

onCopyCode(e: MouseEvent, code: string)

鼠标点击预览区域代码块复制按钮时触发

---