https://github.com/benzbrake/xeditor

一款基于 Vditor “开发“的 Typecho 编辑器插件
https://github.com/benzbrake/xeditor

Last synced: about 2 months ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/benzbrake/xeditor
• Owner: benzBrake
• Created: 2021-05-04T10:20:11.000Z (over 3 years ago)
• Default Branch: master
• Last Pushed: 2024-06-16T08:21:22.000Z (6 months ago)
• Last Synced: 2024-06-16T09:32:53.123Z (6 months ago)
• Language: PHP
• Size: 3.66 MB
• Stars: 24
• Watchers: 3
• Forks: 7
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# 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": "",

        "template": "[x-btn type='{type}' icon='{icon}' href='{href}' content='{content}' /]\n",

        "preview": "$5",

        "previewArea": "c",

        "params":

            {

                "type": {

                    "label": "按钮类型",

                    "tag": 'select',

                    "options": {

                        "primary": "primary",

                        "secondary": "secondary",

                        "light": "light",

                        "dark": "dark",

                        "info": "info",

                        "success": "success",

                        "warning": "warning",

                    }

                },

                "icon": {

                    "label": "按钮图标",

                },

                "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](https://github.com/Vanessa219/vditor )，本插件基于 Vditor 构建

感谢 [Joe](https://github.com/HaoOuBa/Joe ) ，本插件大量使用 Joe 主题的各种图标

## 授权

学习可以，禁止直接改名商用！！！