vue+elementui+quill富文本框实现（富文本框最大化和最小化）

最新推荐文章于 2025-09-30 08:49:24 发布

原创

最新推荐文章于 2025-09-30 08:49:24 发布 · 1.9k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #elementui #javascript

本文介绍了如何使用 Vue 和 quill-editor 插件创建一个富文本编辑器，并配合自定义 v-screen 指令实现屏幕大小调整功能，通过SVG图标控制最大化和还原。

效果图：（点击最大化放大，富文本框撑满整个屏幕；点击还原回到原来的位置）
在这里插入图片描述

1 、html

 <quill-editor
          ref="myQuillEditor"
          v-model="articleForm.artContent"
          v-screen
          class="quilleditor"
          :options="editorOption"
          style="height: 265px"
        />

2、js
安装依赖

npm install vue-quill-editor --save

<script>
  import { quillEditor } from 'vue-quill-editor'
  import * as Quill from 'quill'
  import 'quill/dist/quill.core.css'
  import 'quill/dist/quill.snow.css'
  import 'quill/dist/quill.bubble.css'
  import screen from '@/directive/screen' //自定义v-screen 指令
  export default {
    components: {
      quillEditor,
    },
    directives: { screen },
    data() {
      return