Skip to content

事件&回调

Jump to bottom
sunsonliu edited this page Jan 3, 2025 · 15 revisions

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

目录

事件列表

urlProcessor 解析url

urlProcessor(url: string, srcType: 'image' | 'audio' | 'video' | 'autolink' | 'link', callback?: (newUrl) => newUrl)

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

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

代码如下：

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

效果如下： image

异步回调 代码如下：

cherry.on('urlProcessor', function(url, type, callback){
    setTimeout(() => {
        callback(url.replace(/^http:/, 'https:'));
    }, 3000);
    return false;
});

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');
    }
})

效果如下： image

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)

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

举个例子，复制代码块时自动带上代码块语法

代码如下：

cherry.on('onCopyCode', function(event, code) {
    return '```\n' + code + '\n```';
})

changeString2Pinyin 转拼音

changeString2Pinyin(str: string)

cherry的ruby语法会通过该方法将中文转成拼音

具体例子可以看这里

onPaste 粘贴内容

onPaste(clipboardData: ClipboardEvent['clipboardData'])

在编辑区域粘贴内容时回调

随便举个例子，代码如下：

/**
 * 粘贴时触发
 * @param {ClipboardEvent['clipboardData']} clipboardData
 * @returns
 *    false: 走cherry粘贴的默认逻辑
 *    string: 直接粘贴的内容
*/
function onPaste(clipboardData) {
    return false;
}
cherry.on('onPaste', onPaste);

afterChange 编辑区内容变更

afterChange(text: string, html: string)

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

afterInit cherry完成初始化

afterInit(text: string, html: string)

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

focus 编辑区focus

focus({ e: MouseEvent, cherry: Cherry })

编辑区获得焦点时触发

blur 编辑区blur

blur({ e: MouseEvent, cherry: Cherry })

编辑区失去焦点时触发

selectionChange 编辑区选区改变时触发

selectionChange({ selections: Array, lastSelections: Array, info: {origin: string, ranges: Array}})

编辑区选区改变时触发，由于编辑区支持同时选中多个区域，所以selections和lastSelections都是数组

selections：当前选中区域的文本内容组成的数组

lastSelections：上次选择的内容

当selections为空时，表明用户清空了选区；当lastSelections为空时，表明用户新增了选区；selections和lastSelections不会同时为空

afterChangeLocale 修改语言时触发

afterChangeLocale( locale:string )

修改语言时触发

locale：修改后的语言

changeMainTheme修改主题时触发

changeMainTheme( theme:string )

修改主题时触发

theme：修改后的主题

changeCodeBlockTheme修改代码块主题时触发

changeCodeBlockTheme( theme:string )

修改代码块主题时触发

theme：修改后的主题

注册事件&回调

配置式

var config = {
    id: 'markdown',
    value: '',
    callback: {
        urlProcessor: callbacks.urlProcessor,
        fileUpload: callbacks.fileUpload,
        beforeImageMounted: callbacks.beforeImageMounted,
        onClickPreview: callbacks.onClickPreview,
        onCopyCode: callbacks.onCopyCode,
        changeString2Pinyin: callbacks.changeString2Pinyin,
        onPaste: callbacks.onPaste,
    },
    event: {
        afterChange: callbacks.afterChange,
        afterInit: callbacks.afterInit,
        focus: ({ e, cherry }) => {},
        blur: ({ e, cherry }) => {},
        selectionChange: ({ selections, lastSelections, info }) => {},
        afterChangeLocale: locale => {},
    },
};
var cherry = new Cherry(config);

动态绑定

function afterChange(){
    console.log('change');
}
function onCopyCode(e, code) {
    return '```\n' + code + '\n```';
}
...
...
var cherry = new Cherry(config);
...
...
cherry.on('afterChange', afterChange);
cherry.on('onCopyCode', onCopyCode);
...
...
cherry.off('afterChange', afterChange);
cherry.off('onCopyCode', onCopyCode);
Clone this wiki locally