嵌入式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.icon-default.png?t=N7T8https://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.icon-default.png?t=N7T8https://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.mdicon-default.png?t=N7T8https://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-editoricon-default.png?t=N7T8https://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() // 组件销毁时,及时销毁编辑器
    }

}

四、效果图

Logo

前往低代码交流专区

更多推荐