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

我正在扩展文本污点并尝试使用文档从这里注释（复制分频器代码），但输出最终只是打印到编辑器。

在提供的有关如何克隆培养基的链接中，没有创建延伸blots/text的印迹。 Divider是使用blots/block/embed创建的。基本上，可以创建三种类型的污点：

为帮助您更好地理解我在说什么，建议您阅读一些有关Parchment and Blots的信息。

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

您为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获取更多信息。有关更多信息，示例和常见问题（奎尔常见问题解答），请查看here。

鹅毛笔insertText产生TypeError：n.appendChild不是函数

1 个答案: