Skip to content

使用hint的at方法报错,并且dark模式的编辑器内容颜色存在缺陷 #592

Closed
@HerbertHe

Description

@HerbertHe
Contributor

编辑模式

请选择你遇到问题时使用的编辑模式(把正常情况模式删掉):

  • wysiwyg 所见即所得模式
  • ir 即时渲染模式
  • sv 分屏编辑预览模式

描述问题

  • 问题一:自定义at的光标选择错误
hint: {
  at: (value: string) => return [{value: value, html : `<a href="/${value}">${value}</a>`}]
}

键入内容

@PO123123

回车报下面的错误

index.min.js:formatted:1 Uncaught DOMException: Failed to execute 'setStart' on 'Range': The offset 4294967295 is larger than the node's length (7).
  • 问题二:自带的夜间模式显示存在不友好的现象

image

可能是CSS重叠的问题,希望可以更新写死自带主题字体的颜色

问题只出现在所见即所得即时渲染模式

期待的结果

正常使用at方法做自定义回调处理,自带的夜间模式字体颜色写死,避免可能出现的CSS污染情况

截屏或录像

image

其他信息

请提供其他附加信息帮助我们诊断问题。

Activity

Vanessa219

Vanessa219 commented on Jul 18, 2020

@Vanessa219
Owner
  1. 我这里没有报错,可以给出更详细的场景么?
    QQ20200718-104413

  2. Vditor 的主题分为编辑器、内容、代码块。具体可参见 https://hacpai.com/article/1549638745630#%E4%B8%BB%E9%A2%98
    编辑器为 dark 的时候,内容也需设置为 dark,当然也可以使用扩展接口定制自己喜欢的内容样式。

HerbertHe

HerbertHe commented on Jul 18, 2020

@HerbertHe
ContributorAuthor

@Vanessa219 第二个问题解决了,是没有设置preview的theme导致的,但是第一个试了很多次之后依然不行。

完整的Vditor对象配置如下

const vditor = new Vditor("nucers-vditor-editor", {
            minHeight: 500,
            outline: false,
            width: "100%",
            placeholder: "写点什么吧...",
            theme: !isNightNow() ? "dark" : "classic",
            toolbar: [
                "emoji",
                "headings",
                "bold",
                "italic",
                "strike",
                "link",
                "|",
                "list",
                "ordered-list",
                "check",
                "outdent",
                "indent",
                "|",
                "quote",
                "line",
                "code",
                "inline-code",
                "insert-before",
                "insert-after",
                "|",
                "table",
                "|",
                "undo",
                "redo",
                "fullscreen",
                "edit-mode",
                {
                    name: "more",
                    toolbar: [
                        "both",
                        "outline",
                        "preview",
                    ],
                },
            ],
            counter: {
                enable: true,
                type: "markdown",
            },
            preview: {
                delay: 500,
                theme: {
                    path:
                        "https://cdn.jsdelivr.net/npm/vditor@latest/dist/css/content-theme",
                    current: !isNightNow() ? "dark" : "light",
                },
            },
            hint: {
                at: (value: string) => {
                    // 在此可以引用推文等
                    console.log(value)
                    return [
                        {
                            value: value,
                            html: value,
                        },
                    ]
                },
            },
        })

使用的场景是利用@对帖子或其他可直接引用的内容,进行直接引用跳转内嵌。类似于bilibili的AV号的功能。但是即使配置了html参数为value仍然报错

Vanessa219

Vanessa219 commented on Jul 18, 2020

@Vanessa219
Owner

你看一下 http://vditor.b3log.org/demo/advanced-hint.html 这个在你浏览器上会报错么?

HerbertHe

HerbertHe commented on Jul 18, 2020

@HerbertHe
ContributorAuthor

你看一下 http://vditor.b3log.org/demo/advanced-hint.html 这个在你浏览器上会报错么?

@Vanessa219 不会报错,我知道问题在哪里了!!

示例代码的value设置的时候前面手动加了@符号,就是因为这个符号导致的问题,在手动添加之后就解决了。。。

Vanessa219

Vanessa219 commented on Jul 19, 2020

@Vanessa219
Owner

已经加入注意事项中了,这个主要是用于区别表情和 at 的。

added this to the 3.3 milestone on Jul 19, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

Projects

No projects

Relationships

None yet

    Development

    No branches or pull requests

      Participants

      @Vanessa219@HerbertHe

      Issue actions

        使用hint的at方法报错,并且dark模式的编辑器内容颜色存在缺陷 · Issue #592 · Vanessa219/vditor