Question

如何在QuillJS中放置工具提示？我无法将工具提示放在指定的边界：

const Tooltip = Quill.import('ui/tooltip')
var quill = new Quill('#editor-container', {
  modules: {
    toolbar: [
      [{ header: [1, 2, false] }],
      ['bold', 'italic', 'underline'],
      ['image', 'code-block']
    ]
  },
  placeholder: 'Compose an epic...',
  theme: 'snow'  // or 'bubble'
});

quill.setText('Hello\nWorld!');
let myBounds = quill.getBounds(2, 1);
let myTooltip = new Tooltip(quill, myBounds);
myTooltip.show();

工具提示显示在编辑器外部。我无法找到有关创建工具提示的具体API文档。

Answer 1

我意识到我需要在Tooltip中使用位置方法。传入参考对象，例如来自 getBounds 的参考对象，工具提示将出现在边界处：

const Tooltip = Quill.import('ui/tooltip');

var quill = new Quill('#editor-container', {
  modules: {
    toolbar: [
      [{ header: [1, 2, false] }],
      ['bold', 'italic', 'underline'],
      ['image', 'code-block']
    ]
  },
  placeholder: 'Compose an epic...',
  theme: 'snow' 
});

quill.setText('Hello\nWorld!');
let myBounds = quill.getBounds(10, 0);
let myTooltip = new Tooltip(quill);

document.querySelector("#editor-container").addEventListener("mouseover", ()=>{
  myTooltip.show();
  myTooltip.position(myBounds);
})

将工具提示放在QuillJS中

1 个答案: