🌺 婳阳 HuayangEditor 🎉 V2.3
可外部引用的富文本编辑器 · 全能版 · HuayangEditor.js
站外引用、代码块、表格、颜色大小、源码、撤销、对齐、视频、表情……
特性概览
粗/斜/下划
标题1/2
字体颜色
字体大小(下拉)
代码块
插入表格
引用块
有序/无序列表
超链接/图片
站外引用卡片
源码编辑
撤销/重做
清除格式
对齐方式
水平线
插入视频
表情符号
实时演示
下方是一个已初始化的编辑器实例。您可以直接试用所有功能，并通过按钮获取或设置内容。
📋 当前内容
（点击“获取内容”查看HTML）
版本更新日志
🎉 V2.3 - 修复错误和优化
主要改进点
性能优化
样式注入单例，避免重复创建
<style>。选区保存使用
requestAnimationFrame节流，减少高频触发。事件委托减少监听器数量。
功能修复
修复字体大小设置：使用
span添加行内font-size替代过时的<font>标签。站外引用卡片光标定位改用
MutationObserver，更稳定可靠。insertHtmlAtCursor增加降级方案（直接追加），避免无选区时失败。
安全性增强
转义单引号，完善 XSS 防护。
新增
usePurify选项，可集成 DOMPurify 对内容进行清理。
代码可维护性
配置与逻辑分离，注释清晰。
工具栏配置更易扩展（如字号改为像素值）。
统一使用
class语法，方法绑定明确。
向下兼容
保留所有原有 API，不影响现有使用。
主题、样式等完全一致。
使用说明
直接替换旧版
HuayangEditor.js即可。若需启用内容安全清理，可引入 DOMPurify 并设置
usePurify: true。字体大小现在支持像素值（例如
16px），更符合现代网页标准。
此版本已全面测试，可放心升级。
🎉 V2.2.2 - 修复已知错误
修复已知错误
🎉 V2.2.1 - 修复已知错误
* 优化版：提升加载速度、内存管理、代码清晰度；新增 initialContent 选项；
🎉 V2.0.0 - 新增功能一览
快速上手
在页面中引入 HuayangEditor.js 和 Font Awesome，然后创建一个容器并实例化：
<!-- 引入依赖 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<script src="http://hy.168hot.cn/fuwenben/HuayangEditor.js"></script>
<!-- 容器 -->
<div id="myEditor"></div>
<script>
const editor = new HuayangEditor('#myEditor', {
height: 400,
placeholder: '在这里写点什么...'
});
</script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<script src="http://hy.168hot.cn/fuwenben/HuayangEditor.js"></script>
<!-- 容器 -->
<div id="myEditor"></div>
<script>
const editor = new HuayangEditor('#myEditor', {
height: 400,
placeholder: '在这里写点什么...'
});
</script>
API 文档
实例化选项
height: 编辑区最小高度 (默认 400)placeholder: 占位文本 (默认 "请输入内容...")
实例方法
getContent(): 返回编辑器内容的HTML字符串setContent(html): 设置编辑器内容on('change', callback): 监听内容变化destroy(): 销毁编辑器
特色功能：站外引用卡片
点击工具栏的蓝色“站外引用”按钮，输入来源网址和说明文字，即可生成一个带有来源链接和可编辑引用内容的精美卡片。非常适合转载、参考文献标注。
源码编辑
点击工具栏的“源码”按钮（），可以切换到文本域直接编辑HTML源码，再次点击切换回可视化模式。
V2.0.0 新增功能一览
- 撤销 / 重做
- 清除格式
- 左对齐 / 居中 / 右对齐 / 两端对齐
- 插入水平线
- 字体下拉选择
- 字号下拉选择
- 插入视频
- 插入表情