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

问题描述 投票:0回答:1

我正计划在我的网站中实现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>

输出

Output of the inputText

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

javascript quill
1个回答
1
投票

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

在提出的有关如何克隆培养基的链接中,没有产生延伸blots/text的印迹。使用Divider创建blots/block/embed。基本上,可以创建3种类型的污点:

[为了帮助您更好地理解我在说什么,建议您阅读一些有关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>

[仅用于设置样式,我不建议您创建新的污点,因为不需要这么复杂的内容。您可以使用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 websitefrom its repositories中获取更多信息。有关更多信息,示例和常见问题(Quill FAQ),请查看here

© www.soinside.com 2019 - 2024. All rights reserved.