问题标签 [ngx-quill]

My web application is based on Angular and I try to integrate Quill into it using ngx-quill library. I have created my custom embed blot containing just unmodifiable text block (retrieved from the database) and now I try to create a custom toolbar allowing users to insert instances of this blot into the text.

My question is, how is it possible to create a custom drop-down in Quill toolbar where I can supply my own content that will be shown to the user and inserted to the text?

I try to do it this way:

...but there are no values shown in the drop-down menu.

It seems that this problem has already been solved for React and plain JS. But it looks like it will be a little bit harder doing so in Angular, especially when Quill is integrated using QuillEditorComponent provided by ngx-quill library.

对于一个学校项目，我们使用 angular v4.4.6，ng2-translate 用于翻译，ngx-quill@1.6.0 用于文本编辑器。当我像这样使用占位符属性时：

<quill-editor placeholder="{{'Topic.new.quill-placeholder' | translate}}"...></quill-editor>

然后我的占位符采用当前语言的值，但是当我选择一种新语言时，我的占位符不会改变。我不知道为什么，想知道这个问题是否有解决方案？

I'm new to the JHipster and Angular6. I've created a project using JHipster and included ngx-quill-editor for an editor. I'm able to save the data using this editor, but when I retrieve the data from the database to display on another page to preview it shows HTML tags. I'm not sure that do I've to render when I'm saving into the database or retrieving from the database or is there any tag which I'm missing eighter saving or retrieving content to render?

I didn't find any tutorial for this example. Any help would be appreciated.

Thanks!

我在 quill 中创建了一个自定义下拉菜单。我用羊皮纸

我在视图中定义了我的编辑器：

我添加了一些 css 定义：

新的下拉菜单显示并正常工作，但标签仍为空。

这里是堆栈闪电战

我使用 ngx-quill 编辑器并遇到空白问题。编辑文本时会出现问题。我尝试将较早生成的 html 插入编辑器，但浪费了白色字符。

我试图覆盖样式：

在样式中添加它时，编辑器在工具栏上有额外的空间在 此处输入图像描述

我看到 ql-editor 类有 white-space: pre-wrap 但对我不起作用。谢谢您的答复

更新：当我意识到 PrimeNg 有一个 quill 实现并且我已经在使用 PrimeNg 时，我放弃了。起初没有工作，但升级到 angular 7 和 ngrx 7 beta 修复了问题。https://www.primefaces.org/primeng/#/editor

我正在尝试使用比默认工具栏更完整的工具栏在我的项目中设置 ngx-quill 文本编辑器。我只是从文档中复制了这段代码片段，还没有调整（还没有！）。

如果我不包含 modules 属性，我不会收到任何浏览器错误，但我想知道我是否有一个仅在我尝试添加它时才显示的导入问题？

说明.html

说明.ts

浏览器中的错误：

我有一个带有羽毛笔文本编辑器的表单。

我在模态中有一个图像库，里面装满了我的图像，我希望这样，如果我从模态中选择图像，则将 img 标签放在编辑器中的文本之后。

这是我要添加的一张图片的代码：

我的问题是生成了 Quill 的 contenteditable div（这是我的文本的 div，它具有“ql-editor”css 类），所以我无法提供使用@ViewChild 的本地参考...（或者我不知道如何）

我试图通过示例 getElementsByClassname 获取“ql-editor” div 的内容，并将我的 img 标签添加到其中，但是角度会引发此错误：

我只使用一个字符串 btw ...

如此链接所述，我正在使用 ngx-quill 将 quill.js 集成到我的项目中。

https://www.npmjs.com/package/ngx-quill

使用这个标签我得到了编辑器和工具栏，但我也想在工具栏上添加图像按钮。

我刚刚将 quilljs 集成到我的应用程序中。我现在面临的一个问题是 p 标签的一些奇怪行为。

例如，在我的组件中，我正在设置反应形式：

在模板中：

此代码最终将编辑器的内容设置为：

我用 textarea 对其进行了测试，以检查反应形式是否将其剥离，而事实并非如此。

尝试向 quill-editor 添加属性[sanitize]="true"=> 没有任何变化。

我错过了什么？

另一个想法

可能，它会剥离所有标签并简单地用p标签包装内容。
但是，如果我在段落之间添加另一个 ' '，它的格式会保持正确。

无法使用 angular flex 布局设置 ngx-quill 编辑器的高度。

编辑器的高度（灰色边框）溢出父 div（红色背景）。

堆栈闪电战

如何确保编辑器留在父 div 中？