介绍

Cherry Markdown Editor 是一款 Javascript Markdown 编辑器，具有开箱即用、轻量简洁、易于扩展等特点. 它可以运行在浏览器或服务端(NodeJs).

开箱即用

开发者可以使用非常简单的方式调用并实例化 Cherry Markdown 编辑器，实例化的编辑器默认支持大部分常用的 markdown 语法（如标题、目录、流程图、公式等）。

易于拓展

当 Cherry Markdown 编辑器支持的语法不满足开发者需求时，可以快速的进行二次开发或功能扩展。同时，CherryMarkdown 编辑器应该由纯 JavaScript 实现，不应该依赖 angular、vue、react 等框架技术，框架只提供容器环境即可。

更多Cherry Markdown Editor介绍请移步官方仓库：https://github.com/Tencent/cherry-markdown/blob/main/README.CN.md

下面开始集成教程：

安装

通过 yarn

yarn add cherry-markdown

通过 npm

npm install cherry-markdown --save

在pages目录下新建一个文件markdown.vue 然后使用写入以下代码。

<script setup>
</script>

<template>
  <div id="markdown-container"></div>
  <h1 style="text-align: center;color: #bbb">
    Welcome to the online markdown editor!
  </h1>
</template>

<script>
import 'cherry-markdown/dist/cherry-markdown.css';

// 这一步非常重要！！！SSR模式必须这么写
let Cherry;
if (process.client) {
  import("cherry-markdown").then((module) => {
    Cherry = module.default;
    new Cherry({
      id: 'markdown-container',
      value: '# Welcome to the online markdown editor!',
      editor: {
        codemirror: {
          // depend on codemirror theme name: https://codemirror.net/demo/theme.html
          // 自行导入主题文件: `import 'codemirror/theme/<theme-name>.css';`
          theme: 'default',
        },
        // 编辑器的高度，默认100%，如果挂载点存在内联设置的height则以内联样式为主
        height: '50rem',
        // defaultModel 编辑器初始化后的默认模式，一共有三种模式：1、双栏编辑预览模式；2、纯编辑模式；3、预览模式
        // edit&preview: 双栏编辑预览模式
        // editOnly: 纯编辑模式（没有预览，可通过toolbar切换成双栏或预览模式）
        // previewOnly: 预览模式（没有编辑框，toolbar只显示“返回编辑”按钮，可通过toolbar切换成编辑模式）
        defaultModel: 'edit&preview',
        // 粘贴时是否自动将html转成markdown
        convertWhenPaste: true,
      },
      toolbars: {
        toolbar: [
          'bold',
          'italic',
          {
            strikethrough: ['strikethrough', 'underline', 'sub', 'sup', 'ruby', 'customMenuAName'],
          },
          'size',
          '|',
          'color',
          'header',
          'ol',
          'ul',
          'checklist',
          'panel',
          'justify',
          'detail',
          '|',
          'formula',
          {
            insert: ['image', 'audio', 'video', 'link', 'hr', 'br', 'code', 'formula', 'toc', 'table',
              'pdf', 'word', 'ruby'],
          },
          'graph',
          'togglePreview',
          'settings',
          'codeTheme',
          'export',
          'theme',
        ],
        toolbarRight: ['fullScreen'],
      }
    });
  });
}
export default {
  name: "markdown"
}

</script>

<style scoped>

</style>

完成