概述
typecho采用的markdown编辑方式,为了尽可能的轻巧,平台只带了非常基础的几个按钮,更多的编辑需求,各主题大佬们都会自定义自己的编辑器,就像我以前使用的是Joe 的主题,自带编辑器功能就很强大:
这个主题自带的按钮已经完全满足正常的文本编辑。用起来很顺手。
可惜,我更换了主题。
其他主题的编辑器,未必有这么全面,我现在采用的主题,编辑器略显简单,我经常用到的表格和表情功能,编辑器没带,只能去找markdown的书写方式,然后在复制粘贴过来,显得稍微有点麻烦。
那我就在想,有没有可能独立的编辑器插件可以拿来直接调用,代替主题的编辑器呢?
答案是:当然有。
大概搜了以下:除了我目前推荐的SMEditor 还有一个 AAEditor
插件区别
SMEditor
两个插件我都下载试了一下,各有特色,SMEditor应该是Joe编写的,所以风格和joe主题有点相似,只是按钮没有全部展开,做成了下拉菜单,但功能都全。
AAEditor
最大的特点就是实时预览,并且可以在后台自定义按钮,这是一个很大的两点,大多数常用按钮也都有,不过代码定义和我主题的代码有不一致,并且没找到我关注的表格按钮。
总之,这两个插件都是定义markdown的通用格式,主题一些特殊的按钮定义,只能想办法融合进去,最终我选择修改SMEditor(它有我关心的表格,修改工作量要小一些)
正文
因为每个主题的代码定义都不一样,所以,我修改后的也没必要分享了,你也用不了,还是根据自己的主题代码,灵活修改吧。这里提供一个标准的修改前SMEditor插件源文件。(为了便于分享,我压缩成exe文件,并非病毒,请放心下载,当然你也可以自行github)
SMEditor下载
核心代码其实就一个:/assets/js/SMEditor.bundle.js
用VS打开后,
第一步:
按照以前的样式,照猫画虎,定义你添加按钮的SVG图标;
第二步:
定义函数关联;
第三步:
添加函数,这里需要注意的是,我刚开始参考的是分割线的函数,但是对于你定义的代码中如果有"符号的,会导致整个函数报错,所以对于有"符号的,请参考原生HTML的函数代码。
第四步:
到这里我很兴奋的以为我搞定了,结果上传替换,就是不生效,只能仔细排查,才发现作者优先调用的是CDN静态库中的文件,我不会修改这段代码,让他调用本地文件,只能修改远程调用地址,然后采用的是我服务器的文件。
试试看,你应该可以成功使用了,现在说起来简单,但事实上,耗费掉我一上午的时间,你如果成功应用,记得点个赞哦!
看看,我用的handsome,ditor编辑器不好用。
感谢分享
感谢分享
试试
连接失效了...
感谢反馈,已修复!
编辑器挺不错