富文本编辑器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实现画板的代码
Sep 05 Javascript
修改jquery里的dialog对话框插件为框架页(iframe) 的方法
Sep 14 Javascript
JS获取文本框,下拉框,单选框的值的简单实例
Feb 26 Javascript
javascript圆盘抽奖程序实现原理和完整代码例子
Jun 03 Javascript
AngularJS基础 ng-keyup 指令简单示例
Aug 02 Javascript
Bootstrap Modal对话框如何在关闭时触发事件
Dec 02 Javascript
jQuery插件FusionCharts实现的MSBar2D图效果示例【附demo源码】
Mar 24 jQuery
基于滚动条位置判断的简单实例
Dec 14 Javascript
axios全局请求参数设置,请求及返回拦截器的方法
Mar 05 Javascript
clipboard.js在移动端复制失败的解决方法
Jun 13 Javascript
JavaScript页面倒计时功能完整示例
May 15 Javascript
JS实现移动端在线签协议功能
Aug 22 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实现域名whois查询的代码(数据源万网、新网)
2010/02/22 PHP
array_multisort实现PHP多维数组排序示例讲解
2011/01/04 PHP
PHP表单验证的3个函数ISSET()、empty()、is_numeric()的使用方法
2011/08/22 PHP
php实现事件监听与触发的方法
2014/11/21 PHP
PHP基于MySQL数据库实现对象持久层的方法
2015/06/17 PHP
php等比例缩放图片及剪切图片代码分享
2016/02/13 PHP
Yii+MYSQL锁表防止并发情况下重复数据的方法
2016/07/14 PHP
PHP中通过getopt解析GNU C风格命令行选项
2019/11/18 PHP
js 匿名调用实现代码
2009/06/19 Javascript
原生js ActiveXObject获取execl里面的值
2013/11/01 Javascript
js解决弹窗问题实现班级跳转DIV示例
2014/01/06 Javascript
JQuery 给元素绑定click事件多次执行的解决方法
2014/09/09 Javascript
Javascript 拖拽的一些高级的应用(逐行分析代码,让你轻松了拖拽的原理)
2015/01/23 Javascript
js实现图片无缝滚动特效
2020/03/19 Javascript
微信小程序-图片、录音、音频播放、音乐播放、视频、文件代码实例
2016/11/22 Javascript
nodejs实现发出蜂鸣声音(系统报警声)的方法
2017/01/18 NodeJs
Angular.js中控制器之间的传值详解
2017/04/24 Javascript
JavaScript实现QQ列表展开收缩扩展功能
2017/10/30 Javascript
vue实现element-ui对话框可拖拽功能
2018/08/17 Javascript
vue-router之nuxt动态路由设置的两种方法小结
2018/09/26 Javascript
react中使用css的7中方式(最全总结)
2019/02/11 Javascript
简单了解JavaScript中常见的反模式
2019/06/21 Javascript
微信小程序自定义tabBar在uni-app的适配详解
2019/09/30 Javascript
深入理解Python中变量赋值的问题
2017/01/12 Python
Django如何自定义分页
2018/09/25 Python
pandas对dataFrame中某一个列的数据进行处理的方法
2019/07/08 Python
如何实现一个python函数装饰器(Decorator)
2020/10/12 Python
css3中flex布局宽度不生效的解决
2020/12/09 HTML / CSS
工程造价自荐信
2013/10/09 职场文书
竟聘演讲稿范文
2013/12/31 职场文书
优秀的自荐信要注意哪些
2014/01/03 职场文书
校园十佳歌手策划书
2014/01/22 职场文书
教师档案管理制度
2014/01/23 职场文书
销售岗位职责范本
2014/06/12 职场文书
2014学习优秀共产党员先进事迹思想汇报
2014/09/14 职场文书
2016年度创先争优活动总结
2016/04/05 职场文书