如何在通过“API”插入的 Quilljs 中格式化/样式化文本答案

【问题标题】：How to format/style text in Quilljs inserted via “API”如何在通过“API”插入的 Quilljs 中格式化/样式化文本
【发布时间】：2022-08-18 22:16:15
【问题描述】：

有没有办法返回编辑器中的内容并格式化以“API”作为源插入的文本？

我想展示他们手动编写的用户内容，而不是通过 API 插入的用户内容。

最好创建一个切换，显示他们编写的内容和 API 编写的内容。在他们写作时不需要对其进行样式设置。也许更像是“编辑”模式，我可以在其中突出显示 API 文本。

谢谢你。

抱歉，但我不确定您到底想要什么。你能解释更多关于样式文本的内容吗？谢谢！

标签： wysiwyg quill

【解决方案1】：

因此，您可以通过将 api 文本作为包含标识符类的跨度插入来实现：

Codepen

<div id="editor-container">
</div>

#editor-container {
  height: 375px;
  color: blue
}

.added-by-api {
  color: red
}

let Embed = Quill.import("blots/embed");

class ApiSpan extends Embed {
  static create(value) {
    const node = super.create();
    node.classList.add("added-by-api");
    node.innerText = value;
    return node;
  }
}

ApiSpan.blotName = "apiSpan";
ApiSpan.tagName = "span";
Quill.register(ApiSpan);

var quill = new Quill("#editor-container");

quill.insertEmbed(0, "apiSpan", "this text was added by the api ");
quill.insertText(0, "this is a normal text ");
quill.insertEmbed(0, "apiSpan", "this text was added by the api ");

现在所有由 api 添加的文本都是红色的，其余的都是蓝色的，你现在可以用它来做各种动作。我希望这可以解决您的问题，如果没有，请更新我，我将相应地重构我的代码。

【讨论】：