在富文本编辑器中通过按钮添加项目符号，本质上是调用编辑器内部提供的列表命令，将当前光标所在段落或选中的多段文字转换为无序列表或有序列表。下面以Ueditor为例说明具体做法。
一、注册自定义工具栏按钮
Ueditor允许通过修改ueditor.config.js中的toolbars数组来添加按钮名称，并在editor上注册对应的执行逻辑。我们先在配置中放入一个名为mybullist的按钮。
// ueditor.config.js 片段
window.UEDITOR_CONFIG = {
toolbars: [['mybullist', 'insertorderedlist']],
// 其他配置省略
};
二、绑定按钮点击行为
编辑器初始化完成后，使用editor.registerCommand定义命令，并用editor.addListener监听按钮被点击的时刻。核心命令名为insertunorderedlist，这是Ueditor内置的用于添加项目符号的命令。
// 初始化后绑定逻辑
editor.ready(function () {
// 注册命令（若已内置可省略）
editor.registerCommand('mybullist', {
execCommand: function () {
this.execCommand('insertunorderedlist');
}
});
// 监听自定义按钮点击
editor.addListener('beforeExecCommand', function (name) {
if (name === 'mybullist') {
editor.execCommand('mybullist');
}
});
});
三、处理选中状态
如果用户未选中任何文字，直接点击按钮，Ueditor会在当前空段落前加上项目符号。若已选中多个段落，则整段转为列表。我们可以用queryCommandState判断当前是否已是项目符号状态，从而切换显示按钮高亮。
// 判断当前是否为项目符号状态
var isList = editor.queryCommandState('insertunorderedlist');
if (isList) {
console.log('当前已是项目符号');
} else {
editor.execCommand('insertunorderedlist');
}
四、完整示例页面
下面给出一个最简HTML示例，演示如何引入Ueditor并通过按钮添加项目符号。注意其中<script>标签均为正常引入，代码里的特殊字符已做转义。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>添加项目符号示例</title>
<script src="ueditor.config.js"></script>
<script src="ueditor.all.js"></script>
</head>
<body>
<div id="editor"></div>
<button id="addBtn">添加项目符号</button>
<script>
var editor = UE.getEditor('editor');
document.getElementById('addBtn').onclick = function () {
editor.focus();
editor.execCommand('insertunorderedlist');
};
</script>
</body>
</html>
五、小结
通过按钮添加项目符号并不复杂，关键是找到编辑器对应的列表命令名，并在合适的时机调用execCommand。不同编辑器命令名可能不同，但思路一致：注册按钮、绑定点击、执行内置命令。掌握这种方法，你还可以扩展出字体颜色、缩进等更多编辑功能。