Quill Link 工具提示默认不可见

Question

今天我在寻找富文本编辑器时发现了 Quill，并尝试按照文档使其正常工作。到目前为止，大部分工作正常。

我唯一的问题是，当我点击 Link 图标时，由于以下 class 被神秘地添加到 ql-tooltip <div>元素：ql-out-bottom.

此 class 在 quill.snow.css:391 添加了以下 CSS 规则：

.ql-snow .ql-out-bottom, .ql-snow .ql-out-top {
    visibility: hidden;
}

这个 class 没有被添加到 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。希望这个 post 遵守所有手续，因为我不经常 post 在 Whosebug 上。

Answer 1

两个类 .ql-out-bottom 和 .ql-out-top 当工具提示出现在编辑器的垂直边界之外时添加。

Answer 2

对于那些在 Angular 中遇到问题的人：

    QuillModule.forRoot({
      modules: {
        toolbar: [
          [{ header: [false, 1, 2] }],
          ["bold", "italic", "underline"],
          ["blockquote"],
          ['link', 'image', 'video'],
          ['clean']
        ],
      },
      bounds: "document.body",
      theme: "snow"
    })

link 可能隐藏在 Angular 中，由于 Angular 的生成方式，更改此处的边界不起作用。但是，这将解决它：

<quill-editor bounds="self">

https://github.com/KillerCodeMonkey/ng-quill/issues/145

Quill Link 工具提示默认不可见

Quill Link tooltip is invisible by default

javascript

quill