富文本编辑器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 编写匿名函数的几种方法
Feb 21 Javascript
js jquery分别实现动态的文件上传操作按钮的添加和删除
Jan 13 Javascript
jQuery Ajax()方法使用指南
Nov 19 Javascript
JS利用cookie记忆当前位置的防刷新导航效果
Oct 15 Javascript
javascript 内置对象及常见API详细介绍
Nov 01 Javascript
DropDownList实现可输入可选择(两种版本可选)
Dec 07 Javascript
jQuery插件HighCharts绘制的2D堆柱状图效果示例【附demo源码下载】
Mar 14 Javascript
Bootstrap布局之栅格系统学习笔记
May 04 Javascript
vue.js实例对象+组件树的详细介绍
Oct 20 Javascript
JavaScript函数的4种调用方法实例分析
Mar 05 Javascript
vue实现随机验证码功能(完整代码)
Dec 10 Javascript
JavaScript设计模式之策略模式实现原理详解
May 29 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 XML数据解析代码
2010/05/26 PHP
fsockopen pfsockopen函数被禁用,SMTP发送邮件不正常的解决方法
2015/09/20 PHP
smarty高级特性之过滤器的使用方法
2015/12/25 PHP
php pdo oracle中文乱码的快速解决方法
2016/05/16 PHP
PHP 7.0新增加的特性介绍
2017/06/08 PHP
PHP实现数组转JSon和JSon转数组的方法示例
2018/06/14 PHP
PhpStorm的使用教程(本地运行PHP+远程开发+快捷键)
2020/03/26 PHP
jquery URL参数判断,确定菜单样式
2010/05/31 Javascript
JavaScript 高级篇之闭包、模拟类,继承(五)
2012/04/07 Javascript
javascript最基本的函数汇总
2015/06/25 Javascript
jQuery的三种bind/One/Live/On事件绑定使用方法
2017/02/23 Javascript
Vuex之理解Getters的用法实例
2017/04/19 Javascript
关于javascript sort()排序你可能忽略的一点理解
2017/07/18 Javascript
vue mixins组件复用的几种方式(小结)
2017/09/06 Javascript
JS动态添加的div点击跳转到另一页面实现代码
2017/09/30 Javascript
vue组件中的数据传递方法
2018/05/14 Javascript
js使用cookie实现记住用户名功能示例
2019/06/13 Javascript
vue之延时刷新实例
2019/11/14 Javascript
vant-ui组件调用Dialog弹窗异步关闭操作
2020/11/04 Javascript
python实现代码行数统计示例分享
2014/02/10 Python
python操作mysql中文显示乱码的解决方法
2014/10/11 Python
浅谈Python 字符串格式化输出(format/printf)
2016/07/21 Python
Python基于lxml模块解析html获取页面内所有叶子节点xpath路径功能示例
2018/05/16 Python
Python 如何优雅的将数字转化为时间格式的方法
2019/09/26 Python
python开发入门——set的使用
2020/09/03 Python
如何开发一个JQuery插件
2016/07/28 面试题
给儿子的表扬信
2014/01/15 职场文书
毕业生如何写自荐信
2014/03/26 职场文书
就业协议书的作用
2014/04/11 职场文书
五好关工委申报材料
2014/05/31 职场文书
股东授权委托书范本
2014/09/13 职场文书
司法局群众路线教育实践活动整改措施思想汇报
2014/10/13 职场文书
个人查摆剖析材料
2014/10/16 职场文书
2015年项目工作总结
2015/04/29 职场文书
MySql存储过程之逻辑判断和条件控制
2021/05/26 MySQL
Centos系统通过Docker安装并搭建MongoDB数据库
2022/04/12 MongoDB