wordpress 深度集成 markdown
来源:互联网 发布:贪心算法的设计思想 编辑:程序博客网 时间:2024/05/29 04:45
wordpress 的编辑器没有 markdown 功能,曾今寻便所有的 plugin ,发现都不太理想,并且作为一个非插件控的我,即使找到了大而全的插件,也会想方设法来去插件化。于是今天早上拍了下脑门,决定自己集成 markdown。
集成后的功能如下:
* 实时预览 即见即所得,甚至你可以作为一个专门的 markdown 编辑器来使用
* 代码高亮 程序员最爱,需要在前台做代码高亮
* 代码分离 markdown 的代码和 html 代码分离,互不影响,并且会将 markdown 代码保存下来,以便下次继续编辑。
先看下效果
原理
在 post 页面添加一个 textarea,监听 input 事件,事件中将文本框的内容取出,用 marked.js 进行转码,将转码后的 html 放在系统中的 tinyMCE 中。
在保存时将 textarea 中的文本存入 media data 中,下次可以继续编辑。
开始集成
- 将
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 ) { ?> <p> <label for="markdown">Markdown</label> <br /> <textarea name="markdown" id="markdown" cols="60" oninput ="markdownEditorChanged()" rows="4" tabindex="30" style="width: 100%;"><?php echo htmlspecialchars (get_post_meta( $object->ID, 'markdown', true )); ?></textarea> </p><?php }// 保存 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 '<script>function markdownEditorChanged(){var editor = document.getElementById("markdown"); tinyMCE.activeEditor.setContent(marked(editor.value)) }</script>';}//加载自定义代码add_action( 'admin_footer', 'make_markdown', 1);function markdown_script() { wp_enqueue_script('markdown', get_template_directory_uri() . '/js/marked.js' , array('jquery'));}// 加载 strapdown.jsadd_action( 'admin_enqueue_scripts', 'markdown_script');
目前后台的工作已经 ok,代码高亮需要在前台设置,参见后续文章
转自
http://www.scaperow.com/323
0 0
- wordpress 深度集成 markdown
- WordPress日记——集成markdown
- wordpress支持markdown
- Wordpress集成到zencart里
- WordPress 迈向 Markdown 的脚步
- 深度剖析WordPress主题结构
- sublime3集成markdown
- jsp集成markdown编辑器
- Markdown学习与集成
- Vue集成Markdown插件
- WordPress网站主题社交登录集成服务
- 在wordpress中使用 markdown:wp-markdown插件的使用方法
- Yii2中集成Markdown编辑器
- 网站如何集成markdown编辑器
- html页面集成markdown编辑器
- Redmine与Gitlab深度集成
- Magento中集成Wordpress最简便的方法
- wordpress DEDE的集成包无法上传图片解决方法
- Apache2.4在 win64 配置
- Windows7 64bit 配置NDK环境
- cocos2d-js html5自定义鼠标图案及设置原点方法
- Android避免启动时闪一下黑屏
- Android之Notification初识
- wordpress 深度集成 markdown
- 偷梁换柱:MMSeg4j借用庖丁解牛的词库
- (原创)大数据时代:基于微软案例数据库数据挖掘知识点总结(Microsoft 决策树分析算法)
- 手把手教你Dojo入门
- ECharts图表插件禁止拖动合并
- kettle分隔列转成行
- java文件复制
- 齐聚乌镇,世界因你而精彩
- SharePreferences 工具类