增强Typecho默认编辑器,添加缩进功能按钮解决首行段落文字缩进

in Typecho with 0 comment

  写文章的时候为了格式更美观,我希望在一段文字的开头添加两个空格作为段落缩进,但是发现单纯的打几个空格文章显示的格式并不如愿。搜了一下发现很多第三方编辑器也没有首行缩进功能。有群友给我支了招,输入以下代码,然后紧跟着输入文本即可:

  1. 半角的空格
     或 
  2. 全角的空格
     或 
  3. 不断行的空格
     或 

  我觉得每次写文章输入空格那要打8个 啊!多麻烦啊,手机上写文章不更麻烦吗,我还在苹果手机里设置输入法短码转换qp=&nbps;&nbps;&nbps;&nbps;&nbps;&nbps;&nbps;&nbps;就是输入键盘上的q和p,显示自定义词组。
可是想想也觉得傻啊,还是折腾编辑器吧。
117504757.png
  发现一个Typecho插件:editorG好像很适用啊,一共就增加了2个功能,更改css适应手机端,增加快捷键alt+c,插入代码形式,如上图。下载来看代码也不复杂,就尝试动手了。完成后效果如下图:
WX20200111-164809@2x.png
就是插入两个全角空格的功能,快捷键alt + Q。简直方便到不行,完美解决首行段落文字缩进的问题

修改过程

20200113141506.png
这一段是给编辑器里的添加按钮,
找到并复制这一段代码,做响应的修改:

$('#wmd-button-row').append('<li class="wmd-button" id="wmd-jrotty-button" title="代码 - ALT+C"><span style="background: none;font-size: large;text-align: center;color: #999999;font-family: serif;">C</span></li>');

这一段是添加的按钮及其样式,修改为

$('#wmd-button-row').append('<li class="wmd-button" id="wmd-indent-button" title="缩进 - ALT+Q"><span style="background: none;font-size: large;text-align: center;color: #999999;font-family: serif;">缩</span></li>');

点击按钮的功能,在编辑框内添加的内容:

if($('#wmd-button-row').length !== 0){
                    $('#wmd-jrotty-button').click(function(){
                        var rs = "```\nyour code\n```\n";
                        zeze(rs);
                    })
                }

修改为添加两个全角空格:

                if($('#wmd-button-row').length !== 0){
                    $('#wmd-indent-button').click(function(){
                        var rs = "  ";
                        zeze(rs);
                    })
                }

找到按钮的快捷键ALT+C:

$('body').on('keydown',function(a){
                    if( a.altKey && a.keyCode == "67"){
                        $('#wmd-jrotty-button').click();
                    }
                });

修改快捷键ALT+Q:

$('body').on('keydown',function(a){
                    if( a.altKey && a.keyCode == "81"){
                        $('#wmd-indent-button').click();
                    }
                });

如果想要修改为其他快捷键可以查询一下对应的KeyCode,我查到Q=81.

到此我要的功能已经修改完,

完整内容

需要粘贴的完整内容是这一段:

            $('#wmd-button-row').append('<li class="wmd-button" id="wmd-indent-button" title="缩进 - ALT+Q"><span style="background: none;font-size: large;text-align: center;color: #999999;font-family: serif;">缩</span></li>');
                if($('#wmd-button-row').length !== 0){
                    $('#wmd-indent-button').click(function(){
                        var rs = "  ";
                        zeze(rs);
                    })
                }
                $('body').on('keydown',function(a){
                    if( a.altKey && a.keyCode == "81"){
                        $('#wmd-indent-button').click();
                    }
                });

然后粘贴到

$(document).ready(function(){

这段代码内,保存,并上传到typecho的插件目录下,开启。

你也可以参考上面的方式给你的编辑器添加一些其他功能。

插件下载

原插件 editorG下载: editorG.tar.gz
最后附上我修改后的插件。点击这里下载

Responses
2016lengh.gif2016kun.gif2016db.gif2016baojin.gif2016jk.gif2016kb.gif2016qq.gif2016zj.gif2016qiao.gif2016am.gif2016kk.gif2016qd.gif2016gg.gif2016lh.gif2016wq.gif2016gz.gif2016zhh.gif2016ll.gif2016shuai.gif2016kel.gif2016zk.gif