devbox
weixin_40725706
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

vue3中使用cherry-markdown

作者：weixin_40725706 | 2024-05-16 21:54:50

赞

踩

vue3中使用cherry-markdown

附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

基础应用代码示例

  1. <template>
  2.     <div @click.prevent.stop>
  3.           <div id="markdown-container"></div>
  4.     </div>
  5. </template>
  6.  
  7. <script>
  8. import 'cherry-markdown/dist/cherry-markdown.css';
  9. import Cherry from 'cherry-markdown';
  10. const cherryInstance = new Cherry({
  11.   id: 'markdown-container',
  12.   value: '# welcome to cherry editor!',
  13. });
  14. </script>

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

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

  1. import 'cherry-markdown/dist/cherry-markdown.css';
  2. import Cherry from 'cherry-markdown/dist/cherry-markdown.core';
  3. import CherryMermaidPlugin from 'cherry-markdown/dist/addons/cherry-code-block-mermaid-plugin';
  4. import mermaid from 'mermaid';
  5.  
  6. // 插件注册必须在Cherry实例化之前完成
  7. Cherry.usePlugin(CherryMermaidPlugin, {
  8.   mermaid, // 传入mermaid引用
  9.   // mermaidAPI: mermaid.mermaidAPI, // 也可以传入mermaid API
  10.   // 同时可以在这里配置mermaid的行为，可参考mermaid官方文档
  11.   // theme: 'neutral',
  12.   // sequence: { useMaxWidth: false, showSequenceNumbers: true }
  13. });
  14.  
  15. const cherryInstance = new Cherry({
  16.   id: 'markdown-container',
  17.   value: '# welcome to cherry editor!',
  18. });

2.附上组件代码

  1. <template>
  2.   <div @click.prevent.stop style="position: relative; width: 100%; height: 100%; z-index: 9999999999;text-align: left;">
  3.  
  4.     <!-- ------- markdown组件容器 --------- -->
  5.     <div ref="markdownContainerRef" :id="mdId" class="cherry_container scroll"
  6.       :style="{ 'left': toc_Visiable ? '262px' : '0px' }" @scroll="onScroll">
  7.     </div>
  8.  
  9.     <!-- ------- 显示目录 --------- -->
  10.     <!-- <div class="toc_container" v-show="toc_Visiable">
  11.       <div class="toc_header">目录</div>
  12.       <div class="toc_list">
  13.         <div v-for="(link, index) in toc_List" :key="link.id" class="toc_list_container"
  14.           :style="{ 'padding-left': link.level * 20 + 'px' }" @click="jump(index)">{{ link.text }}
  15.         </div>
  16.       </div>
  17.     </div>
  18.     <div class="top-contrl">
  19.       <div v-if="!toc_Visiable" @click="showToc(true)">显示目录</div>
  20.       <div v-else @click="showToc(false)">隐藏目录</div>
  21.     </div> -->
  22.   </div>
  23. </template>
  24.  
  25. <script setup>
  26. import { ref, onMounted, onBeforeMount, watch, onBeforeUnmount, toRefs, reactive, nextTick } from 'vue';
  27. import Axios from 'axios';
  28. import 'cherry-markdown/dist/cherry-markdown.css';
  29. import Cherry from 'cherry-markdown'
  30. // import Cherry from 'cherry-markdown/dist/cherry-markdown.core';
  31. import * as echarts from "echarts";
  32. import pinyin from '../assets/pinyinHelper.js';  // 引入pinyin函数
  33. import CherryMermaidPlugin from 'cherry-markdown/dist/addons/cherry-code-block-mermaid-plugin';
  34. import mermaid from 'mermaid';
  35. // 组件传值
  36. const props = defineProps({
  37.   // markdown文本
  38.   markDownConent: {
  39.     type: String,
  40.     default: '',
  41.   },
  42.   // markdown组件容器ID
  43.   mdId: {
  44.     type: String,
  45.     default: 'markdownContainer',
  46.   },
  47.   // 编辑器的显示模式 view|edit
  48.   displayModal: {
  49.     type: String,
  50.     default: 'view',
  51.   },
  52.   // 用来控制目录显示或隐藏
  53.   tocVisiable: {
  54.     type: Boolean,
  55.     default: true,
  56.   },
  57.  
  58. });
  59. const emit = defineEmits(['input', 'md-change']);
  60. const { mdId, displayModal, tocVisiable, markDownConent } = toRefs(props);
  61.  
  62.  
  63. // 组件内部变量
  64. const content = ref('');
  65. const markdownContainerRef = ref(null); //dom 元素
  66. const markDown_Conent = ref('');
  67. const toc_Visiable = ref(tocVisiable.value); //目录 显隐
  68. const cherrInstance = ref(null); //Cherry MarkDown实例
  69.  
  70. const initCherryMD = async (value) => {
  71.   markDown_Conent.value = value || markDownConent.value;
  72.   cherrInstance.value = new Cherry({
  73.     id: mdId.value,
  74.     value: markDown_Conent.value,
  75.     externals: {
  76.       echarts: echarts,
  77.     },
  78.     fileUpload,
  79.     callback: {
  80.       changeString2Pinyin: pinyin,
  81.       // afterChange,
  82.       afterInit,
  83.       beforeImageMounted,
  84.       onClickPreview: function (e) {
  85.         const { target } = e;
  86.         if (target.tagName === 'IMG') {
  87.           console.log('click img', target);
  88.           const tmp = new Viewer(target, {
  89.             button: false,
  90.             navbar: false,
  91.             title: [1, (image, imageData) => `${image.alt.replace(/#.+$/, '')} (${imageData.naturalWidth} × ${imageData.naturalHeight})`],
  92.             hidden() {
  93.               tmp.destroy()
  94.             },
  95.           });
  96.           tmp.show();
  97.         }
  98.       }
  99.     },
  100.     toolbars: {
  101.       showToolbar:displayModal.value=="previewOnly"?false:true,
  102.       toolbar: ['bold', 'italic', 'strikethrough', '|', 'color', 'header', 'ruby', '|', 'list', 'panel', 'detail'],
  103.       // 定义侧边栏，默认为空
  104.       sidebar: [],
  105.       // 定义顶部右侧工具栏，默认为空
  106.       toolbarRight: [],
  107.       // 定义选中文字时弹出的“悬浮工具栏”，默认为 ['bold', 'italic', 'underline', 'strikethrough', 'sub', 'sup', 'quote', '|', 'size', 'color']
  108.       bubble: false,
  109.       // 定义光标出现在行首位置时出现的“提示工具栏”，默认为 ['h1', 'h2', 'h3', '|', 'checklist', 'quote', 'table', 'code']
  110.       float: false,
  111.       // 定义顶部工具栏
  112.       toolbar: [
  113.         'bold',
  114.         'italic',
  115.         {
  116.           strikethrough: ['strikethrough', 'underline', 'sub', 'sup', 'ruby', 'boldAndItalicName'],
  117.         },
  118.         'size',
  119.         '|',
  120.         'color',
  121.         'header',
  122.         '|',
  123.         'ol',
  124.         'ul',
  125.         'checklist',
  126.         'panel',
  127.         'justify',
  128.         'detail',
  129.         '|',
  130.         'formula',
  131.         {
  132.           insert: ['image', 'audio', 'video', 'link', 'hr', 'br', 'code', 'formula', 'toc', 'table', 'pdf', 'word', 'ruby'],
  133.         },
  134.         'graph',
  135.         'togglePreview',
  136.         'settings',
  137.         'codeTheme',
  138.         'export',
  139.         // {
  140.         //   customMenuBName: ['ruby', 'audio', 'video', 'boldAndItalicName'],
  141.         // },
  142.         // 'customMenuCName',
  143.         'theme',
  144.       ],
  145.       // 定义侧边栏，默认为空
  146.       sidebar: ['mobilePreview', 'copy', 'theme'],
  147.       // 定义顶部右侧工具栏，默认为空
  148.       toolbarRight: ['fullScreen', '|'],
  149.  
  150.       // 定义选中文字时弹出的“悬浮工具栏”，默认为 ['bold', 'italic', 'underline', 'strikethrough', 'sub', 'sup', 'quote', '|', 'size', 'color']
  151.       bubble: ['bold', 'italic', 'underline', 'strikethrough', 'sub', 'sup', 'quote', 'ruby', '|', 'size', 'color'], // array or false
  152.       showToolbar: true,
  153.       // 定义光标出现在行首位置时出现的“提示工具栏”，默认为 ['h1', 'h2', 'h3', '|', 'checklist', 'quote', 'table', 'code']
  154.       // float: false,
  155.       toc: {
  156.         updateLocationHash: false, // 要不要更新URL的hash
  157.         defaultModel: 'full', // pure: 精简模式/缩略模式，只有一排小点； full: 完整模式，会展示所有标题
  158.       },
  159.       customMenu: {
  160.         boldAndItalicName: boldAndItalic,
  161.         customMenuBName: customMenuB,
  162.         customMenuCName: customMenuC,
  163.       },
  164.     },
  165.  
  166.     editor: {
  167.       id: `${mdId.value}editor`,
  168.       name: 'cherry-text',
  169.       autoSave2Textarea: true,
  170.       defaultModel: displayModal.value,
  171.     },
  172.     previewer: {
  173.       // 自定义markdown预览区域class
  174.       // className: 'markdown'
  175.     },
  176.     // 预览页面不需要绑定事件
  177.     isPreviewOnly: false,
  178.     // 预览区域跟随编辑器光标自动滚动
  179.     autoScrollByCursor: true,
  180.     // 外层容器不存在时，是否强制输出到body上
  181.     forceAppend: true,
  182.     // The locale Cherry is going to use. Locales live in /src/locales/
  183.     locale: 'zh_CN',
  184.     keydown: [],
  185.  
  186.     // cherry初始化后是否检查 location.hash 尝试滚动到对应位置
  187.     autoScrollByHashAfterInit: false,
  188.   });
  189. };
  190.  
  191.  
  192.  
  193.  
  194.  
  195. /**
  196.  * 自定义一个自定义菜单
  197.  * 点第一次时，把选中的文字变成同时加粗和斜体
  198.  * 保持光标选区不变，点第二次时，把加粗斜体的文字变成普通文本
  199.  */
  200. const boldAndItalic = Cherry.createMenuHook('加粗斜体', {
  201.   iconName: 'font',
  202.   onClick: function (selection) {
  203.     // 获取用户选中的文字，调用getSelection方法后，如果用户没有选中任何文字，会尝试获取光标所在位置的单词或句子
  204.     let $selection = this.getSelection(selection) || '同时加粗斜体';
  205.     // 如果是单选，并且选中内容的开始结束内没有加粗语法，则扩大选中范围
  206.     if (!this.isSelections && !/^\s*(\*\*\*)[\s\S]+(\1)/.test($selection)) {
  207.       this.getMoreSelection('***', '***', () => {
  208.         const newSelection = this.editor.editor.getSelection();
  209.         const isBoldItalic = /^\s*(\*\*\*)[\s\S]+(\1)/.test(newSelection);
  210.         if (isBoldItalic) {
  211.           $selection = newSelection;
  212.         }
  213.         return isBoldItalic;
  214.       });
  215.     }
  216.     // 如果选中的文本中已经有加粗语法了，则去掉加粗语法
  217.     if (/^\s*(\*\*\*)[\s\S]+(\1)/.test($selection)) {
  218.       return $selection.replace(/(^)(\s*)(\*\*\*)([^\n]+)(\3)(\s*)($)/gm, '$1$4$7');
  219.     }
  220.     /**
  221.      * 注册缩小选区的规则
  222.      *    注册后，插入“***TEXT***”，选中状态会变成“***【TEXT】***”
  223.      *    如果不注册，插入后效果为：“【***TEXT***】”
  224.      */
  225.     this.registerAfterClickCb(() => {
  226.       this.setLessSelection('***', '***');
  227.     });
  228.     return $selection.replace(/(^)([^\n]+)($)/gm, '$1***$2***$3');
  229.   }
  230. });
  231. /**
  232.  * 定义一个空壳，用于自行规划cherry已有工具栏的层级结构
  233.  */
  234. const customMenuB = Cherry.createMenuHook('实验室', {
  235.   iconName: '',
  236. });
  237. /**
  238.  * 定义一个自带二级菜单的工具栏
  239.  */
  240. const customMenuC = Cherry.createMenuHook('帮助中心', {
  241.   iconName: 'question',
  242.   onClick: (selection, type) => {
  243.     switch (type) {
  244.       case 'shortKey':
  245.         console.log("
    声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/weixin_40725706/article/detail/580649
    推荐阅读
    相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。