Quill insertText 产生 TypeError: n.appendChild is not a function

Question

我正计划在我的网站中实现 Quill，但不幸的是 insertText 函数正在生成以下内容：

TypeError: n.appendChild is not a function shadow.ts:150
    wrap shadow.ts:150
    formatAt shadow.ts:70
    format embed.ts:26
    value cursor.js:25
    formatAt embed.ts:30
    formatAt container.ts:98
    forEachAt linked-list.ts:114
    formatAt container.ts:97
    formatAt block.ts:42
    value block.js:78
    value cursor.js:35
    value selection.js:110
    value quill.js:157
    a quill.js:437
    value quill.js:149
    value toolbar.js:101

我正在扩展文本印迹并尝试使用文档 notes from here（复制分隔符代码），但输出最终只打印到编辑器中。

JS

const Text = Quill.import("blots/text");
class SchoolNameBlot extends Text {}
SchoolNameBlot.blotName = "tagName";
SchoolNameBlot.tagName = "NAME";

const toolbarOptions = [['bold', 'italic'], ['link', 'image', 'tagName']];

Quill.register(SchoolNameBlot);

const options = { 
    debug: 'info',
    theme: 'snow',
    modules: {
        toolbar: toolbarOptions
    }
}

const editor = new Quill("#msgText", options);

$("#tagName-Button").click(function() {
    let range = editor.getSelection(true);
    editor.insertText(range.index, "insertText");
});

HTML 元素：

<div class="col-md-11">
    <div id="msgText"></div>
</div>

输出

据我所知，我正确使用了 Quill，所以我不确定为什么会产生这个错误。我正在使用他们页面上提供的CDN's。

Answer 1

我正在扩展文本印迹并尝试使用文档 来自这里的注释（复制分隔符代码）但输出最终只是 打印真实的编辑器。

在讨论如何克隆 Medium 的链接中，没有创建扩展 blots/text 的印迹。 Divider 是使用 blots/block/embed 创建的。基本上，可以创建 3 种类型的印迹：

• Block Blot
• Inline Blot
• Embed Blot

为了帮助您更好地理解我在说什么，我建议您阅读一下Parchment and Blots。

现在，关于您的问题本身...从您的示例中可以看出，您刚刚创建了一个印迹，但没有向其添加任何行为，并且您已将创建的印迹标签名称设置为 NAME。在 HTML 中的所有现有标签中，没有一个名称为 <NAME>。看：

• https://www.w3schools.com/TAGs/
• https://techspirited.com/all-html-tags-list-of-all-html-tags

您给tagName 的名称将是用于结果的HTML 标记，即您的印迹将代表什么。例如，如果要添加image，则需要为 tagName 赋予值 IMG。对于header title，您可以使用 h1、h2、h3 等。

查看您的代码，并看到上面写的名称“tag”，在我看来，您只是想添加一些程式化的文本。可不可能是？如果是这种情况，请查看以下示例：

let Inline = Quill.import('blots/inline');

class SchoolNameBlot extends Inline {
    // Overriding this method, in this particular case, is what 
    // causes the Delta returned as content by Quill to have 
    // the desired information.
    static formats(domNode) {
        if(domNode.classList.contains('my-style')){
            return true;
        }
        else{
            return super.formats(domNode);
        }
    }

    formats() {
        // Returns the formats list this class (this format).
        let formats = super.formats();

        // Inline has the domNode reference, which in this 
        // case represents the SPAN, result defined in tagName.
        formats['tag-name'] = SchoolNameBlot.formats(this.domNode);

        // In the code above, it is as if we are adding this new format.
        return formats;
    }
}

SchoolNameBlot.blotName = 'tag-name';
SchoolNameBlot.tagName = 'span';
SchoolNameBlot.className = 'my-style';

Quill.register(SchoolNameBlot);

$(document).ready(function () {
    var toolbarOptions = { 
        container: [['bold', 'italic'], ['link', 'image', 'tag-name']],
        handlers: {
            'tag-name': function(){
                this.quill.insertText(0, 'Hello', 'tag-name', true);
            }
        }
    };

    var quill = new Quill('#editor', {
        theme: 'snow',
        modules: {
            'toolbar': toolbarOptions
        }
    });
});

.my-style{
    background: rgb(254, 255, 171);
    border-radius: 2px;
    padding: 2px 2px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//cdn.quilljs.com/1.3.6/quill.min.js"></script>
<link href="//cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
<p>Instructions:</p>
<ol>
<li>Press the invisible button (with no icon) next to the add image button.</li>
</ol>
<div id="editor">
  
</div>

如果只是设置文本样式，我不建议创建新的 Blot，因为不需要这么复杂的东西。你可以使用Attributors。之前的代码如下所示：

const Parchment = Quill.import('parchment')
var config = {
    scope: Parchment.Scope.INLINE,
    whitelist: ['yellow', 'red', 'blue' , 'green']
};
var SchoolName = new Parchment.Attributor.Class('my-attributor', 'style' , config);
Quill.register(SchoolName);

$(document).ready(function () {
    var toolbarOptions = {
        container: [['bold', 'italic'], ['link', 'image', 'my-button'] , ['clean']] ,
        handlers: {
            'my-button': function () {
                let range = this.quill.getSelection();
                this.quill.insertText(range.index, 'Hello', 'my-attributor' , 'yellow');
            }
        }
    };

    var quill = new Quill('#editor', {
        theme: 'snow',
        modules: {
            'toolbar': toolbarOptions
        }
    });
});

.style-yellow{
    background: rgb(254, 255, 171);
    border-radius: 2px;
    padding: 2px 2px;
}

.style-red{
    background: rgb(255, 171, 171);
    border-radius: 2px;
    padding: 2px 2px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//cdn.quilljs.com/1.3.6/quill.min.js"></script>
<link href="//cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
<p>Instructions:</p>
<ol>
<li>Press the invisible button (with no icon) next to the add image button.</li>
</ol>
<div id="editor">
  
</div>

最后提示，您可以随时从Quill official website 和from its repositories 获得更多信息。如需更多信息、示例和常见问题解答（Quill FAQ），请查看here。