富文本编辑器使用 ( 手动上传图片视频动态插入到标签中 )

最新推荐文章于 2025-10-22 10:53:59 发布

原创

最新推荐文章于 2025-10-22 10:53:59 发布 · 1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

本文介绍了如何在Vue项目中安装并配置Quill富文本编辑器，包括添加自定义字体、字号，以及集成图片和视频上传功能。通过引入vue-quill-editor和quill-image-resize-module，实现了编辑器的全局和局部引入，并提供了详细的配置示例，包括自定义上传文件的方法和富文本编辑器的事件监听。此外，还展示了如何在模板中使用编辑器，并提供了相应的CSS样式来调整字体显示。

安装依赖

npm install vue-quill-editor -s
npm install quill-image-resize-module -s

然后全局引入

import VueQuillEditor from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
Vue.use(VueQuillEditor)

在需要的组件中引入使用

import VueQuillEditor, {
   
    Quill } from 'vue-quill-editor'
import ImageResize from 'quill-image-resize-module'
Quill.register('modules/imageResize', ImageResize)

这里需要两个参数content/editorOption

content 是用户在文本框内输入的内容 生成的HTML标签
editorOption是富文本主体功能对象

组件中注册组件 ( 哪里需要哪里用 ) 上结构 ( 根据使用进行修改 )

<template>
  <div>
<!--    @blur="onEditorBlur($event)"-->
<!--    @focus="onEditorFocus($event)"-->
<!--    @ready="onEditorReady($event)"-->
    <quill-editor v-model="content"
                  ref="quill"
                  :options="editorOption"
                 >
    </quill-editor>
    <el-upload
        class="upload-demo"
        action="#"
        :http-request="uploadFile"
        :show-file-list="false"
        style="display:none"
        ref="upload"
    >
      <el-button id="imgInput" type="primary">点击上传</el-button>
    </el-upload>
    <div @click="getHtml" style="text-align: right;margin-top: 10px">
      <el-button size="mini" type="primary">确定</el-button>
    </div>
  </div>
</template>

<script>
import {
   
    Quill,quillEditor } from 'vue-quill-editor'
import ImageResizes from 'quill-image-resize-module'
// import quillConfig from './utils/quill-config'
//设置字体大小
let fontSizeStyle=Quill.import('attributors/style/size') //引入这个后会把样式写在style上
fontSizeStyle.whitelist=['12px','14px','16px','18px']
Quill.register(fontSizeStyle,true)

//设置字体样式
let Font = Quill.import('attributors/style/font') //引入这个后会把样式写在style上
let fonts = [false, 'SimSun', 'SimHei','Microsoft-YaHei','KaiTi','FangSong',