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

官网：https://github.com/Tencent/cherry-markdown/blob/main/README.CN.md

api：Cherry Markdown API

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

1.下载 （一定要指定版本0.8.22，否则会报错： [vitel Internal server error: Failed to parse soERRORrce for import analysis because the content contains invalid Js syntax. If you are using JSX, make sure to name the file with the...）

npm i cherry-markdown@0.8.22

如果需要开启 mermaid 画图、表格自动转图表功能，需要同时添加mermaid 与echarts包。

目前Cherry推荐的插件版本为echarts@5.3.3、mermaid@9.4.3

# 安装mermaid依赖开启mermaid画图功能

npm i mermaid@9.4.3

# 安装echarts依赖开启表格自动转图表功能

npm i echarts@5.3.3

基础应用代码示例

<template>
    <div @click.prevent.stop>
          <div id="markdown-container"></div>
    </div>
</template>

<script>
import 'cherry-markdown/dist/cherry-markdown.css';
import Cherry from 'cherry-markdown';
const cherryInstance = new Cherry({
  id: 'markdown-container',
  value: '# welcome to cherry editor!',
});
</script>

关于 mermaid（插件注册必须在Cherry实例化之前完成）

核心构建包不包含 mermaid 依赖，需要手动引入相关插件。

import 'cherry-markdown/dist/cherry-markdown.css';
import Cherry from 'cherry-markdown/dist/cherry-markdown.core';
import CherryMermaidPlugin from 'cherry-markdown/dist/addons/cherry-code-block-mermaid-plugin';
import mermaid from 'mermaid';

// 插件注册必须在Cherry实例化之前完成
Cherry.usePlugin(CherryMermaidPlugin, {
  mermaid, // 传入mermaid引用
  // mermaidAPI: mermaid.mermaidAPI, // 也可以传入mermaid API
  // 同时可以在这里配置mermaid的行为，可参考mermaid官方文档
  // theme: 'neutral',
  // sequence: { useMaxWidth: false, showSequenceNumbers: true }
});

const cherryInstance = new Cherry({
  id: 'markdown-container',
  value: '# welcome to cherry editor!',
});

2.附上组件代码

<template>
  <div @click.prevent.stop style="position: relative; width: 100%; height: 100%; z-index: 9999999999;text-align: left;">

    <!-- ------- markdown组件容器 --------- -->
    <div ref="markdownContainerRef" :id="mdId" class="cherry_container scroll"
      :style="{ 'left': toc_Visiable ? '262px' : '0px' }" @scroll="onScroll">
    </div>

    <!-- ------- 显示目录 --------- -->
    <!-- <div class="toc_container" v-show="toc_Visiable">
      <div class="toc_header">目录</div>
      <div class="toc_list">
        <div v-for="(link, index) in toc_List" :key="link.id" class="toc_list_container"
          :style="{ 'padding-left': link.level * 20 + 'px' }" @click="jump(index)">{
  { link.text }}
        </div>
      </div>
    </div>
    <div class="top-contrl">
      <div v-if="!toc_Visiable" @click="showToc(true)">显示目录</div>
      <div v-else @click="showToc(false)">隐藏目录</div>
    </div> -->
  </div>
</template>

<script setup>
import { ref, onMounted, onBeforeMount, watch, onBeforeUnmount, toRefs, reactive, nextTick } from 'vue';
import Axios from 'axios';
import 'cherry-markdown/dist/cherry-markdown.css';
import Cherry from 'cherry-m