给typecho后台编辑器加功能按钮

typecho 程序使用的编辑器是 Markdown，Markdown 是一种纯文本格式的标记语言。通过简单的标记语法，它可以使普通文本内容具有一定的格式。Markdown 语法虽然不难记，但是对于很多记忆力不好人来说还是很不友好，比如说我，我就一直记不住这些语法。那么如果把这些语法做成按钮直接显示在编辑器上不就非常的方便了吗，于是这篇文章就诞生了。

那么如何实现呢？

首先在主题模板 functions.php 中加入以下代码:

Typecho_Plugin::factory('admin/write-post.php')->bottom = array('editor', 'reset');
Typecho_Plugin::factory('admin/write-page.php')->bottom = array('editor', 'reset');
class editor
{public static function reset()
    {Typecho_Widget::widget('Widget_Options')->to($options);
?>
        <style>
            .wmd-button.custom {
                width: 20px;
                height: 20px;
                line-height: 20px;
                text-align: center;
            }

            .wmd-button.custom img {
                width: 15px;
                height: 15px;
                vertical-align: middle;
            }

            body.fullscreen {overflow-x: hidden;}

            .wmd-button-row {height: auto;}

            #custom-field .typecho-list-table tbody textarea {
                width: 100%;
                height: 100px;
            }

            #custom-field .typecho-list-table tbody input[type="text"] {width: 100%;}
        </style>
        <script>
            $(function() {$("#wmd-button-bar .wmd-edittab").remove()
                $("#wmd-button-row .wmd-spacer").remove()
                $("#wmd-button-row #wmd-more-button").remove()
                $("#wmd-button-row #wmd-code-button").remove()
                $("#wmd-button-row #wmd-heading-button").remove()
                $("#wmd-fullscreen-button").on("click", function() {$(".fullscreen #text").css("top", $('.fullscreen #wmd-button-bar').outerHeight())
                })
                $("#wmd-button-row #wmd-fullscreen-button").before(`
                    <li class="wmd-button custom" id="j-wmd- 任意英文标识 " title=" 语法名称 ">
                        <img src=" 图标地址 "> 
                    </li>
                    `)
                $("#j-wmd- 和上面英文标识一致 ").on("click", function() {insertAtCursor('语法使用');
                })
         <?php }
} ?>

这边拿插入代码块为例。

Markdown 插入代码块语法是在代码的前后各加三个 `，如下：

 ``` 这里是代码 ```

那么怎么加入编辑器里呢？只要把

<li class="wmd-button custom" id="j-wmd- 任意英文标识 " title=" 语法名称 ">
                        <img src=" 图标地址 "> 
                    </li>
                    `)
                $("#j-wmd- 和上面英文标识一致 ").on("click", function() {insertAtCursor('语法使用');
                })

改成以下代码就可以了

<li class="wmd-button custom" id="j-wmd-daimakuai" title=" 插入代码块 ">
                        <img src=" 图标地址 "> 
                    </li>
                    `)
                $("#j-wmd-daimakuai").on("click", function() {insertAtCursor('``` 这里是代码块 ```');
                })