如何在 Typecho 中实现 Joe 编辑器标签自动填充
在 Typecho 的文章编辑过程中，如果你使用 Joe 编辑器，可能会希望输入#标签后能自动提取并填充到文章的标签输入框中，以提高工作效率。接下来，我们将详细介绍如何通过开发一个 Typecho 插件来实现这一功能。
6v6博客地址：6v6.ren
一、功能实现原理
这个功能的实现依赖于 JavaScript 来监听 Joe 编辑器中的输入事件，通过正则表达式提取出#开头的标签，然后将这些标签填充到 Typecho 文章编辑页面的标签输入框中。同时，我们使用 Typecho 的插件机制，将相关的 JavaScript 代码注入到文章编辑页面中。
二、准备工作
了解 HTML 结构
通过浏览器的开发者工具（如 Chrome 的 F12），确定 Joe 编辑器的文本输入框和 Typecho 标签输入框的 HTML 元素。例如，Joe 编辑器文本输入框的 class 为 cm - editor cm - focused ͼ1 ͼ2 ͼ4，Typecho 标签输入框的 id 为 token - input - tags。
熟悉 JavaScript 和 Typecho 插件开发基础
需要了解基本的 JavaScript DOM 操作和事件监听知识，以及 Typecho 插件开发的基本规范和流程。
三、插件代码编写
（一）创建插件文件
在 Typecho 的 usr/plugins 目录下创建一个新目录，例如 AutoTagExtractor。
在 AutoTagExtractor 目录下创建一个 PHP 文件，命名为 AutoTagExtractor.php。
（二）编写插件代码
footer = array('AutoTagExtractorPlugin', 'addScript');
return _t('插件已激活，可从Joe编辑器提取#标签并自动填充到文章标签输入框');
}
/**
* 禁用插件方法
*
* @return string
*/
public static function deactivate()
{
return _t('插件已停用');
}
/**
* 配置插件方法
*
* @param Typecho_Widget_Helper_Form $form
* @return void
*/
public static function config(Typecho_Widget_Helper_Form $form)
{
// 这里可添加插件配置项，目前暂不需要
}
/**
* 个人用户的配置方法
*
* @param Typecho_Widget_Helper_Form $form
* @return void
*/
public static function personalConfig(Typecho_Widget_Helper_Form $form)
{
// 这里可添加个人用户的配置项，目前暂不需要
}
/**
* 在文章编辑页面底部添加JavaScript脚本
*
* @return void
*/
public static function addScript()
{
echo '';
// 当页面的DOM加载完成后执行以下代码
echo 'document.addEventListener(\'DOMContentLoaded\', function () {';
// 获取Joe编辑器的文本输入框元素，通过类名选择器
echo 'const joeEditorTextareaElements = document.getElementsByClassName(\'cm - editor cm - focused ͼ1 ͼ2 ͼ4\');';
// 取第一个匹配到的元素作为Joe编辑器的文本输入框
echo 'const joeEditorTextarea = joeEditorTextareaElements.length > 0? joeEditorTextareaElements[0] : null;';
// 获取Typecho标签输入框元素，通过id选择器
echo 'const tagInput = document.getElementById(\'token - input - tags\');';
// 检查是否成功获取到这两个元素
echo 'if (joeEditorTextarea && tagInput) {';
// 为Joe编辑器的文本输入框添加keyup事件监听器
echo 'joeEditorTextarea.addEventListener(\'keyup\', function () {';
// 获取当前输入框中的文本内容
echo 'const inputText = joeEditorTextarea.value;';
// 用于存储提取出的标签
echo 'const tags = [];';
// 使用正则表达式匹配所有以#开头，且后面跟着非#字符的内容
echo 'const tagMatches = inputText.match(/#([^#]+)/g);';
// 如果匹配到了标签
echo 'if (tagMatches) {';
// 遍历所有匹配到的标签
echo 'tagMatches.forEach(function (tagMatch) {';
// 去除标签前面的#符号，并去除前后空格
echo 'let tag = tagMatch.substring(1).trim();';
// 检查标签是否已经存在于tags数组中，如果不存在则添加
echo 'if (tags.indexOf(tag) === -1) {';
echo 'tags.push(tag);';
echo '}';
echo '});';
// 将tags数组中的标签用逗号连接成字符串
echo 'const tagString = tags.join(\',\');';
// 将处理后的标签字符串填充到Typecho标签输入框中
echo 'tagInput.value = tagString;';
echo '} else {';
// 如果没有匹配到标签，清空Typecho标签输入框
echo 'tagInput.value = \'\';';
echo '}';
echo '});';
echo '}';
echo '});';
echo '';
}
}（三）代码解释
- 激活插件方法（activate） ：通过
Typecho_Plugin::factory注册一个钩子，当加载admin/write - post.php（文章编辑页面）的页脚时，调用addScript方法，在页面中注入 JavaScript 代码。 - 禁用插件方法（deactivate）：简单返回一个提示信息，表示插件已停用。
- 配置插件方法（config）和个人用户配置方法（personalConfig）：目前这两个方法为空，后续如果需要添加插件的全局配置或个人用户配置项，可以在这里进行扩展。
- 添加脚本方法（addScript） ：
- 使用
document.addEventListener('DOMContentLoaded', function () {... })确保页面 DOM 加载完成后再执行后续代码。 - 通过
document.getElementsByClassName获取 Joe 编辑器的文本输入框元素，由于该方法返回一个类数组对象，所以取第一个元素作为实际的输入框。 - 通过
document.getElementById获取 Typecho 标签输入框元素。 - 为 Joe 编辑器的文本输入框添加
keyup事件监听器，当用户松开按键时触发。 - 在事件处理函数中，获取输入框的文本内容，使用正则表达式
/#([^#]+)/g匹配所有以#开头的标签。 - 遍历匹配到的标签，去除#符号和前后空格，检查是否重复，将不重复的标签添加到
tags数组中。 - 将
tags数组中的标签用逗号连接成字符串，填充到 Typecho 标签输入框中。如果没有匹配到标签，则清空标签输入框。
- 使用
四、插件安装与启用
上传插件文件
如果你在本地开发环境创建了插件文件，可以使用 FTP 工具将整个 AutoTagExtractor 文件夹上传到 Typecho 网站的 usr/plugins 目录下。
启用插件
- 登录 Typecho 后台管理界面。
- 点击左侧菜单中的 "插件" 选项。
- 在插件列表中找到 "自动标签提取插件"（即
AutoTagExtractorPlugin），点击 "启用" 按钮。启用成功后，会显示提示信息 "插件已激活，可从 Joe 编辑器提取 #标签并自动填充到文章标签输入框"。
五、插件使用与测试
打开文章编辑页面
点击左侧菜单中的 "撰写文章"，进入文章编辑页面。
测试标签提取功能
在 Joe 编辑器中输入带有#开头的标签，例如 #软件 #工具 #免费。当你输入完成或松开按键时，Typecho 文章编辑页面的 token - input - tags 标签输入框会自动填充处理后的标签，显示为 软件,工具,免费，并且会自动去除重复标签和前后空格。
六、注意事项
- 元素选择器准确性：确保 Joe 编辑器的文本输入框的类名和 Typecho 标签输入框的 id 是准确的。如果这些元素的选择器发生变化，需要相应地修改插件中的 JavaScript 代码。
- 兼容性：该插件在大多数现代浏览器中应该可以正常工作，但在一些旧版本的浏览器中可能需要进行兼容性处理。
- 插件更新与维护 ：如果后续需要对插件进行功能扩展或修复问题，可以直接修改
AutoTagExtractor.php文件中的代码，修改完成后保存并刷新 Typecho 后台页面即可生效。
通过以上步骤，你就成功地在 Typecho 中实现了 Joe 编辑器标签自动填充的功能，这将大大提高你撰写文章时添加标签的效率。