XEditor 一款基于 Vditor 的 Markdown 编辑器 for Typecho

Ryan

2021-05-04/6 评论/231 浏览

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

做 XMLiving 主题的额外产物,主要是为了切换主题后短代码不受影响,以后只要一直启用这个插件就行。
欢迎各位有想法的提交 PULL REQUEST。

特点

1.实时预览,包括短代码
2.新增自定义短代码无需书写正则,无需修改核心代码。

预览

XEditor 一款基于 Vditor 的 Markdown 编辑器 for 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 主题的各种图标

授权

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

下载地址

https://github.com/benzBrake/XEditor

文章出自:虾米皮皮乐工作室 https://xiamp.net/archives/xeditor-a-vditor-based-markdown-editor-for-typecho.html,版权所有。本站文章除注明出处外,皆为作者原创文章,可自由引用,但请注明来源。
6 条评论
231 浏览
您的大名:
万水千山总是情,给个打赏行不行。 打赏

发表评论

;-) :| :smile: :sad: :razz: :oops: :sup: :lol: :grin: :cry: :cool: :???:

已有 6 条评论

  1. skyong 路过 2021-05-17 10:51

    typecho稳定版后台点击“启用”后错误:Server Error

    1. walt 路过 2021-05-24 19:39

      删除masterl了吗

      1. walt 路过 2021-05-24 19:45

        好吧我也遇到了一样的情况

      2. Ryan 管理 2021-05-25 20:25

        我是使用 Typecho 最新开发板的,建议先更新,稳定版好些接口都不能用

      3. eki 路过 2021-06-08 17:33

        我是最新的开发版也是这样

      4. cy 路过 2021-06-08 17:58

        我找到原因了。。。。
        把 /usr/plugins 下的 插件文件夹名字改成 XEditor 然后再启用插件就好了。。。。

虾米皮皮乐工作室

Ryan

版权申明:收费资源由本站发布,用户购买后只有终端使用权,禁止转售和转载

XEditor 一款基于 Vditor 的 Markdown 编辑器 for Typecho
05/04
2021
一款基于 Vditor 开发的 Typecho 编辑器插件。做 XMLiving 主题的额外产...
扫描右侧二维码阅读全文