TypechoJoeTheme

老狮的梦

统计
登录
用户名
密码
/
注册
用户名
邮箱
输入密码
确认密码

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

老狮博主
2021-01-18
/
5 评论
/
1,467 阅读
/
280 个字
/
百度已收录
01/18
本文最后更新于2021年01月18日,已超过158天没有更新。如果文章内容或图片资源失效,请留言反馈,我会及时处理,谢谢!

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(' ```这里是代码块``` ');
                })
Typecho美化代码
朗读
赞(4)
赞赏
感谢您的支持,我会继续努力哒!
版权属于:

老狮的梦

本文链接:

https://laolion.com/archives/2455.html(转载时请注明本文出处及文章链接)

评论 (5)
  1. 小码农 闲逛
    Linux · FireFox

    这4个灯笼不错

    2021-02-07 回复
  2. Yolen 闲逛
    Windows 7 · Google Chrome

    站长你好,为什么代码添加上去了,但是编辑器还是没有按钮

    2021-01-26 回复
    1. 老狮 博主
      Windows 7 · Google Chrome
      @Yolen

      具体情况我也不是清楚

      2021-01-26 回复
      1. Yolen 闲逛
        Windows 7 · Google Chrome
        @老狮

        真上头

        2021-01-26 回复
        1. 夏目贵志 闲逛
          Windows 10 · Google Chrome
          @Yolen

          插入到最后面一行 试试~

          2021-02-02 回复

互动读者

  • 神话2闲逛

    评论 7 次 | 文章 0 篇

  • ptcry闲逛

    评论 3 次 | 文章 0 篇

  • 111闲逛

    评论 3 次 | 文章 0 篇

  • 火喵闲逛

    评论 2 次 | 文章 0 篇

标签云

最新回复

  1. 路过闲逛
    2021-06-24
  2. 88闲逛
    2021-06-23
  3. 萨达萨达按时闲逛
    2021-06-23
  4. 神话6闲逛
    2021-06-23
  5. 神话2闲逛
    2021-06-21