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脚本,在主题所在的目录下新建一个名为markdown的文件夹,上传即可
Markdown编辑框后台集成
- 后台markdown编辑框的集成
- 调用对应js脚本转化markdown语法
在主题的functions.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 |
// 增加 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语法编辑的,效果还不错吧