wordpress 深度集成 markdown

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

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

先看下效果

原理

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

开始集成

1. 将 marked.js 拷贝到 ~\wp-content\{你的主题目录}\js\ 目录下
   

marked.js 是一套 js 库，用于将 markdown 代码转换成 html

在 function.js 中加入以下代码

// 增加 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' );
}

// 向页面输出 markdown 文本框
function markdown_html( $object, $box ) { ?>
    

        for="markdown">Markdown
        

        "markdown"</span> id=<span class="hljs-string">"markdown"</span> cols=<span class="hljs-string">"60"</span> oninput =<span class="hljs-string">"markdownEditorChanged()"</span> rows=<span class="hljs-string">"4"</span> tabindex=<span class="hljs-string">"30"</span> style=<span class="hljs-string">"width: 100%;"</span>><span class="hljs-preprocessor"><?php</span> <span class="hljs-keyword">echo</span> htmlspecialchars (get_post_meta( <span class="hljs-variable">$object</span>->ID, <span class="hljs-string">'markdown'</span>, <span class="hljs-keyword">true</span> )); <span class="hljs-preprocessor">?></span>
    
 }

// 保存 markdown 代码
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 );
}

// 监听 markdown 文本框输入事件，将文本框内容转换成 html 并显示到 tinyMCE（预览中） 中
function make_markdown() {
                echo '';
}

//加载自定义代码
add_action( 'admin_footer', 'make_markdown', 1);

function markdown_script() {
            wp_enqueue_script('markdown', get_template_directory_uri() . '/js/marked.js' , array('jquery'));
}

// 加载 strapdown.js
add_action( 'admin_enqueue_scripts', 'markdown_script'); 

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

http://www.scaperow.com/323