laoyang/wordpress-kratos-yang
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

3.2.24: 评论富文本工具条（B/I/颜色/表情移入）+ kses 放行 span+style + 后台设置页标签左列竖排重排

Browse Source
This commit is contained in:
laoyang
2026-10-24 21:59:06 +08:00
parent 78fce2d87d
commit fd27b4d218
6 changed files with 441 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files
comments.php
+78 -7
View File
@@ -222,21 +222,92 @@ if ($yang_per_page <= 0) {
<div class="comment-textarea">
<label for="comment" class="sr-only"><?php esc_html_e('评论内容', 'kratos'); ?></label>
<textarea class="comment-input" id="comment" name="comment" rows="6"
placeholder="<?php esc_attr_e('说点什么…（支持 :smile: 这类表情代码）', 'kratos'); ?>"
required="required" maxlength="65525"></textarea>
<div class="comment-bar">
<div class="comment-bar-left">
<button type="button" class="comment-smile-btn" id="yang-smile-btn"
<?php
/* ── 3.2.24 富文本工具条 ──────────────────────────────
* 在输入框上方一排小按钮：加粗 / 斜体 / 字体颜色 / 表情。
* 不是 contenteditable 富文本 —— 评论内容仍是纯文本存储，
* 工具条只是在光标处插入受控的少量 HTML 标签
* （<strong>/<em>/<span style="color:…">），后端由
* theme-comments.php 里的 kses 白名单放行这三种标签，
* style 属性由 WP 核心的 safecss_filter_attr 二次消毒，
* 只放行 color 这类安全属性。改动面最小、无 XSS 面。
*
* 表情按钮原来在底栏左侧，3.2.24 起并入
* 工具条；id（yang-smile-btn / yang-smile-panel）不变，
* comments.js 的面板开合逻辑不用改。
*/
?>
<div class="comment-toolbar" role="toolbar"
aria-label="<?php esc_attr_e('评论格式工具条', 'kratos'); ?>">
<button type="button" class="comment-tool-btn" id="yang-tool-bold"
data-wrap-before="&lt;strong&gt;" data-wrap-after="&lt;/strong&gt;"
title="<?php esc_attr_e('加粗', 'kratos'); ?>"
aria-label="<?php esc_attr_e('加粗', 'kratos'); ?>">
<span class="comment-tool-glyph comment-tool-glyph-bold" aria-hidden="true">B</span>
</button>
<button type="button" class="comment-tool-btn" id="yang-tool-italic"
data-wrap-before="&lt;em&gt;" data-wrap-after="&lt;/em&gt;"
title="<?php esc_attr_e('斜体', 'kratos'); ?>"
aria-label="<?php esc_attr_e('斜体', 'kratos'); ?>">
<span class="comment-tool-glyph comment-tool-glyph-italic" aria-hidden="true">I</span>
</button>
<span class="comment-toolbar-sep" aria-hidden="true"></span>
<div class="comment-tool-group">
<button type="button" class="comment-tool-btn comment-tool-color" id="yang-tool-color"
aria-expanded="false" aria-controls="yang-color-panel"
title="<?php esc_attr_e('字体颜色', 'kratos'); ?>"
aria-label="<?php esc_attr_e('字体颜色', 'kratos'); ?>">
<span class="comment-tool-glyph comment-tool-glyph-color" aria-hidden="true">A</span>
</button>
<div class="comment-color-panel" id="yang-color-panel" hidden>
<?php
/* 预设色板：常用 8 色。data-color 由 JS 读去包选区，
不用 <input type=color> —— 原生取色器弹窗体验割裂，
而且访客只是想快速标个重点色。 */
$yang_tool_colors = array(
'#000000' => '黑色',
'#7f8c8d' => '灰色',
'#e74c3c' => '红色',
'#e67e22' => '橙色',
'#f1c40f' => '黄色',
'#2ecc71' => '绿色',
'#00a2ff' => '蓝色',
'#9b59b6' => '紫色',
);
foreach ($yang_tool_colors as $yang_c => $yang_name) :
?>
<button type="button" class="comment-color-swatch"
data-color="<?php echo esc_attr($yang_c); ?>"
style="background-color: <?php echo esc_attr($yang_c); ?>;"
title="<?php echo esc_attr(sprintf(__('字体颜色：%s', 'kratos'), $yang_name)); ?>"
aria-label="<?php echo esc_attr(sprintf(__('字体颜色：%s', 'kratos'), $yang_name)); ?>"></button>
<?php endforeach; ?>
</div>
</div>
<span class="comment-toolbar-sep" aria-hidden="true"></span>
<div class="comment-tool-group comment-tool-group-smile">
<button type="button" class="comment-tool-btn comment-smile-btn" id="yang-smile-btn"
aria-expanded="false" aria-controls="yang-smile-panel"
title="<?php esc_attr_e('插入表情', 'kratos'); ?>">
title="<?php esc_attr_e('插入表情', 'kratos'); ?>"
aria-label="<?php esc_attr_e('插入表情', 'kratos'); ?>">
<i class="kicon i-face" aria-hidden="true"></i>
</button>
<div class="comment-smile-panel" id="yang-smile-panel" hidden>
<?php echo $smilies; ?>
</div>
</div>
</div>
<textarea class="comment-input" id="comment" name="comment" rows="6"
placeholder="<?php esc_attr_e('说点什么…（支持 :smile: 这类表情代码）', 'kratos'); ?>"
required="required" maxlength="65525"></textarea>
<div class="comment-bar">
<div class="comment-bar-right">
<span class="comment-status" id="yang-comment-status" role="status" aria-live="polite"></span>
<button type="submit" id="submit" class="comment-submit">