API 参考

import { KEditor } from 'kyle-editor'

const editor = new KEditor('#editor', { /* options */ })

// 或工厂方法；el 可以是选择器 / HTMLElement / Vue ref.$el
const editor = KEditor.create(el, options)

undo  redo  heading  fontsize  bold  italic  underline  strike  foreColor  backColor
alignLeft  alignCenter  alignRight  alignJustify  ul  ol  quote  link  image  video
table  code  markdown  hr  clear  source  preview  fullscreen

|        分隔符
:tail    右对齐标记（其后的按钮吸附在工具栏右端）

toolbar: ['undo', 'redo', '|', 'bold', 'italic', '|', 'image', 'video', ':tail', 'source']

// 方式 A：静态数组（也支持纯字符串、或接口原始对象，字段自动归一）
{ options: [{ value: 'a', label: '选项 A', desc: '说明', url: 'https://x.com/a' }] }
{ options: ['选项 A', '选项 B'] }

// 方式 B：自定义函数（可异步，能用编辑器实例与闭包里的 axios / 鉴权头）
{ load: async () => (await fetch('/api/tags').then((r) => r.json()))
    .map((t) => ({ value: t.id, label: t.name })) }

// 方式 C：直接给接口地址
{
  url: '/api/columns',
  fetchOptions: { method: 'POST', headers: { Authorization: 'Bearer x' }, body: '{}', timeout: 8000 },
  pick: (json) => json.result.records,   // 结构特殊时手动提取数组
}

onSelect: (item, ctx) => {
  ctx.editor                 // 编辑器实例
  ctx.item                   // 选中项（归一后）
  ctx.link                   // 解析后的链接，无链接时为 null
  ctx.insertLink(override)   // 插入链接（可覆盖字段）
  ctx.insertHtml(html)       // 插入 HTML
  ctx.insertText(text)       // 插入纯文本
  ctx.open(url, target)      // 新窗口打开
  return false               // 已自行处理，跳过默认插入
}

KEditor.create('#editor', {
  customButtons: [
    { name: 'column', text: '栏目', searchable: true, url: '/api/columns', link: true, insert: 'link' },
    {
      name: 'tpl', text: '模板', icon: 'plus',
      options: [{ value: 'opening', label: '开场白', desc: '问候 + 导读', group: '通用' }],
      link: { url: 'https://mp.weixin.qq.com/s/tpl-{value}', text: '【{label}】' },
      onSelect: (item) => track('tpl', item.value),
    },
    {
      name: 'date', type: 'button', text: '日期',
      onClick: ({ editor }) => editor.commands.insertHTML('<p>2026-10-13</p>'),
    },
  ],
})

// 插入（lang 可省，用 options.code.defaultLanguage）
editor.insertCode('const a = 1', 'js')
// => <pre data-k-lang="javascript"><code class="language-javascript">…</code></pre>

// 改写光标所在块的语言（返回生效语言；不在代码块内返回 null）
editor.setCodeLanguage('sql')
editor.getCodeLanguage()                    // 'sql'；不在块内为 ''

editor.codeLanguages()                      // [{ value, label, hint }, …]（受 options.code.languages 裁剪）
editor.highlightCode()                      // 手动重跑全量高亮，返回处理的代码块数量
editor.lastCodeLang                         // 最近一次选择的语言（下次插入默认沿用）
editor.getState().inCode                    // 光标是否在代码块内

markdownToHtml('# 标题\n\n正文', { gfm: true })  // => '<h1>标题</h1>\n<p>正文</p>'

markdownSummary(html)
// => { headings, paragraphs, lists, items, codeBlocks, quotes, tables, images, links }

isMarkdownFile({ name: 'a.md', type: '' })       // => true（按 MIME + 扩展名，.txt 也算）
readMarkdownFile(file)                           // => 文本（严格 UTF-8 失败时回退 gb18030 / gbk / big5）
normalizeInsertMode('append')                    // => 'append'（非法值 => 'replace')
MARKDOWN_ACCEPT                                  // <input accept> 用

editor.id                     // 实例 id
editor.el                     // 最外层容器
editor.root                   // contenteditable 节点
editor.options                // 合并后的配置
editor.commands               // 指令集（可程序化调用）
editor.media                  // 上传/媒体管理
editor.uploader               // UploadPipeline：按 upload.mode / 体积自动选路（.pick(file) 可查询）
editor.uploaders              // { normal: SimpleUploader, chunk: ChunkUploader | null }
editor.history                // 撤销栈
editor.readOnly / sourceMode / previewMode / fullscreen
editor.lastCodeLang           // 最近选择的代码块语言

editor.commands.toggleMark('bold' | 'italic' | 'underline' | 'strike')
editor.commands.setFontSize(18)
editor.commands.setColor('fore' | 'back', '#07c160')   // color = null 恢复默认
editor.commands.setAlign('left' | 'center' | 'right' | 'justify')
editor.commands.toggleList('ordered' | 'unordered')
editor.commands.setHeading('p' | 'h1' | 'h2' | 'h3')
editor.commands.toggleBlockquote()
editor.commands.createLink({ url, text, target })
editor.commands.removeLink()
editor.commands.insertTable(3, 2)                      // 列, 行
editor.commands.insertCodeBlock('const a = 1', 'js')   // 第二参为语言（可省）
editor.commands.setCodeLanguage('python')              // 改写光标所在块语言
editor.commands.currentCodeLang()                      // 光标所在块语言（'' = 不在块内）
editor.commands.insertDivider()
editor.commands.insertHTML('<p>富文本片段</p>')
editor.commands.clearFormat()

editor.getState()   // 当前选区状态（工具栏高亮用）

import {
  sanitizeHtml, formatHtml, escapeHtml, isSafeUrl, cleanWordHtml,
  mockAdapter, httpAdapter, simpleAdapter, ChunkUploader,
} from 'kyle-editor'

import {
  highlightCode, listLanguages, normalizeLang, languageLabel, isCodeBlock, LANGUAGES,
} from 'kyle-editor'

sanitizeHtml(dirtyHtml)      // 白名单净化，返回安全 HTML
formatHtml(html)             // 缩进美化（编辑器源码模式同款）
cleanWordHtml(wordHtml)      // 粘贴前的 Word/WPS 清洗
isSafeUrl('javascript:1')    // => false

highlightCode('const a = 1', 'js')
// => '<span class="ke-tok-kw">const</span> a <span class="ke-tok-op">=</span> …'（已转义）

listLanguages(['js', 'mysql'])   // => [{ value:'javascript', … }, { value:'sql', … }]
normalizeLang('MySQL')           // => 'sql'（未知语言 => 'plaintext'）
languageLabel('js')              // => 'JavaScript'
isCodeBlock(preElement)          // => true（<pre> 且带 data-k-lang 或内含 <code>）

KEditor.version                 // '1.0.10'
KEditor.create(el, options)    // 工厂方法，等价于 new KEditor(...)

// 净化 / 格式化
KEditor.sanitizeHtml(html)
KEditor.formatHtml(html)
KEditor.cleanWordHtml(html)

// 上传适配器
KEditor.mockAdapter({speed})                 // 分片 put() + 整包 upload() 都支持
KEditor.httpAdapter(config)                  // 真实后端适配器（只认一个 url）
KEditor.simpleAdapter(fn)                    // 把「一个文件一次请求」包成普通上传适配器
KEditor.createSimpleUploader(option, uploadOptions)  // 造一个 SimpleUploader
KEditor.createChunkUploader(option, uploadOptions)   // 造一个 ChunkUploader
KEditor.SimpleUploader / KEditor.ChunkUploader / KEditor.UploadPipeline

// 代码高亮
KEditor.highlightCode(code, lang)
KEditor.listLanguages(only?)
KEditor.normalizeLang / KEditor.languageLabel / KEditor.isCodeBlock
KEditor.LANGUAGES                // 全部内置语言（value/label/aliases/hint）

// Markdown
KEditor.markdownToHtml / KEditor.markdownSummary
KEditor.isMarkdownFile / KEditor.readMarkdownFile
KEditor.normalizeInsertMode / KEditor.MARKDOWN_ACCEPT

KEditor.utils                    // { uid, escapeHtml }
KEditor.plugin                   // Vue 3 插件（仅 keditor-vue.umd.js）

import KEditor, { type KEditorOptions, type KEditorInstance } from 'kyle-editor'

const options: KEditorOptions = {
  placeholder: '开始撰写内容…',
  height: 0,
}

const editor: KEditorInstance = KEditor.create('#editor', options)
editor.on('change', ({ html }) => console.log(html))