WordPress简单集成MarkDown编辑功能

WordPress4.3以上的高版本虽然集成了部分markdown的功能，结合Wordpress自带编辑器也基本不错了，但是没有单独的Markdown输入框还是有点不爽，上网捣鼓了一下，找到了一个比较简单的集成方法，这里分享一下，当然功能还是有点欠缺（比起插件还是弱了一点），但是轻量级文章编写也完全够用了。

集成原理

在后台 post 页面添加一个 textarea，监听 input 事件，事件中将文本框的内容取出，用 marked.js 进行转码，将转码后的 html 放在系统中的 tinyMCE 中。在保存时将 textarea 中的文本存入 media data 中，下次可以继续编辑。

集成后效果

实时预览 即见即所得，甚至你可以作为一个专门的 markdown 编辑器来使用
代码高亮 需要配合代码高亮插件，我已经对marked.js做了修改，编译后的hmtl代码标签完美兼容Crayon Syntax Highlighter高亮插件，爱折腾的也可以自己改成其他插件的完美支持
代码分离 markdown 的代码和 html 代码分离，互不影响，并且会将 markdown 代码保存下来，以便下次继续编辑。

注：代码分离和保存，只适用于单纯使用了Markdown编辑框编辑的情况，由于这儿没有HTML到Markdown语法的转换，所以在在原编辑框编辑的部分，不会同步，且集成原理注定了在原编辑框编辑后再次在Markdown编辑框编辑会以Markdown的内容为准，所以需要原编辑框内操作的放在最后进行，但这种情况下Markdown内保存文本也没了意义，所以这个集成还是有所缺陷

Markdown语法转换和编辑脚本

脚本

注：点开以上链接，右键另存为即可得到对应js文件

下载以上两个js脚本，在主题所在的目录下新建一个名为markdown的文件夹，上传即可

Markdown编辑框后台集成

后台markdown编辑框的集成
调用对应js脚本转化markdown语法

在主题的functions.php中加入以下代码完成集成

// 增加 markdown 功能到后台编辑器
add_action( 'admin_menu', 'create_markdown' );
add_action( 'save_post', 'save_markdown', 10, 2 );

function create_markdown() {
    add_meta_box( 'markdown_box', 'Markdown', 'markdown_html', 'post', 'normal', 'high' );
}

function markdown_html( $object, $box ) { ?>
        <textarea name="markdown" id="markdown" cols="60" oninput ="markdownEditorChanged()" rows="50" style="width: 100%; height:100%"><?php echo htmlspecialchars (get_post_meta( $object->ID, 'markdown', true )); ?></textarea>
<?php }

function save_markdown( $post_id, $post ) {
    if ( !current_user_can( 'edit_post', $post_id ) )
        return $post_id;

    $meta_value = get_post_meta( $post_id, 'markdown', true );
    $new_meta_value = $_POST['markdown'];

    if ( $new_meta_value && '' == $meta_value )
        add_post_meta( $post_id, 'markdown', $new_meta_value, true );

    elseif ( $new_meta_value != $meta_value )
        update_post_meta( $post_id, 'markdown', $new_meta_value );

    elseif ( '' == $new_meta_value && $meta_value )
        delete_post_meta( $post_id, 'markdown', $meta_value );
}

function markdown_script() {
    wp_enqueue_script('markdown', get_template_directory_uri() . '/markdown/marked.js' );
    wp_enqueue_script('makemarkdown', get_template_directory_uri() . '/markdown/markdown-editor.js');
}

add_action( 'admin_enqueue_scripts', 'markdown_script');

// 增加 markdown 功能到后台编辑器

add_action( 'admin_menu', 'create_markdown' );

add_action( 'save_post', 'save_markdown', 10, 2 );

function create_markdown() {

add_meta_box( 'markdown_box', 'Markdown', 'markdown_html', 'post', 'normal', 'high' );

}

function markdown_html( $object, $box ) { ?>

<textarea name="markdown" id="markdown" cols="60" oninput ="markdownEditorChanged()" rows="50" style="width: 100%; height:100%"><?php echo htmlspecialchars (get_post_meta( $object->ID, 'markdown', true )); ?></textarea>

<?php }

function save_markdown( $post_id, $post ) {

if ( !current_user_can( 'edit_post', $post_id ) )

return $post_id;

$meta_value = get_post_meta( $post_id, 'markdown', true );

$new_meta_value = $_POST['markdown'];

if ( $new_meta_value && '' == $meta_value )

add_post_meta( $post_id, 'markdown', $new_meta_value, true );

elseif ( $new_meta_value != $meta_value )

update_post_meta( $post_id, 'markdown', $new_meta_value );

elseif ( '' == $new_meta_value && $meta_value )

delete_post_meta( $post_id, 'markdown', $meta_value );

}

function markdown_script() {

wp_enqueue_script('markdown', get_template_directory_uri() . '/markdown/marked.js' );

wp_enqueue_script('makemarkdown', get_template_directory_uri() . '/markdown/markdown-editor.js');

}

add_action( 'admin_enqueue_scripts', 'markdown_script');

这里介绍下我修改js脚本后插入代码的定制Markdown语法吧

```默认的Markdown代码插入规则

```php 指定插入的代码所属语言，这里我写的是php，其他的类似

```min 插入的代码折叠

```min|php 插入代码折叠并指明所属语言

最后的集成效果附图一张（来源于这种集成方法的第一作者Click Here!）

到目前为止Markdown就集成到了主题中，博主这篇文章就用的纯粹的Markdown语法编辑的，效果还不错吧

一	二	三	四	五	六	日
« 8月
						1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	29
30