WordPress编辑器实现markdown转html代码实现

文
章
目
录

• 功能实现
• 步骤1：引入marked.js库
• 步骤2：添加自定义按钮
• 步骤3：测试功能

最近文章都是使用markdown写的，但是wordpress编辑器不支持直接解析markdown格式，插件下载了markdown-import导入插件，但是发现不太方便，也不太好用，每次都要在本地新建md文件，然后再导入到网站，比较麻烦，而且对有li列表样式和代码样式时就容易解析错误，于是潘老师自己使用通义灵码，写了一个初版，然后自己再微调修改下，就轻松搞定了。

功能实现

将自定义Markdown转HTML按钮放置在“添加媒体”按钮那一排，以下是详细的步骤和代码：

步骤1：引入marked.js库

首先，确保marked.js库已经加载到你的WordPress项目中。我们在主题的functions.php文件中添加以下代码来引入marked.js：

function add_marked_js() {
wp_enqueue_script(\'marked-js\', \'https://cdn.jsdelivr.net/npm/marked/marked.min.js\', array(), null, true);
}
add_action(\'admin_enqueue_scripts\', \'add_marked_js\');

步骤2：添加自定义按钮

接下来，你需要在WordPress编辑器上方添加一个自定义按钮。这可以通过JavaScript来实现。我们在主题的functions.php文件中添加以下代码来加载自定义脚本：

function add_custom_editor_button_script() {
wp_enqueue_script(\'custom-editor-button\', get_template_directory_uri() . \'/js/custom-editor-button.js\', array(\'jquery\'), null, true);
}
add_action(\'admin_enqueue_scripts\', \'add_custom_editor_button_script\');

然后，在主题的js文件夹中创建一个名为custom-editor-button.js的文件（这个文件路径大家可以根据自己的主题实际情况调整），并添加以下代码：

jQuery(document).ready(function($) {
// 创建按钮
var button = $(\'<button>\', {
text: \'Markdown转HTML\',
class: \'button\',
id: \'markdown-to-html-button\'
});

// 将按钮添加到“添加媒体”按钮后面
$(\'#insert-media-button\').after(button);

// 绑定按钮点击事件
$(\'#markdown-to-html-button\').on(\'click\',  function(event) {
        // 阻止默认行为
        event.preventDefault();
        // 获取编辑器中的Markdown内容
        $(\"#content\").val(marked.parse($(\"#content\").val()));
    });
});

步骤3：测试功能

完成上述步骤后，进入WordPress的编辑器页面【文本模式】下，我们会在“添加媒体”按钮后面看到一个“Markdown转HTML”的按钮。

我们将markdown格式的内容粘贴到编辑器，点击该按钮后，编辑器中的Markdown内容将会被解析为HTML内容。



通过以上步骤，我们就在Wordpress编辑器实现markdown转html功能了，赶紧去试试吧。