Skip to content
master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

XEditor

一款基于 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 主题的各种图标

授权

学习可以,禁止直接改名商用!!!

About

一款基于 Vditor “开发“的 Typecho 编辑器插件

Resources

Releases

No releases published

Packages

No packages published