富文本编辑器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 相关文章推荐
Javascript中的Split使用方法与技巧
Mar 09 Javascript
EasyUI 中 MenuButton 的使用方法
Jul 14 Javascript
jQuery DOM操作实例
Mar 05 Javascript
浅谈JavaScript的Polymer框架中的事件绑定
Jul 29 Javascript
JS实现网站菜单拖拽移位效果的方法
Sep 24 Javascript
bootstrap fileinput完整实例分享
Nov 08 Javascript
VUE实现日历组件功能
Mar 13 Javascript
ES6学习笔记之正则表达式和字符串正则方法分析
Apr 25 Javascript
JS实现json的序列化和反序列化功能示例
Jun 13 Javascript
使用JavaScript实现点击循环切换图片效果
Sep 03 Javascript
Angular使用Md5加密的解决方法
Sep 16 Javascript
关于React Native 无法链接模拟器的问题
Jun 21 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 IE中下载附件问题解决方法
2014/01/07 PHP
php动态绑定变量的用法
2015/06/16 PHP
PHP中把对象数组转换成普通数组的方法
2015/07/10 PHP
JQuery Ajax 跨域访问的解决方案
2010/03/12 Javascript
鼠标移动到图片名上,显示图片的简单实例
2013/07/14 Javascript
JS动态添加与删除select中的Option对象(示例代码)
2013/12/25 Javascript
封装好的一个万能检测表单的方法
2015/01/21 Javascript
javascript作用域链(Scope Chain)用法实例解析
2015/11/30 Javascript
vue.js学习笔记之绑定style样式和class列表
2016/10/31 Javascript
js仿微信公众平台打标签功能
2017/04/08 Javascript
Javascript实现运算符重载详解
2018/04/07 Javascript
jQuery动态移除与增加onclick属性的方法详解
2018/06/07 jQuery
AngularJS 多指令Scope问题的解决
2018/10/25 Javascript
uploadify插件实现多个图片上传并预览
2019/09/30 Javascript
VUE 动态组件的应用案例分析
2019/12/02 Javascript
es6函数name属性功能与用法实例分析
2020/04/18 Javascript
[03:12]TI9战队档案 - Virtus Pro
2019/08/20 DOTA
Python使用迭代器捕获Generator返回值的方法
2017/04/05 Python
Python随机生成手机号、数字的方法详解
2017/07/21 Python
python中使用xlrd读excel使用xlwt写excel的实例代码
2018/01/31 Python
python 文件转成16进制数组的实例
2018/07/09 Python
详解python使用turtle库来画一朵花
2019/03/21 Python
Python爬虫 urllib2的使用方法详解
2019/09/23 Python
python反扒机制的5种解决方法
2021/02/06 Python
Python Selenium异常处理的实例分析
2021/02/28 Python
英国领先的游戏零售商:GAME
2019/09/24 全球购物
荷兰天然和有机产品网上商城:BigGreenSmile.nl
2020/07/26 全球购物
高中美术教学反思
2014/01/19 职场文书
老师对学生的评语
2014/04/18 职场文书
买卖车协议书
2014/04/21 职场文书
学习十八大演讲稿
2014/09/15 职场文书
公司授权委托书范本
2014/09/18 职场文书
关于运动会的广播稿50字
2014/10/17 职场文书
驾驶员安全责任协议书
2016/03/22 职场文书
windows server2016安装oracle 11g的图文教程
2022/07/15 Servers
Win11 22H2 2022怎么更新? 获得Win1122H22022版本升级技巧
2022/09/23 数码科技