
Quill是一款免费且开源的文本编辑器,属于所见即所得编辑器的范畴,主要用于我们今天使用的现代网络。它是一个高度可定制的文本编辑器,具有许多表达性的API。Quill非常易于使用,并提供了一个良好的界面,即使对于只有标记经验的人来说,也很容易理解。
在本教程中,我们将使用多个示例来解释如何使用Quill.js构建文本编辑器。
虽然有许多所属于所见即所得文本编辑器的富文本编辑器,但最广泛使用的是Quill,差距非常大。现在,让我们来学习如何使用Quill。
让我们使用Quill创建一个基本的文本编辑器
与Quill一起工作的第一步是能够在我们选择的编辑器中使用它,并为此,我们需要将下面显示的两个CDN链接放在我们的HTML代码的
标签中。第一个CDN链接是Quill的CSS样式文件,而第二个CDN链接是Quill的JavaScript文件。我们需要将上面显示的这两行代码添加到我们的HTML代码的
标签中。我们的标签应该看起来像这样。
Quill Text Editor
现在我们已经在
标签中添加了CDN,现在是时候开始处理标签了。在标签内部,让我们创建一个id="editor"的在上面的代码中,我们创建了一个id为"editor"的
现在剩下的就是在其中创建一个
考虑下面显示的。
上述的
index.html
整个HTML代码如下所示。
Example
Quill Text Editor
如果您在浏览器中打开上述HTML文件,您将在浏览器中看到一个文本编辑器输出。在您将看到的文本编辑器中,我们将有大量的工具栏选项可供我们使用,我们可以在文本编辑器中使用任何一个。
让我们自定义文本编辑器的外观
现在假设我们只想提供两个默认的工具栏选项,而不是在普通文本编辑器中默认获得的所有选项。在这种情况下,我们可以使用下面显示的
在上面的
index.html
下面显示的是更新后的 index.html 文件。
Example
Quill Text Editor
如果您在浏览器中运行上述文件,您将只能在文本编辑器中看到三个工具栏选项,即粗体选项、斜体选项和下划线选项。
在控制台中记录文本编辑器的内容
现在假设我们想要将我们在文本编辑器中写的内容记录到控制台中,为了做到这一点,我们首先需要在
标签中创建一个按钮。考虑下面显示的创建按钮的代码片段。
现在让我们专注于
考虑下面显示的更新的
在上述
