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

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

typecho程序使用的编辑器是Markdown,Markdown是一种纯文本格式的标记语言。通过简单的标记语法,它可以使普通文本内容具有一定的格式。Markdown语法虽然不难记,但是对于很多记忆力不好人来说还是很不友好,比如说我,我就一直记不住这些语法。那么如果把...

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(' ```这里是代码块``` ');
                })

原文链接:https://www.fogwhale.cn/?p=411,转载请注明出处。

2
分享海报

评论2

  1. :redface: 这个方法怎么添加表情按钮呢
    111 2022-10-30 0 回复
    • 添加Emoji表情吗?
      雾鲸 2022-10-30 0 回复

站点公告

雾鲸自营支付系统

易支付费率低至3%yzf.fogwhale.cn

码支付限时免费对接使用mzf.fogwhale.cn

显示验证码
没有账号? 注册  忘记密码?

社交账号快速登录