Vuejs: Fullscreen the editor only in quilljs

user_5899688 0
Viewed 721

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

enter image description here

I need:

js

Please help if somebody has fixed this before.

quill javascript
1 Answers

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()

user_36870180
Related