前端富文本、可上传图片粘贴图片

最新推荐文章于 2024-08-14 18:21:51 发布

我吴六六

最新推荐文章于 2024-08-14 18:21:51 发布

阅读量1.3k

点赞数 1

分类专栏：富文本文章标签： javascript vscode vue.js

本文链接：https://blog.csdn.net/qq_41008008/article/details/123879093

版权

本文介绍了如何在前端实现富文本编辑器，支持图片上传和粘贴功能。通过HTML和JavaScript的结合，创建了一个让用户能够方便地在编辑器中插入和粘贴图片的交互体验。

摘要由CSDN通过智能技术生成

安装

npm install quill@1.3.6
npm install vue-quill-editor

html部分

<quill-editor ref="myTextEditor" v-model="content" :options="editorOption" style="height:300px;" />

js部分

括号对不齐了，自己看着加叭–

import {
    quillEditor, Quill } from 'vue-quill-editor'
import {
    ImageExtend, QuillWatch } from 'quill-image-extend-module'
Quill.register('modules/ImageExtend', ImageExtend)
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
const toolbarOptions = [['bold', 'italic', 'underline', 'strike'], // 工具栏
  [{
    'list': 'ordered' }, {
    'list': 'bullet' }],
  [{
    'script': 'sub' }, {
    'script': 'super' }],
  [{