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

最近文章都是使用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功能了，赶紧去试试吧。

喜欢 (0)赏

【请潘老师喝杯Coffee吧！】

分享 (0)