MarkDown是非常实用的轻量级标记语言,通过一些简单的标记就可以实现文本的快速格式化。在工作中使用MarkDown撰写文档将能够很大程度上提升效率。当然,由于这一特性,MarkDown在博客文章撰写尤其是技术博客撰写中也有很大的优势。
许多先进的博客框架已经将MarkDown语法集成在了自己的编辑器中,例如著名的Hexo、Ghost、Jekyll、Octopress等。但是老旧的WordPress却一直没有将MarkDown集成在自己的编辑器中,即使是在最新的版本中也只能兼容少量的MarkDown语法。
当然,WordPress提供了许多MarkDown的插件,这些插件我也试用过,大都有着这样或那样的问题,试用过后觉得并不能够完美的编辑MarkDown。直到看到了风景侠的文章(链接),终于找到了解决问题的思路,即在WordPress的后台集成MarkDown编辑器。原文中有不少疏漏,在本文中已经纠正并优化。
原理
在 post 页面添加一个 textarea,监听 input 事件,事件中将文本框的内容取出,用 marked.js 进行转码,将转码后的 html 放在系统中的 tinyMCE 中。 在保存时将 textarea 中的文本存入 metadata 中,下次可以继续编辑。
应用
下载marked.js文件,放入主题对应的js目录下。marked.js是一套js库,用于将markdown代码转换成html。这个marked.js来源于Jeffrey的开源项目(链接),当然你也可以在Bootstrap中文网找到对应的下载(链接)。我的是:
/wp-content/themes/zivers/js/
在同一目录下创建markdown-editor.js文件。markdown-editor.js 用于监听文本框事件,来实时调用 marked.js 来转换 markdown 代码。内容如下:
function markdownEditorChanged() { var editor = document.getElementById("markdown"); if (tinyMCE.activeEditor) { tinyMCE.activeEditor.setContent(marked(editor.value)); } } function previewMarkdown() { var editor = document.getElementById("markdown"); myWindow=window.open('','','width=200,height=100') myWindow.document.write("This is 'myWindow'") myWindow.focus() myWindow.opener.document.write("This is the parent window") }
最后,在functions.php中加入以下hook,完成创建和保存MarkDown编辑内容:
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="15" 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/markdown-editor.js'); } add_action( 'admin_enqueue_scripts', 'markdown_script');