QQ咨詢
微信平臺
留言咨詢
返回頂部

綿陽網站建設QQ咨詢一 綿陽網站建設QQ咨詢二 綿陽網站建設QQ咨詢三
0816-6339181

N E W S

動態

永遠以客戶為中心,最大化提升服務價值

vue2-editor富文本編輯器添加全屏功能

發布時間:2019-05-27 來源: 人氣:0 所屬類別:網站知識

vue2-editor非常不錯,可惜并未帶全屏功能,今天綿陽動力網站建設就為大家介紹通過自定義模塊來全屏功能,供大家參考。

1. 定義全屏模塊Fullscreen

/**
 * 編輯器的全屏實現
 */
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()
  }
 }
}

Fullscreen.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;
 }

通過上邊的4步操作就可以輕松實現vue2-editor富文本編輯器添加全屏功能。

相關信息
Copyright 2007- www.gaindw.live All Rights Reserved 綿陽動力網站建設 版權所有
贵州11选5走势图推荐 全天重庆时时彩万计划 什么是百搭麻将 北京塞车全天计划数据 三肖六码公开 吉林快3每两期预测 湖北麻将卡五星 赤壁ol可以赚钱么 欢乐捕鱼人攻略 麻将单机版下载2013 辽宁11选5号码推荐 贵州十一选5走势手机版 时时彩打大小单双技巧 广西十一选五开奖视频 pk10赛车群 时时彩人工计划 重庆快乐10分规则