1、cherry-markdown介绍

官网地址

# 官方网站
https://github.com/Tencent/cherry-markdown/wiki/
# 镜像网站
https://gitee.com/mirrors/CherryMarkdown.git

简介

cherry markdown是一款**前端**-**markdown**-**编辑器**-**组件**：
- 前端：本项目只有前端工程，没有提供后台服务代码
- markdown：写markdown的
- 编辑器：由**工具栏**、**编辑区**、**预览区**、**解析引擎**四部分组成
- 组件：提供自定义工具栏、自定义语法以及各种api

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

开箱即用

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

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

2、安装cherry-markdown

npm install cherry-markdown --save

完整模式

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

使用轻量版本

因 mermaid 库尺寸非常大，Cherry 构建产物中包含了不内置 mermaid 的核心构建包，可按以下方式引入核心构建。

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

3、轻量级模式的Vue3代码demo

<template>
    <div>
        <div><h1>markdown演示</h1></div>
        <div>
            <div id="markdown-container"></div>
        </div>
        <div style="margin-top: 20px;">
            <el-button type="primary" @click="onSubmit">提交</el-button>
        </div>
    </div>
</template>

<script setup lang="ts">
import "cherry-markdown/dist/cherry-markdown.css";
import Cherry from "cherry-markdown/dist/cherry-markdown.core";
import { onMounted, ref } from "vue";

const cherryInstance = ref(null);

const onSubmit = () => {
    let md = cherryInstance.value.getMarkdown();
    console.log(md);
};

onMounted(() => {
    cherryInstance.value = new Cherry({
        id: "markdown-container",
        value: "# welcome to cherry editor!",
    });
});
</script>

<style scoped></style>