XC的博客
xcshare.site

typecho编辑器SMEditor如何自定义按钮?

1026
15

Author:

xc

©

Wordage:

共计 2155 字

needs:

约 3 分钟

Popular:

1026 ℃

Created:

目 录

概述

 typecho采用的markdown编辑方式,为了尽可能的轻巧,平台只带了非常基础的几个按钮,更多的编辑需求,各主题大佬们都会自定义自己的编辑器,就像我以前使用的是Joe 的主题,自带编辑器功能就很强大:

joe主题编辑界面

 这个主题自带的按钮已经完全满足正常的文本编辑。用起来很顺手。
可惜,我更换了主题。
 其他主题的编辑器,未必有这么全面,我现在采用的主题,编辑器略显简单,我经常用到的表格和表情功能,编辑器没带,只能去找markdown的书写方式,然后在复制粘贴过来,显得稍微有点麻烦。

说明:无论是什么主题,typecho都可以识别markdown的书写代码,只是在书写便捷上,各主题有没有带快捷按钮的区别

那我就在想,有没有可能独立的编辑器插件可以拿来直接调用,代替主题的编辑器呢?
答案是:当然有。
 大概搜了以下:除了我目前推荐的SMEditor 还有一个 AAEditor

插件区别

SMEditor

SMEditor界面

 两个插件我都下载试了一下,各有特色,SMEditor应该是Joe编写的,所以风格和joe主题有点相似,只是按钮没有全部展开,做成了下拉菜单,但功能都全。

AAEditor

 最大的特点就是实时预览,并且可以在后台自定义按钮,这是一个很大的两点,大多数常用按钮也都有,不过代码定义和我主题的代码有不一致,并且没找到我关注的表格按钮。
总之,这两个插件都是定义markdown的通用格式,主题一些特殊的按钮定义,只能想办法融合进去,最终我选择修改SMEditor(它有我关心的表格,修改工作量要小一些)

正文

 因为每个主题的代码定义都不一样,所以,我修改后的也没必要分享了,你也用不了,还是根据自己的主题代码,灵活修改吧。这里提供一个标准的修改前SMEditor插件源文件。(为了便于分享,我压缩成exe文件,并非病毒,请放心下载,当然你也可以自行github)

SMEditor下载

此处内容,需回复之后可见
核心代码其实就一个:/assets/js/SMEditor.bundle.js
用VS打开后,

第一步:

 按照以前的样式,照猫画虎,定义你添加按钮的SVG图标;

添加SGV图标

第二步:

定义函数关联;

函数关联

第三步:

 添加函数,这里需要注意的是,我刚开始参考的是分割线的函数,但是对于你定义的代码中如果有"符号的,会导致整个函数报错,所以对于有"符号的,请参考原生HTML的函数代码。

--函数
HTML函数

第四步:

 到这里我很兴奋的以为我搞定了,结果上传替换,就是不生效,只能仔细排查,才发现作者优先调用的是CDN静态库中的文件,我不会修改这段代码,让他调用本地文件,只能修改远程调用地址,然后采用的是我服务器的文件。

js调用

注意:对方的地址有个版本编号的参数,我们要把我们调用文件的文件夹SMEditor修改为typecho-editor@1.3.2,否则调用不进来,也是折腾我好久

 试试看,你应该可以成功使用了,现在说起来简单,但事实上,耗费掉我一上午的时间,你如果成功应用,记得点个赞哦!

共计 15 条评论,点此发表评论
  1. 头像
    红鲤鱼
    新人

    访客

    看看,我用的handsome,ditor编辑器不好用。

    · Android · Chrome · 海外
  2. 头像
    人生无常
    新人

    访客

    感谢分享

    · Win 1x · Chrome · 江苏
  3. 头像
    代提台服天刀功力
    新人

    访客

    感谢分享

    · Android · Chrome · 海外
  4. 头像
    小强
    新人

    访客

    试试

    · Win 1x · Chrome · 广东
  5. 头像
    xinxin
    新人

    访客

    连接失效了...

    · Android · Chrome · 广东
    1. 头像
      xc xinxin
      Lv.4

      博主

      感谢反馈,已修复!

      · Win 1x · Chrome · 四川
  6. 头像
    xinxin
    新人

    访客

    编辑器挺不错

    · Android · Chrome · 广东
  7. 头像
    123
    Lv.1

    访客

    支持一下

    · Android · Chrome · 内蒙古
  8. 头像
    等待修复
    新人

    访客

    啊 不错不错看看

    · Win 1x · Chrome · 江苏
  9. 头像
    吃瓜
    新人

    访客

    这个要看看

    · Win 1x · Chrome · 湖南
  10. 头像
    1
    新人

    访客

    · Win 1x · Chrome · 四川
  11. 头像
    9.
    新人

    访客

    看看

    · iPhone · Safari · 河南
  12. 头像
    乐乐
    新人

    访客

    赞赞赞

    · Win 1x · Chrome · 湖北
  13. 头像
    typecho.wiki
    新人

    访客

    你这个主题的评论框真难找,看了半天原来发现是点击评论上发白色横条按钮

    · MacOS · Chrome · 山东
  14. 头像
    子墨
    新人

    访客

    大赞!

    · Win 1x · Chrome · 广东
博客主页 行业知识以及项目经验分享,是件有意义的事情。为国家培养中层力量,发挥自己的一点作用! 51统计
蜀ICP备2022005623号 川公网安备 51012202001212号 本站已运行 2 年 20 天 7 小时 53 分 Copyright © 2022 ~ 2024. xcshare:Hydraulic Engineer,生活记录与感想! All rights reserved.
历史足迹
分类目录
  • 💼工作
  • 🚴‍♂生活