/the-editor

A simple markdown editor

Primary LanguageTypeScriptMIT LicenseMIT

The Editor

build version miniziped total downloads

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/the-editor@0.1.0/dist/the-editor.min.css"
/>
<script src="https://cdn.jsdelivr.net/npm/the-editor@0.1.0/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