从实例学WysiHat：自定义按钮与事件处理的实战教程

2026/8/5 21:04:18

从实例学WysiHat：自定义按钮与事件处理的实战教程

【免费下载链接】wysihatA WYSIWYG JavaScript framework项目地址: https://gitcode.com/gh_mirrors/wy/wysihat

WysiHat是一款轻量级的WYSIWYG（所见即所得）JavaScript框架，它让开发者能够轻松构建功能丰富的富文本编辑器。本文将通过实例演示如何自定义编辑器按钮和处理事件，帮助你快速掌握WysiHat的核心使用技巧。

📌 快速上手：基础编辑器搭建

要开始使用WysiHat，首先需要在HTML文件中引入框架核心文件。通过以下基础结构，你可以快速创建一个简单的富文本编辑器：

<!DOCTYPE html> <html> <head> <title>Simple WysiHat Editor</title> <script src="../src/wysihat.js" type="text/javascript" charset="utf-8"></script> </head> <body> <textarea id="content"></textarea> <script type="text/javascript" charset="utf-8"> var editor = WysiHat.Editor.attach('content'); var toolbar = new WysiHat.Toolbar(editor); toolbar.addButtonSet(WysiHat.Toolbar.ButtonSets.Basic); </script> </body> </html>

这段代码来自examples/simple.html，它展示了创建编辑器的基本流程：通过WysiHat.Editor.attach方法绑定文本区域，然后创建工具栏并添加基础按钮集。

🛠️ 自定义按钮：打造专属编辑功能

WysiHat最强大的特性之一就是允许开发者创建自定义按钮。以下是一个添加"插入水平线"按钮的实例：

toolbar.addButton({ label: "Horizontal Rule", handler: function(editor) { editor.execCommand('insertHorizontalRule'); return false; } });

在examples/custom_buttons.html中，你可以找到更多自定义按钮的实现方式，包括：

自定义图标按钮
带下拉菜单的复合按钮
状态切换按钮（如粗体/斜体切换）

每个按钮定义都包含label（显示文本）和handler（点击事件处理函数）两个核心属性，通过editor.execCommand可以调用各种编辑命令。

🔧 高级技巧：工具栏子类化

对于复杂的编辑器需求，WysiHat支持通过子类化WysiHat.Toolbar来创建更具组织性的工具栏。以下是一个示例：

var CustomToolbar = Class.create(WysiHat.Toolbar, { initialize: function($super, editor) { $super(editor); this.addBasicButtons(); this.addCustomButtons(); }, addBasicButtons: function() { this.addButtonSet(WysiHat.Toolbar.ButtonSets.Basic); }, addCustomButtons: function() { // 添加自定义按钮组 this.addButton({ /* 自定义按钮定义 */ }); } });

这种方式在examples/toolbar_subclass.html中有完整实现，它能帮助你更好地组织代码，特别是在构建包含大量自定义功能的编辑器时。

🎯 事件处理：响应编辑器状态变化

WysiHat提供了丰富的事件机制，让你能够响应编辑器的各种状态变化。常用的事件包括：

selection:change- 选中文本变化时触发
field:change- 内容修改时触发
frame:loaded- 编辑器框架加载完成时触发

以下是监听选中文本变化的示例代码：

editor.observe('selection:change', function(event) { var formatState = editor.formatState(); // 更新按钮状态 $('bold-button').setAttribute('disabled', !formatState.bold); });

这段代码可以帮助你实现类似Word的"实时更新按钮状态"功能，当用户选中文本的格式变化时，对应的工具栏按钮会自动更新状态。