问题标签 [ngx-quill]

我正在使用 ngx-quill 创建模板设计器，我希望能够将编辑器的内容导出为图像。我可以成功地将内容导出为 HTML 和 PDF，但找不到将其导出为图像的方法。

我在我的页面上添加了 Quilljs 编辑器。我正在尝试获取内容的阀门。

我在 YouTube 上关注一个名为“Using Quill JS Text Editor With Angular 7”的视频。如图所示，我已完成所有操作，但出现此错误：

我的home.html代码：

home.ts代码：

我已经导入了 FormsModule、ReactiveFormsModule，app.module.ts但home.module.ts没有任何效果。

如何解决此错误并获取 Quill 编辑器的值？

编辑 1

经过小代码更正[括号]，现在它说：

无法绑定到“formGroup”，因为它不是“form”的已知属性。

我需要在生成的代码而不是 ql-classes 上获取内联样式。我在用着 ：

在我的 Angular 6 应用程序中。

我正在 Twitter 上工作，就像用户提到 Quill 编辑器一样。

我的自定义印迹代码是

我在下拉列表中显示用户列表。每当单击一个用户名时，我都会将该用户作为@User嵌入到羽毛笔编辑器中。

这是我为它编写的点击事件。我在这里做的事情是用自定义的内联印迹替换@之后输入的文本用户。

直到这里，一切都像魅力一样工作，但我面临的问题是在插入嵌入用户提及印迹之后，如果用户在键盘上输入Enter 按钮以转到新行，则 Quill 的handleEnter()函数将被触发并且它正在插入@undefined usermention 印迹给编辑。

执行完上面的函数后，我的编辑器状态是这样的。

当我按 Enter 进入新行时，这是 handleEnter() 函数的调试状态 - Quill

@undefined usermention 被插入到编辑器中。我希望用户输入新行。

当用户按 Enter 键时，我知道 quill.format() 正在返回 usermention:true。但是如果用户在输入几个字符后按 Enter 键，它会将他带到新行，在这种情况下 quill.format() 是空的。

有人可以在这方面帮助我吗？谢谢你。

我正在使用 ngx-quill 在我的 Angular 应用程序中添加 quill 编辑器。这是配置

app.module.ts

当我在 JIT 和开发模式下编译我的应用程序时，这工作正常。但是当我尝试构建 AOT

有这个错误

如何解决此错误并使用 quill 模块构建 AOT

简而言之：我正在尝试创建一个自定义列表印迹以在 ngx-quill 中显示一个字母列表。

到目前为止我所做的：我通过从“ https://github.com/quilljs/quill/blob/develop/formats/list.js ”复制和粘贴并编辑 创建了一个自定义列表印迹：

并将此列表印迹添加到工具栏：

预期行为： 它应该在屏幕上出现一个从“a”开始计数的字母列表，例如：

一个。首先
b. 第二

HTML 中的演示文稿：

实际行为： 屏幕上出现一个项目符号列表：

• 第一的
• 第二

HTML 中的演示文稿：

我希望有人可以帮助我解决这个问题。我完全不知道出了什么问题。

亲切的问候，HTanke

我按照基本步骤设置 ngx-quill。经过一些研究，我还安装了 ngx-quill 和 quill。但我仍然得到同样的错误。

我简单地使用 eidtor<quill-editor></quill-editor>

我使用它的组件是延迟加载的。我添加QuillModule.forRoot()到我的主模块的导入中，并尝试将它添加到我的延迟加载模块中。然后我尝试将它添加到两者中，我也尝试添加它而不添加forRoot(). 错误保持不变。我不知道应该在哪里将 QuillEditorBase 添加到 ngmodule。

我究竟做错了什么？我没有自定义配置。我刚刚安装它并想尝试让它工作..

C:/Users/sijaw/Documents/Projects/Student Portal/staff-portal-latest/staff-portal/node_modules/ngx-quill/ngx-quill.d.ts 中的指令 QuillEditorBase 中的错误没有选择器，请添加！

无法确定 C:/Users/sijaw/Documents/Projects/Student Portal/staff-portal-latest/staff-portal/node_modules/ngx-quill/ngx-quill.d.ts 中的 QuillEditorBase 类的模块！将 QuillEd itorBase 添加到 NgModule 以修复它。

如何强制羽毛笔编辑器不超过其初始高度？

我有一个带有一些项目的网格布局，基本上都是外部组件，其高度我不知道（从某种意义上说：我不想硬编码任何高度，因为我可能会更改内容或内容自己的实现变化）。

在下面的示例中，我有一个 2x2 网格

其中编辑器在第二列中跨越两行。（这里，Editor实际上是一个围绕实际编辑器标签占据 quill 的包装器组件。）

我现在的目标是总网格/行高度由其他内容确定，并且编辑器使用与内容相同的高度。编辑器应该填充它的单元格，但一旦在编辑器中输入更多文本，就不会超过它。相反，编辑器内容应该滚动（并且工具栏保持在原位）。

首先是片段：

您可以尝试并在编辑器中添加额外的一行（例如在“第 4 行”之后）。请注意第一列中的其他单元格是如何增长的，现在第一列中的内容之间存在不需要的额外间隙。

由于我使用的组件不同，我有几个级别的divs。首先是#editor-container，它包含实际的 quill 编辑器和插入上面的工具#editor栏#editor-container。然后是#editor-wrapper，它包裹了整个容器。最后，我们有了实际的网格单元#editor-cell。

如您所见，我使用的是 flex-layout。这至少使 quill 使用所有可用的高度 - 但它不限制其最大高度。

quill 的实际配置也可以是动态的，即在某些情况下，如果工具栏上有很多按钮，它可能有两排高。

附加信息：我的实际应用程序是一个 Angular 应用程序，使用ngx-quill. 我想坚持视图封装并避免任何全局样式或::ng-deep，即不更改 quill 提供的内部样式/主题。

哦，当然非常感谢仅使用 CSS 的解决方案。:D

但是任何类型的解决方法也将受到欢迎。

解决方案尝试#1

我现在有了第一个解决方法，方法是修复网格行的高度并min-height: 0在#editor. 我认为#editor这是一个实现细节，所以我宁愿不应用任何 CSS，但我可以接受。

但我绝对不想修复网格行的高度（"O1 E" 70px）。我仍在努力寻找解决方案。

我正在尝试插入此 html： htmlBody = '<p style="color: red;">abc</p>'

但我有结果<p>abc</p>。

风格在哪里？是角带还是 ngx-quill 包？

我也试过：

1.

2.

但那些对我没有帮助。