XC的博客
typecho编辑器SMEditor如何自定义按钮?

Author:

xc

©

Wordage:

共计 2198 字

needs:

约 3 分钟

Popular:

40 ℃

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,否则调用不进来,也是折腾我好久

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

共计 0 条评论,点此发表评论
博客主页 行业知识以及项目经验分享,是件有意义的事情。为国家培养中层力量,发挥自己的一点作用! 51统计
蜀ICP备2022005623号 川公网安备 51012202001212号 本站已运行 269 天 19 小时 9 分 Copyright © 2022 ~ 2022. xc的博客 All rights reserved.
历史足迹
分类目录
  • 💼工作
  • 🏠生活