羽毛笔编辑器将样式应用于文本答案

【问题标题】：Quill editor apply style to text羽毛笔编辑器将样式应用于文本
【发布时间】：2016-07-01 13:02:29
【问题描述】：

我在primeng 编辑器中使用羽毛笔编辑器。我想在键入时对文本应用样式（文本更改）。当我在斜杠中键入文本时，我可能必须应用样式并且应该删除 2 个斜杠。例如：我正在使用 /quill/ 编辑器。这应该是：我正在使用 quill 编辑器。

只有斜线内的文本应该应用样式。除了斜线内的文本不应应用样式。

我已将以下代码添加到 Editor.ts

 this.quill.on('text-change', (delta, source) => {
            if (source == 'user') {
            this.highlightText();
            this.selfChange = true;
            let htmlValue = this.quill.getHTML();
            if (htmlValue == '<div><br></div>') {
                htmlValue = null;
            }

            this.onTextChange.emit({
                htmlValue: htmlValue,
                textValue: this.quill.getText(),
                delta: delta,
                source: source
            });
            //if (this.selfChange)
            this.onModelChange(htmlValue);
            // }
        });

highlightText() {
        var text = this.quill.getText(),
            hashRegex1 = /\/[a-zA-Z\.\*\&\s\d]*\//ig,
            match;

        // Try to clear all cssClass formats
        this.quill.formatText(0, this.quill.getLength(), 'cssClass', false);

        while (match = hashRegex1.exec(text)) {
            this.quill.formatText(match.index, match.index + match[0].length, 'cssClass', 'test');
            this.quill.deleteText(match.index, match.index + 1);
            var textLenth = match[0].length - 2;
            this.quill.deleteText(match.index + textLenth, match.index + textLenth + 1);
            this.quill.prepareFormat('bold', false);
            this.quill.focus();

        }
    }

但问题是一旦突出显示文本，接下来的文本输入就会突出显示（粗体）。突出显示文本后我无法停止突出显示文本，然后所有文本都将在突出显示文本后突出显示。请帮我解决这个问题。

【问题讨论】：

标签： quill

【解决方案1】：

您可以使用formatText 将格式应用于任意范围的文本。如果您使用的是 Quill 1.0 测试版，contextual keyboard handlers 可以使这更容易。

【讨论】：