リッチテキストエディタvue 2-editorはフルスクリーン機能を実現します。

vue 2-editorはとてもいいです。残念ながらフルスクリーン機能を持っていません。自分で一つを実現しました。皆さんの参考になります。
実現のアイデア：カスタムモジュール。
1.フルスクリーンモジュールを定義するFulscreen

/**
 *         
 */
import noScroll from 'no-scroll'
export default class Fullscreen {
 constructor (quill, options = {}) {
  this.quill = quill
  this.options = options
  this.fullscreen = false
  this.editorContainer = this.quill.container.parentNode.parentNode
 }
 handle () {
  if (! this.fullscreen) {
   this.fullscreen = true
   this.editorContainer.className = 'ql-editor ql-blank editor-fullscreen'
   noScroll.on()
  }else{
   this.fullscreen = false
   this.editorContainer.className = 'ql-editor ql-blank'
   noScroll.off()
  }
 }
}

Fulscreen.js
2.エディタのオプションでモジュールを登録します。グローバルに置いたGlobal.vueです。他のページから直接このオプションを引用します。

const EDITOR_OPTIONS = {
 modules: {
  fullscreen: {},
  toolbar: {
   container: [
    [{ header: [false, 1, 2, 3, 4, 5, 6] }],
    ["bold", "italic", "underline", "strike"], // toggled buttons
    [
     { align: "" },
     { align: "center" },
     { align: "right" },
     { align: "justify" }
    ],
    ["blockquote", "code-block"],
    [{ list: "ordered" }, { list: "bullet" }, { list: "check" }],
    [{ indent: "-1" }, { indent: "+1" }], // outdent/indent
    [{ color: [] }, { background: [] }], // dropdown with defaults from theme
    ["link", "image", "video"],
    ["clean"], // remove formatting button
    ['fullscreen']
   ],
   handlers: {
    fullscreen() {
     this.quill.getModule('fullscreen').handle()
    }
   }
  }
 }
}

3.ページでの参照

<vue-editor
  useCustomImageHandler
 @imageAdded="handleImageAdded"
 v-model="entity.content"
 :editorOptions="$global.EDITOR_OPTIONS"
 class="editor">
</vue-editor>

import {VueEditor, Quill} from "vue2-editor"
import Fullscreen from '../Fullscreen'
Quill.register('modules/fullscreen', Fullscreen)

4.最後にフルスクリーンのスタイルをフルスクリーンに入れて、エディタの高さをコントロールしました。デフォルトは適応高さです。

.editor .ql-editor{
 height: 300px;
 }
 .editor-fullscreen{
  background: white;
  margin: 0 !important;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 100000;
  .ql-editor{
   height: 100%;
  }
  .fullscreen-editor {
   border-radius: 0;
   border: none;
  }
  .ql-container {
   height: calc(100vh - 3rem - 24px) !important; 
   margin: 0 auto;
   overflow-y: auto;
  }
 }
 .ql-fullscreen{
 background:url('./assets/images/fullscreen.svg') no-repeat center!important;
 }

締め括りをつける
以上は小编で绍介したリッチテキストエディタvue 2-editorがフルスクリーンの机能を実现しました。皆さんに何かお聞きしたいことがあれば、メッセージをください。ここでも私たちのサイトを応援してくれてありがとうございます。