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


Posted in Javascript onMay 26, 2019

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实现全屏功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
在IE上直接编辑网页内容的js代码(IE地址栏js)
Apr 27 Javascript
javascript 快速排序函数代码
May 30 Javascript
在jQuery ajax中按钮button和submit的区别分析
Oct 07 Javascript
file控件选择上传文件确定后触发的js事件是哪个
Mar 17 Javascript
js删除局部变量的实现方法
Jun 25 Javascript
jquery组件WebUploader文件上传用法详解
Oct 23 Javascript
JS中判断null的方法分析
Nov 21 Javascript
jQuery UI制作选项卡(tabs)
Dec 13 Javascript
JS中setTimeout和setInterval的最大延时值详解
Feb 13 Javascript
JavaScript判断变量名是否存在数组中的实例
Dec 28 Javascript
vue2中使用less简易教程
Mar 27 Javascript
JS回调函数原理与用法详解【附PHP回调函数】
Jul 20 Javascript
vue中$refs, $emit, $on, $once, $off的使用详解
May 26 #Javascript
我要点爆”微信小程序云开发之项目建立与我的页面功能实现
May 26 #Javascript
vue指令做滚动加载和监听等
May 26 #Javascript
vxe-table vue table 表格组件功能
May 26 #Javascript
使用Vue.observable()进行状态管理的实例代码详解
May 26 #Javascript
微信小程序 swiper 组件遇到的问题及解决方法
May 26 #Javascript
vue项目打包后怎样优雅的解决跨域
May 26 #Javascript
You might like
php面向对象全攻略 (五) 封装性
2009/09/30 PHP
PHP读取txt文件的内容并赋值给数组的代码
2011/11/03 PHP
PHPMailer发送HTML内容、带附件的邮件实例
2014/07/01 PHP
PHP回溯法解决0-1背包问题实例分析
2015/03/23 PHP
php中的抽象方法和抽象类
2017/02/14 PHP
FCK调用方法..
2006/12/21 Javascript
不错的JS中变量相关的细节分析
2007/08/13 Javascript
[HTML/CSS/Javascript]WWTJS
2007/09/25 Javascript
JS实现文件动态顺序载入的方法
2015/03/07 Javascript
在JavaScript中对HTML进行反转义详解
2016/05/18 Javascript
基于Marquee.js插件实现的跑马灯效果示例
2017/01/25 Javascript
js实现文本上下来回滚动
2017/02/03 Javascript
JS验证不重复验证码
2017/02/10 Javascript
用ES6写全屏滚动插件的示例代码
2018/05/02 Javascript
vue 路由子组件created和mounted不起作用的解决方法
2019/11/05 Javascript
js实现课堂随机点名系统
2019/11/21 Javascript
微信小程序报错: thirdScriptError的错误问题
2020/06/19 Javascript
Nuxt配置Element-UI按需引入的操作方法
2020/07/06 Javascript
Vue Render函数创建DOM节点代码实例
2020/07/08 Javascript
Python字符串中查找子串小技巧
2015/04/10 Python
Python迭代器定义与简单用法分析
2018/04/30 Python
应用OpenCV和Python进行SIFT算法的实现详解
2019/08/21 Python
selenium+Chrome滑动验证码破解二(某某网站)
2019/12/17 Python
Python flask路由间传递变量实例详解
2020/06/03 Python
python能在浏览器能运行吗
2020/06/17 Python
Selenium环境变量配置(火狐浏览器)及验证实现
2020/12/07 Python
HTML5实现应用程序缓存(Application Cache)
2020/06/16 HTML / CSS
巴西最大的家具及装饰用品店:Mobly
2017/10/11 全球购物
世界上最好的足球商店:Unisport
2019/03/02 全球购物
网络工程师个人的自我评价范文
2013/10/01 职场文书
外语系大学生自荐信范文
2014/03/01 职场文书
《陈涉世家》教学反思
2014/04/12 职场文书
公司表扬信格式
2015/05/04 职场文书
电影复兴之路观后感
2015/06/02 职场文书
Python深度学习之Pytorch初步使用
2021/05/20 Python
用python批量解压带密码的压缩包
2021/05/31 Python