找到
1
篇与
编辑器
相关的结果
-
如何在 Typecho 中编辑器输入#标签实现自动填充标签 如何在 Typecho 中实现 Joe 编辑器标签自动填充 在 Typecho 的文章编辑过程中，如果你使用 Joe 编辑器，可能会希望输入#标签后能自动提取并填充到文章的标签输入框中，以提高工作效率。接下来，我们将详细介绍如何通过开发一个 Typecho 插件来实现这一功能。 一、功能实现原理 这个功能的实现依赖于 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 编辑器标签自动填充的功能，这将大大提高你撰写文章时添加标签的效率。
