快速上手

npm install kyle-editor

# 使用 Vue 组件的项目，再把 Vue 显式装上
npm install kyle-editor vue@^3

<!-- unpkg / jsdelivr 的默认入口就是压缩版，下面两种写法等价 -->
<script src="https://unpkg.com/kyle-editor"></script>
<script src="https://unpkg.com/kyle-editor/dist/keditor.umd.min.js"></script>

<div id="editor"></div>
<script src="https://unpkg.com/kyle-editor/dist/keditor.umd.min.js"></script>
<script>
  const editor = KEditor.create('#editor', {
    placeholder: '开始撰写内容，支持拖拽 / 粘贴图片与视频…',
    // 高度默认随内容自动撑开；想要固定高度 + 内部滚动就写上 height: 460
  })

  editor.on('change', ({ html }) => console.log(html))
</script>

import KEditor from 'kyle-editor'

const editor = KEditor.create('#editor')  // 高度默认自适应内容

import { createApp } from 'vue'
import KEditorVue from 'kyle-editor/vue'

createApp(App).use(KEditorVue).mount('#app')

<template>
  <k-editor v-model="form.content" :options="options" :disabled="saving" @upload="onUpload" />
</template>

<script setup>
import { ref } from 'vue'

const form = ref({ content: '' })
const saving = ref(false)

const options = {
  // 不写 height 就是自适应内容高度；写了则固定高度、内容超出时编辑区内部滚动
  height: 420,
  // 无后端时保持默认 'mock'；上线时换成下面两行即可
  uploader: '/api/upload',              // 普通上传：整个文件一次请求
  chunkUploader: '/api/chunk-upload',   // 分片上传：大文件自动切片（≥ 5MB）
  upload: { mode: 'auto', chunkSize: 5 * 1024 * 1024, concurrency: 4 },
}

const onUpload = (payload) => console.log(payload.stage, payload.percent)
</script>

const editor = KEditor.create('#editor', {
  value: '<p>初始内容</p>',
  placeholder: '开始撰写内容…',
  primaryColor: '#07c160',
  height: 0,                 // 自适应内容高度
  paperWidth: 677,           // 公众号正文版心
  wordCount: true,

  uploader: '/api/upload',
  chunkUploader: '/api/chunk-upload',

  code: { defaultLanguage: 'javascript' },
  markdown: { insertMode: 'replace' },

  toolbar: [
    'undo', 'redo', '|',
    'heading', 'fontsize', '|',
    'bold', 'italic', 'underline', 'strike', '|',
    'foreColor', 'backColor', '|',
    'alignLeft', 'alignCenter', 'alignRight', '|',
    'ul', 'ol', 'quote', '|',
    'link', 'image', 'video', 'table', 'code', 'hr', 'clear',
    ':tail', 'markdown', 'source', 'fullscreen',
  ],

  onUpload: ({ stage, percent }) => console.log(stage, percent),
})

KEditor.create('#editor', {
  uploader: '/api/upload',                        // 普通上传（整个文件一次请求）
  chunkUploader: '/api/chunk-upload',             // 分片上传（切片并发）
  upload: {
    mode: 'auto',                                 // 'auto' 按体积自动选（默认）| 'normal' | 'chunk'
    chunkThreshold: 5 * 1024 * 1024,              // auto：达到该体积才走分片
    chunkSize: 1024 * 1024,                       // 分片大小
    concurrency: 4,                               // 并发分片数
    retries: 2,                                   // 单片失败重试次数
  },
})

KEditor.create('#editor', {
  chunkUploader: {
    type: 'http',
    url: '/api/chunk-upload',
    fieldName: 'chunk',                                         // 默认 'file'
    headers: () => ({ Authorization: `Bearer ${getToken()}` }), // 传函数则每次请求实时取值
    withCredentials: true,
    parse: (json) => json.data,                                 // 默认 json.data ?? json
    pickUrl: (json) => json?.payload?.filePath || '',           // 默认认 url / fileUrl / src
    mode: 'formdata',                                           // 默认 formdata；可换 'raw'
  },
})

uploader: '/api/upload'                                   // 字符串地址
uploader: { type: 'http', url: '/api/upload' }            // 显式写法
uploader: KEditor.httpAdapter({ url: '/api/upload' })     // 自己造适配器
uploader: KEditor.simpleAdapter(async (file) => myUpload(file))  // 函数包装
uploader: async (file) => (await myUpload(file)).url      // 直接给函数也可以
uploader: 'mock'                                          // 零后端，生成 blob: 地址
uploader: KEditor.mockAdapter({ speed: 8 })               // mock 可调速度 / 延迟 / 失败率

KEditor.create('#editor', {
  markdown: {
    insertMode: 'replace',     // 默认落点：replace 替换全文 / append 追加文末 / cursor 插入光标
    maxSize: 5 * 1024 * 1024,  // 单文件上限（字节），0 = 不限制
    gfm: true,                 // 表格 / 删除线 / 任务列表 / 裸链接
    breaks: false,             // true = 段落内单换行也当硬换行
    linkTarget: false,         // true 或 '_blank' = 外链自动加 target + rel
    frontMatter: true,         // 丢弃开头的 YAML front matter
  },
})

await editor.importMarkdown(mdText)                   // 按 options.markdown.insertMode 落点
await editor.importMarkdown(file, { mode: 'append' }) // 临时指定落点
await editor.setMarkdown(mdText)                      // 替换全文
await editor.insertMarkdown(mdText)                   // 插入光标处
await editor.appendMarkdown(mdText)                   // 追加到文末

editor.markdownOptions()   // { insertMode: 'replace', maxSize: 5242880, auto: true }

editor.on('markdownimport', ({ mode, name, summary }) => {
  console.log(mode, name, summary)
})

KEditor.create('#editor', {
  code: {
    languages: ['js', 'python', 'go', 'sql'], // 只留几种（主名或别名都认）；不写 = 全部 20 种
    defaultLanguage: 'python',                // 新建代码块默认语言
    highlight: true,                          // false = 只保留纯文本，语言标记照写
  },
})

editor.insertCode('const a = 1', 'js')   // 插入代码块（语言可省，用 defaultLanguage）
editor.setCodeLanguage('sql')            // 改写光标所在块的语言
editor.getCodeLanguage()                 // 不在块内返回 ''
editor.codeLanguages()                   // [{ value, label, hint }, …]
editor.getState().inCode                 // 光标是否在代码块内

KEditor.create('#editor', {})                  // 自适应：默认行为
KEditor.create('#editor', { height: 460 })     // 固定 460px，内部滚动
KEditor.create('#editor', { minHeight: 200 })  // 只控最小高度

// 运行时切换
editor.setHeight(600)      // 固定 600px
editor.setHeight(0)        // 回到自适应（也接受 'auto'）
editor.heightOptions()     // { height: 0, auto: true }

KEditor.create('#editor', {
  paperWidth: 677,     // 版心基准宽（公众号）；fluid 模式下它是最小宽度
  paperMode: 'fluid',  // 'fluid'（默认）| 'fixed'（恒定 paperWidth + 64）
  paperGap: 24,        // fluid 模式下单侧留白
  paperMaxWidth: 0,    // fluid 模式下的版心上限，0 = 不限
})

// 运行时调整（侧栏折叠、布局变化时）
editor.setPaper({ mode: 'fixed' })
editor.setPaper({ gap: 40, maxWidth: 1000 })
editor.paperOptions()  // { width, mode, gap, maxWidth }

const editor = KEditor.create('#editor', {
  customButtons: [
    // ① 数据从接口读取
    {
      name: 'column',
      text: '栏目',
      title: '插入栏目链接',
      searchable: true,         // 面板内搜索
      url: '/api/columns',      // 内部 fetch，自动识别 items/list/data/rows/records
      link: true,               // 用每项自带的地址（url / href / link 字段）
      insert: 'link',
      position: { after: 'link' },   // 放到「链接」之后
    },
    // ② 数据静态配置
    {
      name: 'tpl',
      text: '模板',
      options: [
        { value: 'opening', label: '开场白', desc: '问候 + 本期导读', group: '通用' },
        { value: 'ending',  label: '结束语', desc: '引导关注与转发', group: '通用' },
      ],
      link: { url: 'https://mp.weixin.qq.com/s/tpl-{value}', text: '【{label}】', target: '_blank' },
    },
  ],
})

editor.on('customselect', ({ name, item, link, action }) => {
  console.log(name, item.label, '→', link?.url, '（插入方式：' + action + '）')
})

const editor = KEditor.create('#editor', {
  value: await fetchDraft(),          // 回填：初始 HTML
  // 高度自适应，不用管
})

let timer = null
editor.on('change', () => {
  clearTimeout(timer)                 // change 已内置 160ms 防抖，这里再做一次幂等
  timer = setTimeout(async () => {
    await fetch('/api/draft', {
      method: 'PUT',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ html: editor.getHTML() }),
    })
  }, 1200)
})

editor.on('save', () => saveNow())    // ⌘/Ctrl + S 触发