vue项目中使用markdown编辑器、富文本编辑器

 嵌入式MarkDown编辑器

1.Tui.editor 编辑器

1. Demo演示: https://nhn.github.io/tui.editor/latest/tutorial-example01-editor-basic

2. GitHub: GitHub - nhn/tui.editor: 🍞📝 Markdown WYSIWYG Editor. GFM Standard + Chart & UML Extensible.🍞📝 Markdown WYSIWYG Editor. GFM Standard + Chart & UML Extensible. - GitHub - nhn/tui.editor: 🍞📝 Markdown WYSIWYG Editor. GFM Standard + Chart & UML Extensible.https://github.com/nhn/tui.editor

2.SimpleMDE编辑器

1. Demo演示：https://simplemde.com

2. GitHub: GitHub - sparksuite/simplemde-markdown-editor: A simple, beautiful, and embeddable JavaScript Markdown editor. Delightful editing for beginners and experts alike. Features built-in autosaving and spell checking.A simple, beautiful, and embeddable JavaScript Markdown editor. Delightful editing for beginners and experts alike. Features built-in autosaving and spell checking. - GitHub - sparksuite/simplemde-markdown-editor: A simple, beautiful, and embeddable JavaScript Markdown editor. Delightful editing for beginners and experts alike. Features built-in autosaving and spell checking.https://github.com/sparksuite/simplemde-markdown-editor

3.mavibEditor编辑器

1. Demo演示: http://www.mavoneditor.com
2. GitHub: https://github.com/hinesboy/mavonEditor

4.Editor.md编辑器

1. Demo演示：https://pandao.github.io/editor.md

2. GitHub: https://github.com/pandao/editor.mdhttps://github.com/pandao/editor.md

5.react-md-editor编辑器

1. Demo演示: https://uiwjs.github.io/react-md-editor

2. GitHub：https://github.com/uiwjs/react-md-editorhttps://github.com/uiwjs/react-md-editor

分析对比

编辑器	源码许可	GitHub 点赞数	GitHub 分支量	最后更新日期	是否 推荐
Tui.editor	MIT License	14.8K	1.5K	2022-05-17	√
SimpleMDE	MIT License	9.1K	1.1K	2016-06-15	X
mavibEditor	MIT License	5.6K	870	2021-12-16	√
Editor.md	MIT License	12.2K	2.3K	2015-06-09	√
react-md-editor	MIT License	503	70	2022-06-14	X

编辑器	IE支持版本	自述文档	推荐/不推荐的理由
Tui.editor	IE 10+	自带详细	自定义内容丰富，功能在五个编辑器中较为全面、点赞量第一、并且频繁更新。
SimpleMDE	未知	自带详细	常用功能全面，并且可以支持图片的拖拽和自动保存，但根据网络上资料 存放base64格式的图片时可能会造成内存溢出的情况,虽然点赞量不少但是GitHub中更新状态处于停更并且支持的IE版本未说明。
mavibEditor	未知	自带详细	常用功能基本全面，并且国产编辑器，更新状态并不属于过长，同时可以适配PC端和移动端。
Editor.md	IE 8+	自带详细	国产编辑器，常用功能全面，自定义功能和主题非常多，支持主流的浏览器和Ipad等设备，GitHub上的点赞数和分支都很可观，但是更新最近是在2015年。
react-md-editor	未知	未在GitHub上找到自述文件，但GitHub和官网有使用说明	在GitHub中自述（介绍）文档是空的，如果需要查看详细说明建议去官网进行查看，点赞和分支数量较少，但是最近还在更新，编辑器同时支持编辑、预览、编辑+实时预览模式任意切换，是基于React 16+的UI组件库搭建的。

markdown编辑器

一、 安装

 npm install mavon-editor --save

二、引入、配置

// 导入组件 及 组件样式
import { mavonEditor } from "mavon-editor";
import "mavon-editor/dist/css/index.css";

三、使用

//绑定model
//实时改变：将markdown实时转化为html
<template>
 <!-- markdown文档 -->
        <el-form-item label="正文" prop="region" >
          <mavon-editor
            v-model="content"
            ref="md"
            @change="change"
            style="min-height: 550px; width: 811px"
          />
        </el-form-item>
</template>


//js代码
<script>
 import { mavonEditor } from "mavon-editor";
 import "mavon-editor/dist/css/index.css";

export default {
    // 注册
    components: {
        mavonEditor,
    },

    data() {
        return {
            content:'', // 输入的markdown
            html:'',    // 及时转的html
        }
    },

    methods: {
        // 所有操作都会被解析重新渲染
        change(value, render){
            // render 为 markdown 解析后的结果[html]
            this.html = render;
        },
    },
}

四、效果图

富文本编辑器（vue2）

一、 安装

yarn add @wangeditor/editor
# 或者 npm install @wangeditor/editor --save

yarn add @wangeditor/editor-for-vue
# 或者 npm install @wangeditor/editor-for-vue --save

二、引入、配置

可以直接引入样式，也可以在script后引入<style src="@wangeditor/editor/dist/css/style.css"></style>

// 富文本编辑器
import "@wangeditor/editor/dist/css/style.css";
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";

三、使用 

 <template>
<!-- 富文本编辑器 -->
        <el-form-item label="正文" prop="region" v-show="isShow">
          <div style="border: 1px solid #ccc; min-height: 550px; width: 811px">
            <Toolbar
              style="border-bottom: 1px solid #ccc"
              :editor="editor"
              :defaultConfig="toolbarConfig"
              :mode="mode"
            />
            <Editor
              style="height: 500px; overflow-y: hidden"
              v-model="html"
              :defaultConfig="editorConfig"
              :mode="mode"
              @onCreated="onCreated"
            />
          </div>
        </el-form-item>
</template>


//js代码
<script>
import "@wangeditor/editor/dist/css/style.css";
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
 
export default {
    // 注册
    components: {
        Editor,
        Toolbar,
    },

    data() {
        return {
            editor: null,
            html: "<p>hello</p>",
            toolbarConfig: {},
            editorConfig: { placeholder: "请输入内容..." },
        }
    },

    methods: {
        onCreated(editor) {
            this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
        },
    },
    mounted() {
        // 模拟 ajax 请求，异步渲染编辑器
        setTimeout(() => {
            this.html = '<p>模拟 Ajax 异步设置内容 HTML</p>'
        }, 1500)
    },
    beforeDestroy() {
        const editor = this.editor
        if (editor == null) return
        editor.destroy() // 组件销毁时，及时销毁编辑器
    }

}

四、效果图