KindEditor命令API详解：掌握富文本编辑器的核心操作

KindEditor命令API详解：掌握富文本编辑器的核心操作

【免费下载链接】kindeditor WYSIWYG HTML editor 项目地址: https://gitcode.com/gh_mirrors/ki/kindeditor

前言

KindEditor作为一款功能强大的富文本编辑器，其核心功能通过KCmd对象提供的一系列命令API实现。本文将深入解析这些API的使用方法和应用场景，帮助开发者更好地控制编辑器行为，实现各种富文本编辑功能。

KCmd对象基础

创建KCmd对象

要使用KindEditor的命令API，首先需要创建KCmd对象：

var cmd = K.cmd(document);

或者传入KRange对象：

var cmd = K.cmd(KRange对象);

核心属性

KCmd对象提供了几个重要的只读属性：

• doc: 当前操作的document对象
• win: 当前操作的window对象
• sel: 原生的selection对象
• range: KRange对象，表示当前选中的范围

选区操作

选区管理

cmd.selection(); // 根据当前选中状态重新设置range
cmd.selection(true); // 强制重置选区，如果没有选中则选择文档末尾
cmd.select(); // 选中当前range

这些方法在处理用户交互时非常有用，特别是在需要确保选区存在的情况下。

内容操作API

包裹内容

wrap()方法可以用指定元素包裹选区内容：

cmd.wrap('<strong></strong>'); // 用strong标签包裹
cmd.wrap('<span style="color:red;"></span>'); // 用红色span包裹

分割元素

split()方法可以根据规则分割选区：

cmd.split(true, {
    span: '*',
    div: 'class,border'
});

删除元素/属性

remove()方法可以按规则删除元素或属性：

cmd.remove({
    span: '*', // 删除所有span
    div: 'class,border' // 删除div的class和border属性
});

样式操作

文本样式

cmd.bold(); // 加粗
cmd.italic(); // 斜体
cmd.underline(); // 下划线
cmd.strikethrough(); // 删除线

颜色和字体

cmd.forecolor('#ff0000'); // 设置文字颜色为红色
cmd.hilitecolor('#ffff00'); // 设置文字背景为黄色
cmd.fontsize('16px'); // 设置文字大小
cmd.fontfamily('Arial'); // 设置字体

内容插入API

插入HTML

cmd.inserthtml('<p>这是一段新内容</p>');

插入图片

cmd.insertimage(
    'image.jpg', // 图片URL
    '示例图片', // alt文本
    300, // 宽度
    200, // 高度
    1, // 边框
    'center' // 对齐方式
);

链接操作

cmd.createlink('https://example.com', '_blank'); // 创建链接
cmd.unlink(); // 取消链接

段落和列表

段落格式

cmd.formatblock('h1'); // 设置为h1标题
cmd.formatblock('p'); // 设置为普通段落

列表操作

cmd.insertorderedlist(); // 有序列表
cmd.insertunorderedlist(); // 无序列表
cmd.indent(); // 增加缩进
cmd.outdent(); // 减少缩进

对齐方式

cmd.justifyleft(); // 左对齐
cmd.justifycenter(); // 居中对齐
cmd.justifyright(); // 右对齐
cmd.justifyfull(); // 两端对齐

剪贴板操作

cmd.cut(); // 剪切
cmd.copy(); // 复制
cmd.paste(); // 粘贴

实用方法

查询状态

var isBold = cmd.state('bold'); // 检查是否加粗
var fontSize = cmd.val('fontsize'); // 获取字体大小

查找共同祖先

var tableNode = cmd.commonAncestor('table'); // 查找最近的table祖先

注意事项

1. 部分命令如val()仅支持特定操作：

   • fontfamily (fontname)
   • formatblock
   • forecolor
   • hilitecolor

2. 在使用样式相关命令前，最好先检查选区状态，避免意外结果。

3. 对于复杂的DOM操作，建议结合wrap()、split()和remove()方法实现精确控制。

通过掌握这些API，开发者可以充分利用KindEditor的强大功能，实现各种复杂的富文本编辑需求。

【免费下载链接】kindeditor WYSIWYG HTML editor 项目地址: https://gitcode.com/gh_mirrors/ki/kindeditor