wordpress 深度集成 markdown

wordpress 的编辑器没有 markdown 功能,曾今寻便所有的 plugin ,发现都不太理想,并且作为一个非插件控的我,即使找到了大而全的插件,也会想方设法来去插件化。于是今天早上拍了下脑门,决定自己集成 markdown。 集成后的功能如下:

  • 实时预览 即见即所得,甚至你可以作为一个专门的 markdown 编辑器来使用
  • 代码高亮 程序员最爱,需要在前台做代码高亮
  • 代码分离 markdown 的代码和 html 代码分离,互不影响,并且会将 markdown 代码保存下来,以便下次继续编辑。 先看下效果 markdown

原理

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

  1. 下载 marked.jsmakemarkdown.js

  2. marked.jsmakemarked.js 拷贝到 ~\wp-content\{你的主题目录}\js\ 目录下 > marked.js 是一套 js 库,用于将 markdown 代码转换成 html。makemarked.js 用于监听文本框事件,来实时调用 marked.js 来转换 markdown 代码。

  3. function.php中加入以下代码

    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
    31
    32
    33
    34
    35
    <pre class="lang:php decode:true">// 增加 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() . '/js/marked.js' );
    wp_enqueue_script('makemarkdown', get_template_directory_uri() . '/js/makemarkdown.js');
    }

    add_action( 'admin_enqueue_scripts', 'markdown_script');</pre>

目前后台的工作已经 ok,代码高亮需要在前台设置,参见后续文章