一款基于 Vditor 开发的 Typecho 编辑器插件
修改 'assets/js/toolbar.js'，以插入按钮这个自带功能说明。
name是按钮标记
tip是按钮说明
tipPosition是提示位置，具体定义参照 Vditor 官方文档，
icon是图标，建议使用SVG，可以上 https://iconfont.cn 找图标preview是预览替换内容，这个功能是给短代码用的，主要是实时预览时自动替换短代码为preview的模板，$3是短代码属性，$5是短代码内容，具体可以看 https://regex101.com/delete/y5VK1D5l5VF84bP70okI3dcN
previewArea是弹窗按钮用的，修改参数后实时是否实时预览，值c时预览框内容居中，为n时不显示，其余值都显示
params是弹出对话框的参数
click()是按钮点击后的响应函数
{
"name": "x-btn",
"tip": "插入按钮",
"tipPosition": "n",
"icon": "<svg viewBox=\"0 0 1024 1024\" xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\"><path d=\"M856.73 796.7h-690c-57.9 0-105-47.1-105-105v-360c0-57.9 47.1-105 105-105h690c57.9 0 105 47.1 105 105v360c0 57.89-47.1 105-105 105zm-690-500.01c-19.3 0-35 15.7-35 35v360c0 19.3 15.7 35 35 35h690c19.3 0 35-15.7 35-35v-360c0-19.3-15.7-35-35-35h-690z\"/><path d=\"M233.16 431.69H790.3v160H233.16z\"/></svg>",
"template": "[x-btn type='{type}' icon='{icon}' href='{href}' content='{content}' /]\n",
"preview": "<x-btn$3>$5</x-btn>",
"previewArea": "c",
"params":
{
"type": {
"label": "按钮类型",
"tag": 'select',
"options": {
"primary": "primary",
"secondary": "secondary",
"light": "light",
"dark": "dark",
"info": "info",
"success": "success",
"warning": "warning",
}
},
"icon": {
"label": "<a href='https://fontawesome.dashgame.com/' target='_blank' title='点此查找图标Class'>按钮图标</a>",
},
"href": {
"label": "按钮链接",
"required": true
}
,
"content": {
"label": "按钮文字",
"default": "按钮",
}
},
click() {
window.XEditor.paramsPrompt('x-btn');
}
},
修改 assets/js/x.short.js
这个不需要会正则，只需 修改 assets/js/replacement.json， 格式为：
{
"短代码 Tag": "替换内容"
}
替换内容有4个参数，
{code}正则匹配结果
{attr}短代码属性
{text}短代码内容
{name}短代码名称
感谢 Vditor，本插件基于 Vditor 构建
感谢 Joe ，本插件大量使用 Joe 主题的各种图标
学习可以，禁止直接改名商用！！！
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent