The Editor

The Editor是一个极简markdown编辑器。仅提供了几个核心的基础 API：getValue, getHTML, getTOC, setValue。配置选项也非常精简，能满足大部分的需求场景。

👉 体验一下 👈

特性

• 模块化
• 极简 API
• markdown 代码高亮
• markdown 代码折叠
• 图片上传（粘贴）
• 实时预览
• Table of content（TOC）支持

快速开始

通过 NPM 引入

安装

yarn add the-editor
// or
npm i the-editor

使用

const editor = new TheEditor(editorElement, options);
// options=可选，具体属性见下文

以vue为例

// main.js
import 'the-editor/dist/the-editor.css'; // 引入样式

// app.vue
<template>
  <div ref="editor">
</template>
<script>
import { TheEditor } from 'the-editor'

export default {
  mounted() {
    const editor = new TheEditor(this.$refs.editor, {
      value: '# Hello The Editor'
    })
  }
}
</script>

通过 jsdelivr 引入

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/[email protected]/dist/the-editor.min.css"
/>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/the-editor.min.js"></script>

选项列表

所有选项均为可选

| 选项 | 类型 | 默认值 | 描述 | | ----------- | ------- | ------ | ------------------------- | | value | string | null | markdown 文本 | | gfm | boolean | true | GitHub Flavoured Markdown | | lineNumbers | boolean | true | 是否显示行号 |

实例方法

| 方法 | 参数 | 返回值 | 描述 | | -------- | ------ | ------------------------------------------------------- | ------------------ | | setValue | string | void | 设置 markdown 文本 | | getValue | | string | 获取 markdown 文本 | | getHTML | | string | 获取 HTML 文本 | | getTOC | | Array<{ anchor: string; text: string; level: number; }> | 获取 TOC |