@qingbing/ts-v3-md-editor v2.0.7

MdEditor 插件介绍

• MdEditor 插件介绍
  • 1. 概要说明
    • 1.1 地址
    • 1.2 插件描述
    • 1.3 重要依赖
    • 1.4 插件安装
  • 2. MdPreview 说明
    • 2.1 属性说明
    • 2.2 事件说明, 主要参考 md-editor-v3
    • 2.3 实例暴露说明
  • 3. MdEditor 说明
    • 3.1 属性说明
    • 3.2 事件说明, 主要参考 md-editor-v3， 拥有 MdPreview 的所有属性
    • 3.3 实例暴露说明
  • 4. 示例
    • 4.1 全局注册使用
    • 4.2 模板组件使用

1. 概要说明

1.1 地址

https://gitee.com/duqingbing/ts-v3-package/tree/ts-v3-md-editor

1.2 插件描述

vite + ts + vue3 二次封装 md-editor-v3 出来的 MdEditor 编辑器

1.3 重要依赖

• @qingbing/ts-v3-utils: ^2.0.15"
• md-editor-v3: ^4.12.2"
• vue: ^3.4.21"

1.4 插件安装

# yarn 安装
yarn add @qingbing/ts-v3-md-editor

# npm 安装
npm i @qingbing/ts-v3-md-editor

2. MdPreview 说明

2.1 属性说明

• conf 内部属性说明(主要参考 md-editor-v3)

2.2 事件说明, 主要参考 md-editor-v3

2.3 实例暴露说明

3. MdEditor 说明

3.1 属性说明

• conf 内部属性说明(主要参考 md-editor-v3)， 拥有 MdPreview - conf 的所有属性

3.2 事件说明, 主要参考 md-editor-v3， 拥有 MdPreview 的所有属性

3.3 实例暴露说明

4. 示例

4.1 全局注册使用

• 一旦注册， MdEditor 和 MdPreview 作为组件全局通用
• 使用方法参考 3.2 模板组件使用, 去掉组件导入的语句即可

// main.ts
import "@qingbing/ts-v3-md-editor/dist/style.css"
import { MdEditorPlugin } from '@qingbing/ts-v3-md-editor'
app.use(MdEditorPlugin)

4.2 模板组件使用

<template>
    <h1>Page</h1>
    <h2> editor</h2>
    <MdEditor v-model="text" :conf="mdEditorConf" />
    <MdEditor v-model="content" :conf="{ mode: 'mini' }" />
    <MdEditor v-model="content" :conf="{ mode: 'simple' }" />
    <MdEditor v-model="content" :conf="{ mode: 'normal' }" />
    <MdEditor v-model="content" />
    <hr>
    <MdPreview v-model="content" />
    <MdPreview v-model="content" :conf="mdPreviewConf" />
</template>
  
<script setup  lang="ts">
import 'md-editor-v3/lib/style.css'; // 编辑器样式
import 'md-editor-v3/lib/preview.css'; // 编辑器预览样式
import type { TMdEditorInnerError, TMdEditorProps, TMdEditorUploadImgCallBack, TMdPreviewProps } from "@qingbing/ts-v3-md-editor";
import { ref } from 'vue';
import { MdEditor, MdPreview } from "@qingbing/ts-v3-md-editor"; // 如果全局注册，这句直接删除

const mdEditorConf: TMdEditorProps = {
    mode: 'normal',
    // 内容变化事件（当前与textarea的oninput事件绑定，每输入一个单字即会触发）
    onChange: (v: string) => {
        console.log(v);
    },
    // 保存事件，快捷键与保存按钮均会触发
    onSave: (v: string, h: Promise<string>) => {
        console.log(v);
        h.then((html) => {
            console.log(html);
        });
    },
    // 上传图片事件，弹窗会等待上传结果，务必将上传后的 urls 作为 callback 入参回传
    onUploadImg: async (files: Array<File>, callback: TMdEditorUploadImgCallBack) => {
        const res = await Promise.all(
            files.map((file) => {
                return new Promise((rev, rej) => {
                    rev([
                        {
                            data: {
                                url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
                            }
                        },
                        {
                            data: {
                                url: 'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg'
                            }
                        },
                    ])
                    // const form = new FormData();
                    // form.append('file', file);
                    // axios
                    //     .post('/api/img/upload', form, {
                    //         headers: {
                    //             'Content-Type': 'multipart/form-data'
                    //         }
                    //     })
                    //     .then((res) => rev(res))
                    //     .catch((error) => rej(error));
                });
            })
        );
        // 方式一
        // callback(res.map((item) => item.data.url));
        callback(res.map((item) => 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'));

        // 方式二
        // callback(
        //     res.map((item: any) => ({
        //         url: item.data.url,
        //         alt: 'alt',
        //         title: 'title'
        //     }))
        // );
    },
    // 捕获执行错误事件，目前支持Cropper、fullscreen、prettier实例未加载完成操作，以及输入内容超出限制长度的错误
    onError: (err: TMdEditorInnerError) => {
        alert(err.message);
    },
    // 输入框失去焦点时触发事件
    onBlur: (event: FocusEvent) => {
        console.log('onBlur', event);
    },
    // 输入框获得焦点时触发事件
    onFocus: (event: FocusEvent) => { },
    // 输入框键入内容事件,
    onInput: (event: Event) => { },
    // 拖放内容事件
    onDrop: (event: DragEvent) => {
        event.stopPropagation();
        console.log('ee', event.dataTransfer?.files[0]);
    },
    // 调整输入框宽度事件
    onInputBoxWitdhChange: (width: string) => { },
}

const mdPreviewConf: TMdPreviewProps = {
    theme: 'dark',
    showCodeRowNumber: false
}
const content = ref("# title\n## sub title");
const text = ref("# Hello Editor\n```php\n$a = 5;\n$b = 6;\n$c = $a + $b\n```");
</script>