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,代码高亮需要在前台设置,参见后续文章

ionic 更新插件

介绍

本文只介绍如何为 ionic 项目做更新的功能,对于 ionic 很陌生的人可以先到官网上了解下。

对于 ionic 很了解的人也许知道,在ionic 1.1中包含的诸多新特性,包括 应用统计、推送集成、部署与更新、等。但是所有的功能都依赖于ionic的后端,国内的网络环境你懂得,可以说这些功能都不能用。本文将简单介绍,怎么改造属于自己的更新功能。 最终实现的效果是,通过前台的 js 来控制更新流程,通过原生代码来下载、应用更新,最重要的一点,不需要将更新包放在ionic后端,而是自己的服务器。

配置

ionic 的更新功能依赖于三者:

  1. 插件
    2.更新服务
    3.核心服务

三者已寄存在 git 上,建议将这三个仓库都 fork 到自己仓库中,以后好做维护。

插件地址:

https://github.com/driftyco/ionic-plugins-deploy 更新服务地址:

https://github.com/driftyco/ionic-service-deploy 核心服务地址:

https://github.com/driftyco/ionic-service-core

将 cli 定位到你的 ionic 工程下,使用以下命令来安装插件、更新服务、核心服务

ionic add ionic-service-core

ionic add ionic-service-deploy

ionic plugin add ionic-plugin-deploy

改造

由于要修改的地方较多,本文就不一一列举,我已将代码托管到 git 上,供读者参考,这里只说我改造逻辑。

  1. 打开 platforms 下的原生代码,找到向服务器发送更新请求的代码。

  2. 发现服务器的路径被硬编码,将路径指到一个变量上,并修改请求的路径结构。之前的路径太长了,不利于测试

  1. 修改 js 代码,扩展相应的方法,使其支持路径参数,并能够正常的传入到原生代码中。

  2. 更新端与服务器交互的数据如下

  • 检查更新的请求代码 update/check/{appid} > appid 是你的应用标示,可以在 www/app.js中指定。

  • 服务器返回数据结构

    1
    { 'compatible_binary': true, 'update_available': true, 'update: { 'uuid': "2.0.1" 'url': "/eoapp/www.zip" } } 

    compatible_binary 代表是否兼容

    update_available 是否有更新

    uuid 最新版本

    url 更新包的下载地址

    1. 准备一个更新包,将 ionic 项目下的 www 目录直接压缩,命名为 www.zip。这就是一个更新包。

    2. 搭建 nodejs 服务器环境,为检查更新的POST请求 update/check/:appid 定义路由器,请求参数,编写逻辑代码。上传更新包进行测试。

    为了方便读者参考,列出修改过的文件

platforms/ios/{你的ios项目名字}/Plugins/ionic-plugin-deploy/IonicDeploy.m
platforms/android/src/com/ionic/deploy/IonicDeploy.java
plugins/ionic-plugin-deploy/www/ionicdeploy.js
www/lib/ionic-service-deploy/ionic-deploy.js

代码地址

测试app
https://github.com/scaperow/ionic-deploy-starter

测试 server
https://github.com/scaperow/ionic-deploy-server

改造后的插件代码

https://github.com/scaperow/scaperow-plugins-deploy

改造后的更新服务代码 https://github.com/scaperow/scaperow-service-deploy

改造后的核心服务代码 https://github.com/scaperow/scaperow-service-core