# kindeditor

**Repository Path**: hulangfy/kindeditor

## Basic Information

- **Project Name**: kindeditor
- **Description**: kindeditor美化
- **Primary Language**: JavaScript
- **License**: LGPL-2.1
- **Default Branch**: master
- **Homepage**: https://www.npmjs.com/package/mhalo.kindeditor
- **GVP Project**: No

## Statistics

- **Stars**: 5
- **Forks**: 6
- **Created**: 2021-07-01
- **Last Updated**: 2026-06-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

Based on the code map, this is a **KindEditor** project - a popular WYSIWYG rich text editor for web. Let me create a comprehensive README for this project.

---

# KindEditor

[KindEditor](https://kindeditor.netlify.app) 是一个开源的在线 HTML 编辑器，主要用于让用户在网站上获得类似 Word 的富文本编辑体验。

## 特性

- **轻量级**：代码精简，加载速度快
- **所见即所得**：采用类似 Word 的界面，用户体验好
- **开源免费**：MIT 开源协议，免费商业使用
- **多浏览器支持**：兼容 IE、Firefox、Chrome、Safari、Opera 等主流浏览器
- **多语言支持**：内置中文、英文、日文、韩文、俄文、阿拉伯语等多种语言
- **插件化设计**：功能丰富，支持图片上传、文件管理、表格编辑、代码高亮等

## 目录结构

```
kindeditor/
├── src/                  # 核心源码
│   ├── core.js           # 核心工具函数
│   ├── main.js           # 主程序
│   ├── cmd.js            # 命令处理
│   ├── dialog.js         # 对话框
│   ├── edit.js           # 编辑器
│   ├── event.js          # 事件处理
│   ├── html.js           # HTML 处理
│   ├── menu.js           # 菜单
│   ├── node.js           # 节点操作
│   ├── range.js          # 选区管理
│   ├── selector.js       # 选择器
│   ├── toolbar.js       # 工具栏
│   └── widget.js         # 组件
├── plugins/              # 插件
│   ├── image/            # 图片上传
│   ├── multiimage/       # 多图上传
│   ├── table/            # 表格编辑
│   ├── link/             # 超链接
│   ├── media/            # 媒体文件
│   ├── emoticons/        # 表情
│   ├── filemanager/      # 文件管理器
│   └── ...
├── themes/default/       # 默认主题
├── lang/                 # 语言包
│   ├── zh-CN.js          # 简体中文
│   ├── zh-TW.js          # 繁体中文
│   ├── en.js             # 英语
│   └── ...
└── publish/              # 发布的文件
```

## 快速开始

### 引入 KindEditor

在 HTML 中引入 `kindeditor-all.min.js`：

```html
<script src="kindeditor-all-min.js"></script>
<link rel="stylesheet" href="themes/default/default.css" />
```

### 初始化编辑器

```html
<textarea id="editor"></textarea>

<script>
KindEditor.ready(function(K) {
    window.editor = K.create('#editor', {
        width: '800px',
        height: '600px',
        uploadJson: '/php/upload.php',
        fileManagerJson: '/php/filemanager.php',
        allowFileManager: true
    });
});
</script>
```

### 配置项

常用配置项：

| 配置项 | 说明 | 默认值 |
|--------|------|--------|
| width | 编辑器宽度 | '80%' |
| height | 编辑器高度 | '500px' |
| uploadJson | 图片上传处理文件 | '' |
| fileManagerJson | 文件管理器处理文件 | '' |
| allowFileManager | 是否允许浏览服务器文件 | false |
| formatUploadUrl | 上传路径是否格式化 | true |
| items | 工具栏按钮 | 全部按钮 |
| langType | 语言类型 | 'zh-CN' |

### 获取和设置内容

```javascript
// 获取 HTML 内容
var html = editor.html();

// 获取纯文本内容
var text = editor.text();

// 设置内容
editor.html('<p>内容</p>');

// 追加内容
editor.appendHtml('<p>追加内容</p>');

// 同步内容到 textarea
editor.sync();
```

## 插件列表

KindEditor 内置丰富的插件：

- `anchor` - 锚点
- `autoheight` - 自动高度
- `baidumap` - 百度地图
- `clearhtml` - 清理 HTML
- `code` - 代码高亮
- `emoticons` - 表情
- `filemanager` - 文件管理
- `fixtoolbar` - 工具栏固定
- `image` - 单图上传
- `insertfile` - 插入文件
- `lineheight` - 行高
- `link` - 超链接
- `media` - 媒体文件
- `multiimage` - 多图上传
- `pagebreak` - 分页符
- `plainpaste` - 纯文本粘贴
- `preview` - 预览
- `quickformat` - 快速格式化
- `quote` - 引用
- `symbols` - 符号
- `table` - 表格
- `template` - 模板
- `wordpaste` - Word 粘贴

## 开发

### 安装依赖

```bash
npm install
```

### 构建

```bash
npm run build
```

### 开发模式

```bash
npm run dev
```

## 许可证

MIT License - 查看 [license.txt](license.txt)

## 更新日志

- v4.4.15 (2023-05-08)
- v4.4.13 (2023-04-11)
- v4.4.11 (2023-04-09)
- v4.4.10 (2023-03-17)
- v4.4.9 (2023-03-17)
- v4.4.8 (2023-03-09)

更多版本信息请查看 [UPDATE.md](UPDATE.md)

## 相关链接

- 官网：https://kindeditor.netlify.app
- GitHub：https://github.com/kindsoft/kindeditor
- Gitee：https://gitee.com/kindsoft/kindeditor

---

如有 Bug 或功能建议，欢迎提交 Issue。