Vuejs:仅在 quilljs 中全屏显示编辑器 [英] Vuejs: Fullscreen the editor only in quilljs

问题描述

我正在尝试使用vue-quill":^1.5.0-0"，在我的 vue-2 应用程序中编写富文本编辑器.一切正常，但我需要全屏按钮全屏和正常屏幕返回按钮单击.我试过:

<小时>

我需要:

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

解决方案

你提到的答案是正确的.您只需要调用请求"即可.函数将编辑器作为参数传递.

类似的东西

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

这样，当页面全屏时，只有编辑器可见.

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

I'm trying to write an editor for richtext in my vue-2 application with "vue-quill": "^1.5.0-0",. Everything is working fine, but I need fullscreen button to fullscreen and normalscreen back on button click. I tried: Fullscreen button for Quill Editor? It seems not to be what I'm looking for. It is fullscreening the full page of fwebsite not an editor area itself. Is there any way of doing it withoud additional plugin?

Now I have:

template:

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

script:

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

---

I need:

Please help if somebody has fixed this before.

解决方案

The answer you mentioned is correct. You only need to call "request" function passing the editor as the parameter.

Something like

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

This way only the editor is visible while the page is fullscreen.

The corresponding official API is Element.requestFullscreen()

这篇关于Vuejs:仅在 quilljs 中全屏显示编辑器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！