🌺 婳阳 HuayangEditor V2.2.0
可外部引用的富文本编辑器 · 全能版 · HuayangEditor.js
站外引用、代码块、表格、颜色大小、源码、撤销、对齐、视频、表情……
特性概览
粗/斜/下划
标题1/2
字体颜色
字体大小(下拉)
代码块
插入表格
引用块
有序/无序列表
超链接/图片
站外引用卡片
源码编辑
撤销/重做
清除格式
对齐方式
水平线
插入视频
表情符号
实时演示
下方是一个已初始化的编辑器实例。您可以直接试用所有功能，并通过按钮获取或设置内容。
📋 当前内容
（点击“获取内容”查看HTML）
版本更新日志
🎉 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 新增功能一览
- 撤销 / 重做
- 清除格式
- 左对齐 / 居中 / 右对齐 / 两端对齐
- 插入水平线
- 字体下拉选择
- 字号下拉选择
- 插入视频
- 插入表情