Git Product home page Git Product logo

Comments (19)

justice2001 avatar justice2001 commented on May 22, 2024 1

https://github.com/justice2001/halo-plugin-vditor/blob/dev/doc/rfc/custom-insert.md

第一次搞这种需求,写了个设计方案,您可以看一下能否满足要求,或者有什么比较好的意见,可以交流一下。

from halo-plugin-vditor.

justice2001 avatar justice2001 commented on May 22, 2024

谢谢支持,您是指的让主题开发者或用户能使用自定义块来解析自己的语法嘛,还是说支持在toolbar插入自定义的按钮来处理行为呢。

from halo-plugin-vditor.

jiewenhuang avatar jiewenhuang commented on May 22, 2024

插入自定义按钮,主题或者用户有时候会有一些做一些自定义标签来方便使用,就像Joe3中就有很多类似于<joe-progress percentage="50%" color="#6ce766"></joe-progress>的自定义标签,如果能在编辑器快速插入就方便很多。
就类似于现在的插入自定义块。
image

from halo-plugin-vditor.

jiewenhuang avatar jiewenhuang commented on May 22, 2024

看起来非常好,更细节的问题,可能得等初版之后才能知道。

from halo-plugin-vditor.

justice2001 avatar justice2001 commented on May 22, 2024

OK,那我就先按照这个方案实现了

from halo-plugin-vditor.

justice2001 avatar justice2001 commented on May 22, 2024

搓了一个版本出来,基本能够使用了。现在的版本需要手动去填写配置文件的地址,还做不到自动寻找配置。插入现在支持模版配置。还有点bug没解决完。

这是ci的链接:

https://git.mczhengyi.top/zhengyi/halo-plugin-vditor/actions/runs/41

from halo-plugin-vditor.

justice2001 avatar justice2001 commented on May 22, 2024
image image

这是实现的效果

from halo-plugin-vditor.

jiewenhuang avatar jiewenhuang commented on May 22, 2024

初步测试来看是可以满足需求的,现在是支持formkit的所有类型表单吗?如果是,select类型的输入的表达应该是怎么设计呢?,刚才试了下下面这个写法,似乎是错误的,直接不显示了。
image

from halo-plugin-vditor.

justice2001 avatar justice2001 commented on May 22, 2024

options的语法是:

"options": {
    "value": "label",
    "value2": "label2"
}

https://formkit.com/inputs/select#value-label-object

from halo-plugin-vditor.

jiewenhuang avatar jiewenhuang commented on May 22, 2024

好的,是我漏看了,非常感谢!!!

from halo-plugin-vditor.

jiewenhuang avatar jiewenhuang commented on May 22, 2024

现在使用没有什么大问题了,发现了下面一些小问题。
image
现在在所见即所得下后面是直接隐藏的。
image
在分屏模式下,插入后,发布后自定义标签会丢失。 下面是我的设置

{
            "type": "template",
            "id": "joe-cloud",
            "icon": "",
            "name": "网盘资源",
            "formKit": [
                {
                    "$formkit": "select",
                    "name": "cloud-type",
                    "label": "云盘类型",
                    "help": "Choose the type of cloud service.",
                    "value": "default",
                    "options": [
                        {"label": "默认网盘", "value": "default"},
                        {"label": "百度网盘", "value": "bd"},
                        {"label": "阿里网盘", "value": "ad"},
                        {"label": "蓝奏云网盘", "value": "lz"},
                        {"label": "微云网盘", "value": "wy"},
                        {"label": "Github仓库", "value": "github"},
                        {"label": "Gitee仓库", "value": "gitee"}
                    ]
                },
                {
                    "$formkit": "text",
                    "name": "cloud-title",
                    "label": "网盘名称",
                    "help": "留空则显示默认标题"
                },
                {
                    "$formkit": "url",
                    "name": "cloud-url",
                    "label": "跳转链接",
                    "help": "网盘链接地址",
                    "value": ""
                },
                {
                    "$formkit": "text",
                    "name": "cloud-password",
                    "label": "密码",
                    "help": "网盘的访问密码,无则留空",
                    "value": ""
                }
            ],
            "template": "<joe-cloud type=\"$cloud-type$\" url=\"$cloud-url$\" password=\"$cloud-password$\" title=\"$cloud-title$\"></joe-cloud>"
        }

from halo-plugin-vditor.

wxyShine avatar wxyShine commented on May 22, 2024

image
插入tips时 出现

from halo-plugin-vditor.

justice2001 avatar justice2001 commented on May 22, 2024

这个问题的原因应该和上面是一致的,现在正在修复

from halo-plugin-vditor.

justice2001 avatar justice2001 commented on May 22, 2024

在分屏模式下,插入后,发布后自定义标签会丢失。 下面是我的设置

这个问题应该已经完成修复。

现在在所见即所得下后面是直接隐藏的。

这个问题是由于Vditor本身特性所导致的,但我在设置里面加入了一个选项,可以让HTML代码块不再隐藏。

同时我加入了一个注入脚本的配置,这个功能可以在编辑器初始化时加载js脚本和样式表文件,可以用于自定义块的实时渲染。

配置格式:https://github.com/justice2001/halo-plugin-vditor/blob/dev/doc/rfc/custom-insert.md

最新的CI构建: https://git.mczhengyi.top/zhengyi/halo-plugin-vditor/actions/runs/42

from halo-plugin-vditor.

justice2001 avatar justice2001 commented on May 22, 2024

这是实现的效果:

image

from halo-plugin-vditor.

jiewenhuang avatar jiewenhuang commented on May 22, 2024

更新插件之后,已经出现的新的按钮,但是开启后,效果和上个版本插件没有太大区别,在插入分栏插入网盘块的时候,还是会消失,HTML代码,还是隐藏的,Halo2.11.3
image

image

from halo-plugin-vditor.

justice2001 avatar justice2001 commented on May 22, 2024

https://git.mczhengyi.top/zhengyi/halo-plugin-vditor/actions/runs/44

这个版本应该是可用的,可能halo对同版本号的插件处理有些问题,我修改了下版本就可用了。

from halo-plugin-vditor.

ruibaby avatar ruibaby commented on May 22, 2024

https://git.mczhengyi.top/zhengyi/halo-plugin-vditor/actions/runs/44

这个版本应该是可用的,可能halo对同版本号的插件处理有些问题,我修改了下版本就可用了。

现在 Halo 是把所有的插件资源捆绑在一起的,并使用 name+version 的 hash 作为缓存 key,如果更新插件之后版本号不变,那么捆绑资源的缓存 key 就不会变,会导致依旧使用旧的资源。

from halo-plugin-vditor.

justice2001 avatar justice2001 commented on May 22, 2024

好的,那我后续在开发版本中在版本号里加入构建号标识应该就可以了。

from halo-plugin-vditor.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.