KPEdit

一个轻量的原生 JS 富文本编辑器，无任何运行时依赖。

安装

npm install kp-editor

使用

import { Editor } from "kp-editor";
import "kp-editor/style.css";

const editor = new Editor(document.getElementById("editor"));

editor.setContent("<p>你好，<b>世界</b></p>");
console.log(editor.getContent()); // 当前 HTML 内容

CommonJS：

const { Editor } = require("kp-editor");
require("kp-editor/style.css");

销毁

SPA 反复挂载/卸载时，用 destroy() 解绑工具栏的 selectionchange 监听、编辑区的 paste 监听并移除 DOM，避免监听器累积：

const editor = new Editor(document.getElementById("editor"));
// ...
editor.destroy(); // 卸载组件时调用

菜单配置

初始化时可传入第二个参数自定义工具栏按钮，数组顺序即按钮顺序，目前仅支持内置菜单名：

new Editor(document.getElementById("editor"), {
  tools: ["bold", "image", "source"] // 内置项："bold" 粗体、"image" 图片上传、"source" 源码查看
});

• 未知名称会抛错；不传 tools 时默认为 ["bold", "source"]
• "image" 需要配合下面的 image 上传配置；未配置时点击会报错

图片上传

在 tools 里加入 "image" 显示「图片」按钮，用 image 配置上传方式（upload 优先于 url）：

方式一：上传地址 + 文件参数名

new Editor(document.getElementById("editor"), {
  tools: ["bold", "image", "source"],
  image: {
    url: "/api/upload", // 上传地址
    fileField: "file"   // 文件字段名，默认 "file"
  }
});

接口响应支持纯文本 URL，或 JSON { "url": "..." } / { "data": { "url": "..." } }。

方式二：自定义上传函数

upload(file, onProgress) => string | Promise<string>。第二个参数是进度回调，入参 0-100 驱动组件内进度条；返回值为图片路径/URL。

new Editor(document.getElementById("editor"), {
  tools: ["bold", "image", "source"],
  image: {
    upload(file, onProgress) {
      return new Promise((resolve) => {
        // 自行上传；过程中调用 onProgress(0-100) 反馈进度
        onProgress(100);
        resolve("/uploads/" + file.name);
      });
    },
    onError(err) { /* 可选：上传失败回调 */ }
  }
});

• 进度条在工具栏下方，上传时出现、完成后隐藏
• 图片插入到点击「图片」按钮时的光标位置

功能

• 顶部工具栏 + 下方所见即所得编辑区（contenteditable）
• 粗体：对选中文字切换加粗（<b> 键，或 Ctrl+B）
• 图片上传：选择图片，按配置上传后插入编辑区，带进度条
• 源码查看：</> 按钮在富文本渲染与 HTML 源码之间切换
• 编辑区自带粗体（b/strong）、段落（p）等语义标签的基线样式，不依赖宿主页面 reset——即使宿主有 * { font-weight: lighter } 之类的全局覆盖，加粗依然可见、工具栏 B 按钮状态依然准确
• 内容净化：getContent / setContent / 粘贴 / 源码切换时只保留 <p>/<b>/<br>/<img>（<img> 仅保留 src），去除其余所有属性（含 style）

安全提示

源码模式以及 setContent(html) 会按 HTML 渲染。如果内容来自不可信来源（用户提交、数据库、网络），请先自行净化（如 DOMPurify）再传入，避免 XSS。

本地开发与调试

npm install        # 安装构建依赖（仅 rollup）
npm run build      # 构建 ESM/CJS/IIFE 产物与 CSS 到 dist/

调试：先 npm run build，然后直接双击打开 demo/index.html（IIFE 产物，无需服务器）；或 npm run demo 启动 http://localhost:3000/demo/ 。

复现宿主全局 reset 场景：打开 demo/host-reset.html，验证带 * { font-weight: lighter } 时加粗仍可见、B 按钮状态仍正确。

目录结构

src/            编辑器源码
  index.js      入口类 Editor（工具栏 + 编辑区 + 源码视图 + destroy）
  toolbar.js    工具栏（选区祖先判定加粗状态 + destroy）
  sanitize.js   内容白名单净化（p/b/br，去除全部属性）
  index.css     全部样式（含编辑区语义标签基线样式）
dist/           构建产物（发布内容）
demo/           静态演示页（index.html + host-reset.html）