Vuejs：仅在quilljs中全屏编辑

Question

我正在尝试在我的vue-2应用程序中使用“ vue-quill”：“ ^ 1.5.0-0”，为Richtext写一个编辑器。一切工作正常，但我需要全屏按钮才能全屏，然后单击按钮后返回普通屏。 我尝试过：Fullscreen button for Quill Editor? 似乎不是我要找的东西。它全屏显示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()