vue2-editor非常不错,可惜并未带全屏功能,自己实现了一个,供大家参考。
实现思路:自定义模块。
/* *
*编辑器的全屏实现
*/从“no-scroll”进口noScroll
出口的默认类全屏{
构造函数(羽毛、期权={}){
这一点。羽毛=羽毛
这一点。选项=选项
这一点。全屏=false
这一点。editorContainer=this.quill.container.parentNode.parentNode
}
handle () {
如果(!this.fullscreen) {
这一点。全屏=true
this.editorContainer。className=' ql-editor ql-blank editor-fullscreen”
noScroll.on ()
其他}{
这一点。全屏=false
this.editorContainer。className=' ql-editor ql-blank”
noScroll.off ()
}
}
}
全屏。js
2。通过编辑器的选项注册模块,我是放在了全局的全球化。vue中,其他页面直接引用这个选项
const EDITOR_OPTIONS={
模块:{
全屏:{},
工具栏:{
容器:[
[{标题:[假,1、2、3、4、5、6]}),
(“大胆”、“斜体”、“强调”、“罢工”),//切换按钮
(
{对齐:"},
{对齐:“中心”},
{对齐:“正确”},
{对齐:“证明”}
]，
“引用”、“代码”,
[{清单:“命令”},{列表:“子弹”},{清单:“检查”}),
[{缩进:“1”},{缩进:“+ 1”}],//减少缩进缩进
[{颜色:[]},{背景:[]}],//下拉与违约的主题
["链接”、“形象”、“视频”),
“干净”,//删除格式按钮
(“全屏”)
]，
处理程序:{
全屏(){
this.quill.getModule(全屏).handle ()
}
}
}
}
}
3。在页面中引用
& lt; vue-editor
useCustomImageHandler
@imageAdded=" handleImageAdded "
v模型=" entity.content "
:editorOptions=" $ global.EDITOR_OPTIONS "
类=氨嗉鳌北?
& lt;/vue-editor>
从“vue2-editor”进口{VueEditor,羽毛}
从“. ./全屏”进口全屏
羽茎。注册(模块/全屏,全屏)
4。最后在全局样式中加入全屏的样式,我这个样式中控制了编辑器的高度,默认是自适应高度的。
.editor .ql-editor {
身高:300 px;
}
.editor-fullscreen {
背景:白色;
保证金:0 !重要;
位置:固定;
上图:0;
左:0;
宽度:100%;
高度:100%;
z - index: 100000;
.ql-editor {
高度:100%;
}
.fullscreen-editor {
border - radius: 0;
边界:没有;
}
.ql-container {
高度:钙(100 vh - 3 rem - 24 px) !重要;
保证金:0汽车;
overflow-y:汽车;
}
}
.ql-fullscreen {
背景:url(/资产/图片/fullscreen.svg)没有重演中心!重要;
}
以上所述是小编给大家介绍的富文本编辑器vue2-editor实现全屏功能,希望对大家有所帮助,如果大家有任何疑问请给我留的言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
