富文本编辑器 控件 可视化代码生成平台 · 富媒体控件
<div style="max-width:920px;margin:0 auto;font-family:-apple-system,'Microsoft YaHei',sans-serif;color:#1f2937;line-height:1.7;"><div style="background:linear-gradient(135deg,#1e3a8a,#2563eb);color:#fff;border-radius:16px;padding:34px 32px;margin-bottom:24px;">
<div style="margin:0 0 6px;font-size:28px;font-weight:700;">富文本编辑器 控件</div>
<div style="margin:0;opacity:.9;">可视化代码生成平台 · 富媒体控件（13/14）</div>
</div>
<div style="background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:18px 22px;margin:16px 0;box-shadow:0 1px 3px rgba(0,0,0,.04);">
<b>用途：</b>录入图文混排正文——商品详情、文章内容、协议条款、公告等。<br>
<b>存储：</b><code style="background:#0f172a;color:#e2e8f0;padding:2px 7px;border-radius:5px;font-size:13px;">text</code>（保存 HTML 源码）。<br>
<b>列表/搜索：</b>列表默认不显示（体积大）；不参与搜索。
</div>
<div style="margin:32px 0 12px;font-size:21px;font-weight:700;border-left:5px solid #2563eb;padding-left:12px;">控件解析（外观 · 行为交互 · 样式 · 数据）</div>
<div style="background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:18px 22px;margin:14px 0;">
<table style="width:100%;border-collapse:collapse;font-size:14px;">
<tbody><tr><th style="border:1px solid #e5e7eb;padding:8px 12px;background:#f1f5f9;width:96px;">维度</th><th style="border:1px solid #e5e7eb;padding:8px 12px;background:#f1f5f9;">说明</th></tr>
<tr><td style="border:1px solid #e5e7eb;padding:8px 12px;"><b>外观</b></td><td style="border:1px solid #e5e7eb;padding:8px 12px;">工具栏（加粗/标题/链接/图片等）+ 编辑区，类 CMS 编辑框。</td></tr>
<tr><td style="border:1px solid #e5e7eb;padding:8px 12px;"><b>行为交互</b></td><td style="border:1px solid #e5e7eb;padding:8px 12px;">所见即所得；可插入图片/链接/表格；失焦存 HTML。</td></tr>
<tr><td style="border:1px solid #e5e7eb;padding:8px 12px;"><b>样式</b></td><td style="border:1px solid #e5e7eb;padding:8px 12px;">编辑区最小高度、工具栏按钮集可配。</td></tr>
<tr><td style="border:1px solid #e5e7eb;padding:8px 12px;"><b>数据</b></td><td style="border:1px solid #e5e7eb;padding:8px 12px;">text/html 长文本；存 HTML 片段；需 XSS 净化后再入库与前端渲染；不搜索。</td></tr>
</tbody></table>
</div>
<div style="margin:32px 0 12px;font-size:21px;font-weight:700;border-left:5px solid #2563eb;padding-left:12px;">属性面板（右侧）功能详解</div>
<div style="background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:18px 22px;margin:14px 0;">
<table style="width:100%;border-collapse:collapse;font-size:14px;">
<tbody><tr><th style="border:1px solid #e5e7eb;padding:7px 10px;background:#f1f5f9;">分组</th><th style="border:1px solid #e5e7eb;padding:7px 10px;background:#f1f5f9;">字段</th><th style="border:1px solid #e5e7eb;padding:7px 10px;background:#f1f5f9;">说明</th></tr>
<tr><td style="border:1px solid #e5e7eb;padding:7px 10px;">基础</td><td style="border:1px solid #e5e7eb;padding:7px 10px;">字段名 / 标签 / 提示 / 必填</td><td style="border:1px solid #e5e7eb;padding:7px 10px;">同通用规则；必填校验"非空 HTML"。</td></tr>
<tr><td style="border:1px solid #e5e7eb;padding:7px 10px;">显示</td><td style="border:1px solid #e5e7eb;padding:7px 10px;">进列表 / 排序权重</td><td style="border:1px solid #e5e7eb;padding:7px 10px;">默认不进列表（性能考虑）。</td></tr>
<tr><td style="border:1px solid #e5e7eb;padding:7px 10px;">校验</td><td style="border:1px solid #e5e7eb;padding:7px 10px;">最大长度</td><td style="border:1px solid #e5e7eb;padding:7px 10px;">HTML 源码字符上限（可选）。</td></tr>
<tr><td style="border:1px solid #e5e7eb;padding:7px 10px;">专属</td><td style="border:1px solid #e5e7eb;padding:7px 10px;">工具栏模式</td><td style="border:1px solid #e5e7eb;padding:7px 10px;">精简（加粗/列表/链接）/ 完整（含表格/图片/代码等）。</td></tr>
<tr><td style="border:1px solid #e5e7eb;padding:7px 10px;">专属</td><td style="border:1px solid #e5e7eb;padding:7px 10px;">编辑器高度</td><td style="border:1px solid #e5e7eb;padding:7px 10px;">如 320px。</td></tr>
<tr><td style="border:1px solid #e5e7eb;padding:7px 10px;">专属</td><td style="border:1px solid #e5e7eb;padding:7px 10px;">图片上传</td><td style="border:1px solid #e5e7eb;padding:7px 10px;">走平台图床，插入自动生成 URL；可限最大尺寸。</td></tr>
<tr><td style="border:1px solid #e5e7eb;padding:7px 10px;">高级</td><td style="border:1px solid #e5e7eb;padding:7px 10px;">启用 / 停用</td><td style="border:1px solid #e5e7eb;padding:7px 10px;">停用仅隐藏，不删列不丢数据。</td></tr>
</tbody></table>
</div>
<div style="margin:32px 0 12px;font-size:21px;font-weight:700;border-left:5px solid #2563eb;padding-left:12px;">演示</div>
<div style="background:#f8fafc;border:1px dashed #cbd5e1;border-radius:10px;padding:14px 16px;margin:12px 0;">
<span style="font-size:13px;color:#6b7280;display:block;margin-bottom:6px;">商品详情（工具栏 + 编辑区）</span>
<div style="background:#fff;border:1px solid #cbd5e1;border-radius:8px 8px 0 0;padding:6px 8px;font-size:13px;color:#475569;display:flex;gap:8px;flex-wrap:wrap;">B✔ I✔ U✔ 列表 | 对齐 | 图片 | 表格 | 链接 | 撤销</div>
<div style="border:1px solid #cbd5e1;border-top:none;border-radius:0 0 8px 8px;padding:12px;background:#fff;min-height:64px;font-size:14px;color:#334155;">在此输入图文混排内容，支持插图与表格……</div>
<pre style="background:#0f172a;color:#e2e8f0;padding:10px 14px;border-radius:8px;font-size:12px;overflow:auto;margin:10px 0 0;">字段名: content | 控件: editor | 工具栏: 完整 | 高度: 320</pre>
</div>
<div style="background:#fffbeb;border:1px solid #fde68a;color:#92400e;border-radius:10px;padding:12px 16px;font-size:14px;margin:12px 0;">安全：输出到前台时务必走平台净化（过滤 script/iframe/on* 等）再渲染，防止 XSS；图片建议压缩并限类型。</div>
<div style="margin-top:36px;color:#6b7280;font-size:13px;text-align:center;">富文本编辑器 控件文档 · 随工具迭代更新</div></div> 有想法或者改进意见，欢迎在本帖回帖，供大家一起参考 亲测无内购项目，纯分享性质的工具，值得下载试一试✨ 运行稳定度尚可，如果遇到报错情况，可以把问题描述清楚回帖😎
页:
[1]