婳阳富文本编辑器 (HuayangEditor) 是一款轻量级、功能完备、可被外部网站直接引用的富文本编辑器。它支持常见的格式化功能（加粗、斜体、下划线、标题、引用、列表、对齐等），还提供了高级功能如站外引用卡片、代码块、表格、字体颜色/大小、视频插入、表情符号、源码编辑等。编辑器被封装为一个独立的 JavaScript 库，您只需在页面中引入，即可在任何元素上初始化。
在您的 HTML 页面中，首先需要引入 Font Awesome 图标库（用于工具栏图标）和 HuayangEditor 核心库。
<!-- Font Awesome 图标库 (必需) --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"> <!-- 引入编辑器核心库 (请将路径替换为实际存放的位置) --> <script src="path/to/HuayangEditor.js"></script>
注意：
HuayangEditor.js需要您从服务器获取，例如http://hy.168hot.cn/fuwenben/HuayangEditor.js。
在需要放置编辑器的位置添加一个元素（如 <div>），作为编辑器的容器。
<div id="editor-container"></div>在页面加载完成后，使用 new HuayangEditor() 初始化编辑器。可以传递配置选项。
<script> const editor = new HuayangEditor('#editor-container', { height: 400, // 编辑区最小高度 (像素) placeholder: '请输入内容...', // 占位文本 initialContent: '' // 初始内容（如有保存的内容，可在此传入） }); </script>
heightnumber400编辑区最小高度（像素）placeholderstring'请输入内容...'占位文本initialContentstring''初始 HTML 内容，可用于恢复之前保存的内容编辑器实例提供了以下常用方法：
const html = editor.getContent();返回编辑器内容的完整 HTML 字符串，包含所有格式标签。
editor.setContent('<h2>新标题</h2><p>新内容...</p>');用指定的 HTML 替换编辑器当前内容，光标会自动移动到末尾。
editor.on('change', function() { console.log('编辑器内容已变化'); });
当用户输入或通过工具栏修改内容时触发。
editor.destroy();移除编辑器 DOM 和事件监听，释放资源。
当您将编辑器内容保存到数据库后，在其他页面（如文章详情页）展示时，可能会遇到样式丢失的问题（引用块、代码块、卡片等显示为普通文本）。这是因为展示页面缺少了编辑器内置的 CSS 样式。
HuayangEditor 提供了静态方法 getDisplayStyles()，用于获取展示内容所需的核心样式。请按以下步骤操作：
在展示页的 <head> 中，输出 HuayangEditor.getDisplayStyles() 返回的 CSS 字符串。
PHP 示例：
<style> <?php echo HuayangEditor::getDisplayStyles(); ?> </style>
JavaScript 示例（如果在浏览器环境）：
<script> const style = document.createElement('style'); style.textContent = HuayangEditor.getDisplayStyles(); document.head.appendChild(style); </script>
展示内容需要被一个带有 class="huayang-editor-content" 的容器包裹。
<div class="huayang-editor-content"> <?php echo $content; ?> <!-- 从数据库获取的编辑器内容 --> </div>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>文章详情</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"> <style> <?php echo HuayangEditor::getDisplayStyles(); ?> </style> </head> <body> <div class="huayang-editor-content"> <?php echo $content; ?> </div> </body> </html>
注意：如果展示页不需要 Font Awesome 图标（例如站外引用卡片中的图标），可以省略引入，但卡片中的图标将显示为空白。建议保留引入以获得完整效果。
站外引用卡片是 HuayangEditor 的特色功能，用于插入带来源链接和可编辑引用文字的卡片，非常适合转载、参考文献标注等场景。
在编辑器中，点击工具栏的蓝色 “站外引用” 按钮，会依次弹出两个输入框：
来源网址：输入外部链接（如 https://example.com/article）。
引用说明：输入对这段引用的说明或摘录（可选，留空则显示默认占位文字）。
确认后，编辑器会在光标位置生成一张精美的卡片：
<div class="external-ref-card" contenteditable="false"> <div class="ref-source" contenteditable="false"> <i class="fas fa-cloud-download-alt"></i> <span>来源：</span> <a href="..." target="_blank">...</a> </div> <div class="ref-quote-text" contenteditable="true">引用说明...</div> <p style="font-size:0.8rem; color:#7b8ba5; text-align:right;" contenteditable="false"> <i class="far fa-comment-dots"></i> 可编辑引用文字 </p> </div>
卡片特点：
来源链接：可点击，在新窗口打开。
引用文字：可直接编辑（卡片内的 ref-quote-text 区域可编辑）。
卡片结构：卡片边框不可编辑，保持整体布局。
确保您已经按照第 4 节的方法引入了展示样式，并包裹了内容容器。卡片样式已包含在 getDisplayStyles() 返回的 CSS 中。
如果编辑器被放置在一个 <form> 标签内，且按钮未设置 type="button"，可能触发表单提交导致刷新。HuayangEditor 已将所有按钮设为 <div> 模拟按钮，并阻止了默认事件，一般不会出现此问题。若仍遇到，请检查外部页面是否有额外的 JavaScript 拦截事件。
在初始化编辑器时，请使用 initialContent 选项传入保存的 HTML：
const editor = new HuayangEditor('#container', { initialContent: '<?php echo addslashes($savedContent); ?>' });
如果直接使用 setContent，应在编辑器初始化完成后调用。
编辑器的图标大小默认设置为 0.9rem。如需调整，可以自定义 CSS 覆盖：
.huayang-editor-toolbar .tool-btn i { font-size: 1rem !important; /* 改为期望大小 */ }
编辑器支持四种主题（默认、暗夜、海洋、森林）。您可以在初始化后通过 URL 参数或 Cookie 切换主题（参考演示网站）。主题仅影响编辑器外观，不影响保存的内容。
以下是一个完整的外站引用示例页面，包含编辑器初始化、保存内容、以及外部展示的演示。
<?php // 假设从数据库获取之前保存的内容 $savedContent = '<h2>示例内容</h2><p>之前保存的文本</p>'; ?> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>编辑文章</title> <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> </head> <body> <h1>编辑文章</h1> <div id="editor"></div> <button onclick="saveContent()">保存内容</button> <script> const editor = new HuayangEditor('#editor', { height: 400, placeholder: '在这里写文章...', initialContent: <?php echo json_encode($savedContent); ?> }); function saveContent() { const content = editor.getContent(); // 通过 AJAX 将 content 发送到服务器保存 console.log('保存的内容:', content); // 示例：fetch('/save.php', { method: 'POST', body: content }) } </script> </body> </html>
<?php // 从数据库获取保存的内容 $content = '<div class="external-ref-card" contenteditable="false">......</div>'; // 实际从数据库读取 ?> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>文章详情</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"> <style> <?php // 直接输出 HuayangEditor 的展示样式（需确保 HuayangEditor 类已加载） if (class_exists('HuayangEditor')) { echo HuayangEditor::getDisplayStyles(); } else { // 如果不使用 PHP 环境，也可以将样式字符串直接复制到此处 } ?> </style> </head> <body> <div class="huayang-editor-content"> <?php echo $content; ?> </div> </body> </html>
确保 HuayangEditor.js 路径正确，且服务器支持跨域访问（如果需要）。
Font Awesome 必须引入，否则工具栏图标无法显示。
在展示页面，如果不需要 Font Awesome 图标，可以省略，但站外引用卡片中的图标将不可见。
保存到数据库时，建议对内容进行 XSS 过滤（例如使用 HTML Purifier），防止恶意脚本注入。
如需进一步定制样式，可覆盖 huayang-editor-content 内部的 CSS 类。
如果您在使用过程中遇到任何问题，欢迎访问官方网站或联系开发者。本编辑器基于 MIT 协议开源，您可以自由使用、修改和分发。
文档版本： v2.2.2
更新日期： 2026-03-20
在线演示： http://hy.168hot.cn/fuwenben/