为typecho的next主题定制ueditor

今天看到学弟的博客,是用hexo搭建的,用了一个叫next的主题。感觉很不错。特别是其右侧文章目录的功能,让我一见钟情了。于是在github上搜索了一啵 typecho仿hexo的next主题,果不其然,找到一个。

快乐的搭建起来,看了下其生成文章目录的方法,用的是js获取h2和h3标签,再看看自己的ueditor,发现没有快速增加h2,h3标签的方法,这样在想要生成一个目录的时候,就要切换到源码模式,手动打入h2之类的标签,非常麻烦。

这就来修改它。看了一下,我用的是ueditor for typecho 1.4.3,gayhub也可以找的到:

https://github.com/chanshengzhi/UEditor-for-Typecho


看看其他按钮

由于没有看ueditor的官方文档,我就以ueditor的一个现成的按钮来,反过来搜索它是怎么工作的,弄清原理之后,自己增加一个按钮应该不在话下。

首先我下载了一份ueditor的备份,查看我后台编辑器的一个按钮(删除线),f12告诉我它应该是和“strikethrough”这个单词息息相关的。所以我用grep搜索它的所有位置:

grep -r "strikethrough" ./

这样一来,我找到了下列文件:

./ueditor/lang/en/en.js
./ueditor/lang/zh-cn/zh-cn.js
./ueditor/themes/default/css/ueditor.css
./ueditor/ueditor.all.js
./ueditor/ueditor.config.js.php

其中ueditor.all.js在实际过程是用 ueditor.all.min.js加载的,但是为了便于修改,我们需要修改的是ueditor.all.js,到时候压缩,覆盖之就好。

每个文件的作用

ueditor.config.js.php

查看这个文件,定位到这个地方:

//工具栏上的所有的功能按钮和下拉框,可以在new编辑器的实例时选择自己需要的从新定义
        , toolbars: [[
            'fullscreen', 'source', '|', 'undo', 'redo', '|',
            'bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'superscript', 'subscript', 'removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', 'selectall', 'cleardoc', '|',
            'rowspacingtop', 'rowspacingbottom', 'lineheight', '|', 'paragraph', 'fontfamily', 'fontsize', '|',
            'directionalityltr', 'directionalityrtl', 'indent', '|',
            'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|', 'touppercase', 'tolowercase', '|',
            'link', 'unlink', 'anchor', '|', 'imagenone', 'imageleft', 'imageright', 'imagecenter', '|',
            'simpleupload', 'insertimage', 'emotion', 'scrawl', 'insertvideo', 'attachment', 'map', 'gmap', 'insertframe', 'insertcode', '|',
            'horizontal', 'date', 'time', 'spechars', 'wordimage', '|',
            'inserttable', 'deletetable', 'insertparagraphbeforetable', 'insertrow', 'deleterow', 'insertcol', 'deletecol', 'mergecells', 'mergeright', 'mergedown', 'splittocells', 'splittorows', 'splittocols', 'charts', '|',
            'print', 'preview', 'searchreplace', 'help', 'drafts'
        ]]


发现这里定义了所有按钮的位置以及名字,为了增加一个h2标签的按钮,我添加了 'myh2' 到数组里面

这里有个大坑,因为没看文档,不知道大写字符不可以当按钮名,结果莫名其妙了一个多小时...


ueditor.css

这个文件一看就知道是定义按钮形状,图片等样式的了,我定位到了这里:

.edui-default  .edui-for-strikethrough .edui-icon {
    background-position: -120px 0;
}
嗯...似乎是定位了对应图片所在icons.png的坐标,打开icons.png,看了下加粗的B图片比较适合我这个h2的模样,因此我也增加了一段css:

.edui-default  .edui-for-myh2 .edui-icon {
    background-position: 0 0;
}


这个时候刷新后台编辑器,一句出现了可爱的B按钮了。


zh-cn.js/en.js

这个都不用看,肯定是提示/翻译提示这类的东西,熟练的为他增加了 myh2的提示说明


ueditor.all.js

看来这才是重头戏,以上修改已经让整个按钮出现了,在后台编辑器点两下,没有任何反应,是时候在这里给按钮增加一种行为了。

由于我要给按钮设定对字符串两头增加<h2>标签的行为,我找了个相似的按钮(斜体italic),然后在ueditor.all.js里定位到了这里:


    var basestyles = {
            'bold':['strong','b'],
            'italic':['em','i'],
            'subscript':['sub'],
            'superscript':['sup']
        },

如果单击斜体按钮,会给字符串两头增加<em>标签,相比应该是这个地方起作用了。

于是我娴熟的增加了 'myh2':['h2']

修改完毕后,刷新一下后台的编辑器,发现B按钮工作正常。

个人不太会用原来的B按钮(加粗),因此把他从config文件中注释了。

大功告成

QQ20160505-0@2x.png