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

assets/js/comments.js

@@ -176,6 +176,76 @@
 		}
 	})
 
+	/* ── 富文本工具条（3.2.24）─────────────────────────────────
+	 * 评论内容仍是纯文本存储；工具条只在光标/选区处插入受控标签：
+	 *   B → <strong>…</strong>   I → <em>…</em>
+	 *   颜色 → <span style="color:#xxx">…</span>
+	 * 后端由 theme-comments.php 的 kses 白名单放行这三种标签
+	 * （style 属性再经 WP 核心 safecss_filter_attr 消毒，只留安全属性）。
+	 *
+	 * 选区为空时插入占位文本并**选中**它 —— 用户直接打字就覆盖占位，
+	 * 这是各家编辑器工具条的通行做法；不选中的话占位文本会留在正文里。
+	 */
+	function wrapSelection (before, after, placeholder) {
+		if (!textarea) return
+		textarea.focus()
+		var s = textarea.selectionStart || 0
+		var e = textarea.selectionEnd || 0
+		var v = textarea.value
+		var sel = v.slice(s, e)
+		var usedPlaceholder = false
+		if (sel === '') {
+			sel = placeholder || ''
+			usedPlaceholder = true
+		}
+		textarea.value = v.slice(0, s) + before + sel + after + v.slice(e)
+		// 选中被包裹的内容（或占位文本），光标落回包裹体内
+		var a = s + before.length
+		var b = a + sel.length
+		try { textarea.setSelectionRange(a, b) } catch (ex) { /* 老 IE 忽略 */ }
+		return usedPlaceholder
+	}
+
+	// B / I：按钮上带 data-wrap-before / data-wrap-after，加新按钮不用改 JS
+	$$('.comment-tool-btn[data-wrap-before]', form).forEach(function (btn) {
+		btn.addEventListener('click', function () {
+			wrapSelection(
+				btn.getAttribute('data-wrap-before') || '',
+				btn.getAttribute('data-wrap-after') || '',
+				I18N.boldPlaceholder || '加粗文字'
+			)
+		})
+	})
+
+	/* 字体颜色面板：开合 + 色板点击包裹选区。
+	 * 与表情面板同款交互：点按钮开/关，点外面关，选中后关。 */
+	var colorBtn = $('#yang-tool-color', form)
+	var colorPanel = $('#yang-color-panel', form)
+	if (colorBtn && colorPanel) {
+		colorBtn.addEventListener('click', function (ev) {
+			ev.stopPropagation()
+			var open = !colorPanel.hidden
+			colorPanel.hidden = open
+			colorBtn.setAttribute('aria-expanded', open ? 'false' : 'true')
+		})
+		document.addEventListener('click', function (ev) {
+			if (colorPanel.hidden) return
+			if (colorPanel.contains(ev.target) || colorBtn.contains(ev.target)) return
+			colorPanel.hidden = true
+			colorBtn.setAttribute('aria-expanded', 'false')
+		})
+		colorPanel.addEventListener('click', function (ev) {
+			var sw = ev.target.closest ? ev.target.closest('.comment-color-swatch') : null
+			if (!sw) return
+			var c = sw.getAttribute('data-color') || '#000000'
+			// 色值只允许 #rrggbb，面板里写死的，这里再挡一道
+			if (!/^#[0-9a-fA-F]{6}$/.test(c)) return
+			wrapSelection('<span style="color:' + c + '">', '</span>', I18N.colorPlaceholder || '彩色文字')
+			colorPanel.hidden = true
+			colorBtn.setAttribute('aria-expanded', 'false')
+		})
+	}
+
 	/* ── 表情面板 ──────────────────────────────────────────────
 	 * 点表情按钮 → 把对应代码插到光标处（不是简单追加到末尾）。
 	 * 旧实现是 `myField.value += tag`，光标本在中间也会跑到最后，