javascript - Quill insertText 产生 TypeError : n.appendChild 不是函数

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

我正在扩展文本 Blob 并尝试使用文档 notes from here (复制分隔符代码)但输出最终只是将 true 打印到编辑器。

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

I'm extending the text blot and attempting to use the documentation notes from here (copying the divider code) but the output ends up just printing true to the editor.

在讨论如何克隆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 等。

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

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>

如果只是设置文本样式，我不建议创建新的印迹，因为不需要如此复杂的东西。您可以使用 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 .