时间戳

首页 > 解决方案 > Quill JS自定义印迹插入文本“true”而不是正确的文本

javascript - Quill JS自定义印迹插入文本“true”而不是正确的文本

问题描述

我正在使用 Blots 创建自定义羽毛笔元素，但是在尝试使用存储的 Delta 设置编辑器内容时，我得到了一些奇怪的结果。这有点难以用语言来解释，所以我创建了一个具有可重现场景的代码笔。 https://codepen.io/jake613/pen/wQLvxa - 按照javascript部分顶部的评论进行复制

requirement for codepen link

标签： javascriptquillparchment

解决方案

创建 delta 时value()，您的印迹方法的返回值将作为插入指令插入到 delta 中。如果您的印迹类没有值函数，则某些印迹的默认返回值为真。因此，当您应用该增量时，您的 Blot 文本将是真实的。

检查你的印迹的所有父类的值函数，你会看到应用了什么。

在你的StarTagBlot类中添加一个函数value()。该函数的返回值必须与您在 delta insert 方法的第一个参数中的返回值相同，new Delta().insert({StarTagBlot: 'some text'}, attributesData)以显示您的印迹。如果您的自定义印迹中有一些文本，它应该是这样的：

class StarTagBlot extends Inline {
...
    //returns what delta expects as insert text
    //if empty only true is returned
    value() {
        return { StarTagBlot: this.domNode.innerText.trim()};
    }
...
}

推荐阅读