vue3使用cherry-markDown

附cherry-markDown官网及api使用示例

官网：GitHub - Tencent/cherry-markdown: ✨ A Markdown Editor

api：Cherry Markdown API

考虑到复用性，我在插件的基础上做了二次封装，步骤如下：

1.下载  npm install cherry-markdown --save

2..先在html中定义一个markDown容器，设置id及样式

1.  
   <template>
2.  
   <div v-loading="loading" element-loading-text="文件上传中...">
3.  
   <div @click.prevent.stop>
4.  
   <div :id="mdId" :style="{ height: height 'px' }"></div>
5.  
   </div>
6.  
   </div>
7.  
   </template>

3.在js中引入markDown

1.  
   import Cherry from "cherry-markdown";
2.  
   import "cherry-markdown/dist/cherry-markdown.min.css";

4.定义需要使用的变量并初始化markDown

（一部分是从父组件传过来的，loading是在上传图片/视频/附件的时候使用）

1.  
   const props = defineProps({
2.  
   height: {
3.  
   type: Number,
4.  
   default: 600,
5.  
   },
6.  
   modelValue: {
7.  
   type: String,
8.  
   default: "",
9.  
   },
10.  
    knwlgId: {
11.  
    type: String,
12.  
    default: "",
13.  
    },
14.  
    mdId: {
15.  
    type: String,
16.  
    default: "markdown-container",
17.  
    },
18.  
    });
19.  
    const emits = defineEmits(["update:modelValue", "setHtml"]);
20.  
    const cherrInstance = ref(null);
21.  
    const loading = ref(false);
22.  
     
23.  
    onMounted(() => {
24.  
    //初始化markDown
25.  
    initCherryMD();
26.  
    });

5.初始化markDown

toolbars.toolbar内的togglePreview就是预览按钮

设置默认模式：editor.defaultModel

// defaultModel 编辑器初始化后的默认模式，一共有三种模式：1、双栏编辑预览模式；2、纯编辑模式；3、预览模式

// edit&preview: 双栏编辑预览模式

// editOnly: 纯编辑模式（没有预览，可通过toolbar切换成双栏或预览模式）

// previewOnly: 预览模式（没有编辑框，toolbar只显示“返回编辑”按钮，可通过toolbar切换成编辑模式）

// defaultModel: 'edit&preview',

1.  
   const initCherryMD = (value, config) => {
2.  
   cherrInstance.value = new Cherry({
3.  
   id: props.mdId,
4.  
   value: props.modelValue,
5.  
   fileUpload: fileUpload,
6.  
   emoji: {
7.  
   useUnicode: true,
8.  
   },
9.  
   header: {
10.  
    anchorStyle: "autonumber",
11.  
    },
12.  
    editor: {
13.  
    defaultModel: "editOnly",
14.  
    },
15.  
    toolbars: {
16.  
    theme: "light",
17.  
    toolbar: [
18.  
    "bold",
19.  
    "italic",
20.  
    "underline",
21.  
    "strikethrough",
22.  
    "|",
23.  
    "color",
24.  
    "header",
25.  
    "|",
26.  
    "list",
27.  
    "image",
28.  
    {
29.  
    insert: [
30.  
    "audio",
31.  
    "video",
32.  
    "link",
33.  
    "hr",
34.  
    "br",
35.  
    "code",
36.  
    "formula",
37.  
    "toc",
38.  
    "table",
39.  
    "line-table",
40.  
    "bar-table",
41.  
    "pdf",
42.  
    "word",
43.  
    ],
44.  
    },
45.  
    "graph",
46.  
    "settings",
47.  
    // "switchModel",
48.  
    "togglePreview",
49.  
    ],
50.  
    bubble: [
51.  
    "bold",
52.  
    "italic",
53.  
    "underline",
54.  
    "strikethrough",
55.  
    "sub",
56.  
    "sup",
57.  
    "|",
58.  
    "size",
59.  
    "color",
60.  
    ],
61.  
    float: [
62.  
    "h1",
63.  
    "h2",
64.  
    "h3",
65.  
    "|",
66.  
    "checklist",
67.  
    "quote",
68.  
    "quickTable",
69.  
    "code",
70.  
    ],
71.  
    customMenu: [],
72.  
    },
73.  
    callback: {
74.  
    afterChange: afterChange,
75.  
    beforeImageMounted: beforeImageMounted,
76.  
    },
77.  
    });
78.  
    };

6.定义上传图片、获取数据的方法（这里可以实际需求做判断）

1.  
   // 上传通用接口未实现audioVideo
2.  
   const fileUpload = (file, callback) => {
3.  
   if (file.size / 1024 / 1024 > 200) {
4.  
   return proxy.$modal.msgError("请上传200M以内的图片！");
5.  
   }
6.  
   if (!file.type.includes("image")) {
7.  
   return proxy.$modal.msgError("仅支持上传图片！");
8.  
   }
9.  
   const formData = new FormData();
10.  
    formData.append("file", file);
11.  
    console.log(file, "file");
12.  
    loading.value = true;
13.  
    uploadImg(props.knwlgId, formData)
14.  
    .then((res) => {
15.  
    loading.value = false;
16.  
    callback(
17.  
    import.meta.env.VITE_APP_BASE_API
18.  
    "/ekms/images/v1/preview/"
19.  
    res.data.imgId
20.  
    );
21.  
    })
22.  
    .catch(() => {
23.  
    loading.value = false;
24.  
    });
25.  
    };
26.  
     
27.  
    // 变更事件回调
28.  
    const afterChange = (e) => {
29.  
    emits("setHtml", getCherryContent(), getCherryHtml());
30.  
    };
31.  
     
32.  
    // 获取渲染后html内容
33.  
    const getCherryHtml = () => {
34.  
    const result = cherrInstance.value.getHtml();
35.  
    // console.log(result, "get");
36.  
    return result;
37.  
    };
38.  
     
39.  
    // 获取markdown内容
40.  
    const getCherryContent = () => {
41.  
    const result = cherrInstance.value.getMarkdown();
42.  
    return result;
43.  
    };
44.  
     
45.  
    // 设置markdown内容
46.  
    const setCherryContent = (val) => {
47.  
    cherrInstance.value.setMarkdown(val, 1);
48.  
    };
49.  
     
50.  
    // 图片加载回调
51.  
    const beforeImageMounted = (e, src) => {
52.  
    return { [e]: src };
53.  
    };
54.  
    defineExpose({
55.  
    getCherryHtml,
56.  
    setCherryContent,
57.  
    });

使用该组件：

1.  
   <CherryMD
2.  
   ref="MDRef"
3.  
   v-model="mdContent"
4.  
   :knwlgId="artDetails.pkId"
5.  
   @setHtml="getContent"
6.  
   />
7.  
    
8.  
   const mdContent = ref("");
9.  
   //设置默认值
10.  
    mdContent.value = res.data.content;
11.  
    nextTick(() => {
12.  
    proxy.$refs.MDRef.setCherryContent(res.data.content || "");
13.  
    });
14.  
     
15.  
    // 获取文章结构信息
16.  
    const getContent = (content, html) => {
17.  
    mdHtml.value = html;
18.  
    mdContent.value = content;
19.  
    changeArticle();
20.  
    };

这篇好文章是转载于：学新通技术网