javascript - Vuejs : Fullscreen the editor only in quilljs

Question

我正在尝试使用“vue-quill”:“^1.5.0-0”在我的 vue-2 应用程序中为富文本编写一个编辑器。一切正常，但我需要全屏按钮到全屏和正常屏幕返回按钮点击。我试过:Fullscreen button for Quill Editor?这似乎不是我要找的。它是 fullscreening fwebsite 的整个页面而不是编辑器区域本身。如果没有额外的插件，有没有办法做到这一点？

现在我有:

模板:

 <quill v-model="feedback.content" :config="quillConfig" output="html"></quill>

脚本:

quillConfig: {
        modules: {
          toolbar: [
            [{ direction: "rtl" }],
            ["bold", "italic", "strike"],
            // [{ header: 1 }, { header: 2 }],
            [{ list: "bullet" }, { list: "ordered" }],
            // [{ script: "sub" }, { script: "super" }],
            [{ indent: "-1" }, { indent: "+1" }],
            // [{ size: ["small", false, "large", "huge"] }],
            // [{ header: [1, 2, 3, 4, 5, 6, false] }],
            // [{ font: [] }],
            // [{ color: [] }, { background: [] }],
            ["image", "video"],
            [{ align: [] }],
            ["fullscreen"]
            // ["clean"]
          ]
        },
        placeholder: "add content",
        theme: "snow"
      }

---

我需要:

如果有人以前解决过这个问题，请帮忙。

Answer 1

The answer you mentioned是正确的。您只需要将编辑器作为参数传递给“请求”函数即可。

有点像

const htmlEditorContainer = document.querySelector('.p-editor-container')
screenfull.request(htmlEditorContainer);

这样在页面全屏时只有编辑器可见。

对应的官方API为Element.requestFullscreen()