vue2-editor is very good, but unfortunately it does not have full screen function. I implemented one myself for your reference.
Implementation idea: Custom module.
1. Define the full screen module Fullscreen
/**
* Full screen implementation of the editor
*/
import noScroll from 'no-scroll'
export default class Fullscreen {
constructor (quill, options = {}) {
= quill
= options
= false
=
}
handle () {
if (! ) {
= true
= 'ql-editor ql-blank editor-fullscreen'
()
}else{
= false
= 'ql-editor ql-blank'
()
}
}
}
2. Register the module through the editor's options. I put it in the global, and other pages directly reference this option.
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() {
('fullscreen').handle()
}
}
}
}
}
3. Quoting in the page
<vue-editor useCustomImageHandler @imageAdded="handleImageAdded" v-model="" :editorOptions="$global.EDITOR_OPTIONS" class="editor"> </vue-editor>
import {VueEditor, Quill} from "vue2-editor"
import Fullscreen from '../Fullscreen'
('modules/fullscreen', Fullscreen)
4. Finally, add a full-screen style to the global style. I control the editor's height in this style, and the default is adaptive height.
.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/') no-repeat center!important;
}
Summarize
The above is the rich text editor vue2-editor introduced to you. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. Thank you very much for your support for my website!