富文本编辑器vue2-editor实现全屏功能

 更新时间:2019年05月26日 11:00:15   作者:消失的风  
这篇文章主要介绍了富文本编辑器vue2-editor实现全屏功能,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值 ,需要的朋友可以参考下

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

总结

以上所述是小编给大家介绍的富文本编辑器vue2-editor实现全屏功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

相关文章

  • vue watch报错:Error in callback for watcher "xxx":"TypeError的解决方法

    vue watch报错:Error in callback for watcher "xxx&qu

    这篇文章主要给大家介绍了关于vue watch报错:Error in callback for watcher “xxx“:“TypeError:Cannot read properties of undefined的解决方法,需要的朋友可以参考下
    2023-03-03
  • vue项目中使用ueditor的实例讲解

    vue项目中使用ueditor的实例讲解

    下面小编就为大家分享一篇vue项目中使用ueditor的实例讲解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-03-03
  • 详解vue-cli 脚手架 安装

    详解vue-cli 脚手架 安装

    这篇文章主要介绍了vue-cli脚手架安装,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • Vue基础配置讲解

    Vue基础配置讲解

    在本篇文章里小编给大家整理的是关于Vue基础配置讲解内容,有兴趣的朋友们可以学习下。
    2019-11-11
  • Vue项目保持element组件同行,设置组件不自动换行问题

    Vue项目保持element组件同行,设置组件不自动换行问题

    这篇文章主要介绍了Vue项目保持element组件同行,设置组件不自动换行问题。具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-02-02
  • 如何构建一个Vue插件并生成npm包

    如何构建一个Vue插件并生成npm包

    这篇文章主要介绍了如何构建一个Vue插件并生成npm包,帮助大家更好的理解和使用vue,方便以后的开发,感兴趣的朋友可以了解下
    2020-10-10
  • Vue中v-if、v-if-else、v-else-if与v-show的基本使用

    Vue中v-if、v-if-else、v-else-if与v-show的基本使用

    v-if,v-else,v-else-if,v-if指令用于条件性地渲染一块内容,这块内容只会在指令的表达式返回truth值的时候被渲染,这篇文章主要给大家介绍了关于Vue中v-if、v-if-else、v-else-if与v-show的基本使用,需要的朋友可以参考下
    2022-10-10
  • Vue中render函数调用时机与执行细节源码分析

    Vue中render函数调用时机与执行细节源码分析

    这篇文章主要为大家介绍了Vue中render函数调用时机与执行细节源码分析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-10-10
  • Vue中import与@import的区别及使用场景说明

    Vue中import与@import的区别及使用场景说明

    这篇文章主要介绍了Vue中import与@import的区别及使用场景说明,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-06-06
  • 使用vue-cli脚手架工具搭建vue-webpack项目

    使用vue-cli脚手架工具搭建vue-webpack项目

    这篇文章主要介绍了使用vue-cli脚手架工具搭建vue-webpack项目,通过几个默认的步骤帮助你快速的构建Vue.js项目。非常具有实用价值,需要的朋友可以参考下
    2019-01-01

最新评论