今天,我在寻找富文本编辑器时发现了 Quill,并尝试按照文档使其正常工作。到目前为止,大部分工作都很好。
我唯一的问题是,当我单击链接图标时,工具提示不会出现,因为以下类被神秘地添加到 ql-tooltip <div>
元素:ql-out-bottom
.
此类在 quill.snow.css:391
添加了以下 CSS 规则:
.ql-snow .ql-out-bottom, .ql-snow .ql-out-top {
visibility: hidden;
}
这个类没有被添加到 Quill 的文档演示中,这真的让我很困惑。
这是我当前的设置,完全是从文档中复制的:
var snowQuill = new Quill('.quill', {
placeholder: 'Skriv noget hyggeligt her...',
modules: {
toolbar: [
[{ header: [] }],
['bold', 'italic', 'underline', 'link'],
[{ color: [] }, { background: [] }],
[{ list: 'ordered' }, { list: 'bullet' }],
['clean']
]
},
theme: 'snow'
});
我正在使用 Quill v1.0.0-beta.11 并从 cdn.quilljs.com 获取 JS 和 CSS。希望这篇文章遵循所有手续,因为我不经常在 Stackoverflow 上发帖。
最佳答案
对于那些在 Angular 中遇到问题的人:
QuillModule.forRoot({
modules: {
toolbar: [
[{ header: [false, 1, 2] }],
["bold", "italic", "underline"],
["blockquote"],
['link', 'image', 'video'],
['clean']
],
},
bounds: "document.body",
theme: "snow"
})
该链接可能隐藏在 Angular 中,并且由于 Angular 的生成方式而无法更改此处的边界。不过,这可以解决这个问题:
<quill-editor bounds="self">
关于javascript - Quill Link 工具提示默认不可见,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38924971/