婳阳富文本编辑器 · 外站引用使用说明

1. 简介

婳阳富文本编辑器 (HuayangEditor) 是一款轻量级、功能完备、可被外部网站直接引用的富文本编辑器。它支持常见的格式化功能（加粗、斜体、下划线、标题、引用、列表、对齐等），还提供了高级功能如站外引用卡片、代码块、表格、字体颜色/大小、视频插入、表情符号、源码编辑等。编辑器被封装为一个独立的 JavaScript 库，您只需在页面中引入，即可在任何元素上初始化。

本页面为您提供详细的外站引用指南，包括快速上手、API 说明、外部展示样式修复、站外卡片使用、常见问题及完整示例。

2. 快速上手

2.1 引入依赖

在您的 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="http://hy.168hot.cn/fuwenben/HuayangEditor.js"></script>

2.2 创建容器

在需要放置编辑器的位置添加一个元素（如 <div>），作为编辑器的容器。

<div id="editor-container"></div>

2.3 初始化编辑器

<script>
    const editor = new HuayangEditor('#editor-container', {
        height: 400,                // 编辑区最小高度 (像素)
        placeholder: '请输入内容...', // 占位文本
        initialContent: ''           // 初始内容（如有保存的内容，可在此传入）
    });
</script>

2.4 实时演示

下方是一个已初始化的编辑器实例，您可以直接试用所有功能。

📋 当前内容

（点击“获取内容”查看HTML）

3. API 方法

编辑器实例提供以下常用方法：

方法	说明
`getContent()`	返回编辑器内容的完整 HTML 字符串，包含所有格式标签。
`setContent(html)`	用指定的 HTML 替换编辑器当前内容，光标自动移动到末尾。
`on('change', callback)`	监听内容变化，当用户输入或通过工具栏修改内容时触发回调。
`destroy()`	移除编辑器 DOM 和事件监听，释放资源。

配置选项

选项	类型	默认值	说明
`height`	number	400	编辑区最小高度（像素）
`placeholder`	string	'请输入内容...'	占位文本
`initialContent`	string	''	初始 HTML 内容，用于恢复之前保存的内容

4. 外部展示内容（解决样式丢失）

当您将编辑器内容保存到数据库后，在其他页面（如文章详情页）展示时，可能会遇到样式丢失的问题（引用块、代码块、卡片等显示为普通文本）。这是因为展示页面缺少了编辑器内置的 CSS 样式。

HuayangEditor 提供了静态方法 getDisplayStyles()，用于获取展示内容所需的核心样式。请按以下步骤操作：

4.1 在展示页引入样式

<style>
    <?php echo HuayangEditor::getDisplayStyles(); ?>
</style>

如果在 JavaScript 环境：

<script>
    const style = document.createElement('style');
    style.textContent = HuayangEditor.getDisplayStyles();
    document.head.appendChild(style);
</script>

4.2 将内容包裹在指定容器中

<div class="huayang-editor-content">
    <?php echo $content; ?>  <!-- 从数据库获取的编辑器内容 -->
</div>

4.3 完整示例

<!DOCTYPE html>
<html>
<head>
    <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>

5. 站外引用卡片功能详解

站外引用卡片是 HuayangEditor 的特色功能，用于插入带来源链接和可编辑引用文字的卡片，非常适合转载、参考文献标注等场景。

5.1 插入卡片

在编辑器中，点击工具栏的蓝色 “站外引用” 按钮，会依次弹出两个输入框：

来源网址：输入外部链接（如 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 区域可编辑）。
卡片结构：卡片边框不可编辑，保持整体布局。

5.2 在展示页正确显示卡片

确保您已经按照第 4 节的方法引入了展示样式，并包裹了内容容器。卡片样式已包含在 getDisplayStyles() 返回的 CSS 中。

6. 常见问题及解决

6.1 点击工具栏按钮导致页面刷新

如果编辑器被放置在一个 <form> 标签内，且按钮未设置 type="button"，可能触发表单提交导致刷新。HuayangEditor 已将所有按钮设为 <div> 模拟按钮，并阻止了默认事件，一般不会出现此问题。若仍遇到，请检查外部页面是否有额外的 JavaScript 拦截事件。

6.2 初始化后不显示之前保存的内容

在初始化编辑器时，请使用 initialContent 选项传入保存的 HTML：

const editor = new HuayangEditor('#container', {
    initialContent: ''
});

6.3 图标太大或太小

编辑器的图标大小默认设置为 0.9rem。如需调整，可以自定义 CSS 覆盖：

.huayang-editor-toolbar .tool-btn i {
    font-size: 1rem !important;
}

7. 完整示例代码

7.1 编辑器页面 (edit.php)

<?php
// 假设从数据库获取之前保存的内容
$savedContent = '<h2>示例内容</h2><p>之前保存的文本</p>';
?>
<!DOCTYPE html>
<html>
<head>
    <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>
    <div id="editor"></div>
    <button onclick="saveContent()">保存内容</button>
    <script>
        const editor = new HuayangEditor('#editor', {
            height: 400,
            placeholder: '在这里写文章...',
            initialContent: 
        });
        function saveContent() {
            const content = editor.getContent();
            // 通过 AJAX 将 content 发送到服务器保存
            console.log('保存的内容:', content);
        }
    </script>
</body>
</html>

7.2 展示页面 (view.php)

<?php
// 从数据库获取保存的内容
$content = '<div class="external-ref-card">......</div>';
?>
<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <style>
        <?php
        if (class_exists('HuayangEditor')) {
            echo HuayangEditor::getDisplayStyles();
        }
        ?>
    </style>
</head>
<body>
    <div class="huayang-editor-content">
        <?php echo $content; ?>
    </div>
</body>
</html>

版本更新日志

🎉 V2.2.1 - 修复已知错误

发布于: 2026-03-18

优化版：提升加载速度、内存管理、代码清晰度；新增 initialContent 选项；
缩小图标尺寸至 0.9rem。

🎉 V2.0.0 - 新增功能一览

发布于: 2026-03-10

撤销/重做、清除格式、对齐方式、水平线
字体下拉选择、字号下拉选择
插入视频、插入表情符号
站外引用卡片功能完善

技术支持

如果您在使用过程中遇到任何问题，欢迎访问官方网站或联系开发者。本编辑器基于 MIT 协议开源，您可以自由使用、修改和分发。

文档版本： v2.2.2 · 更新日期： 2026-03-20 · 在线演示： http://hy.168hot.cn/fuwenben/

文档导航

版本更新

🌺 婳阳 HuayangEditor