2

今日、リッチ テキスト エディターを探しているときに Quill を発見し、ドキュメントに従って動作させようとしました。これまでのところ、ほとんどの場合問題なく動作しています。

私の唯一の問題は、リンクアイコンをクリックしても、次のクラスが不思議なことに ql-tooltip<div>要素に追加されているため、ツールチップが表示されないことです: ql-out-bottom.

このクラスは、次の CSS ルールを に追加しますquill.snow.css:391。

.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 に頻繁に投稿しないので、この投稿がすべての手続きに従っていることを願っています。

4

2 に答える 2

2

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">

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

于 2020-04-19T02:38:28.167 に答える
0

2 つのクラス.ql-out-bottomと.ql-out-topは、ツールチップがエディターの垂直境界を超えて表示されるときに追加されます。

于 2016-08-12T20:03:52.207 に答える