vue-quill-editor富文本自定义上传图片到服务器

vue-quill-editor选择图片之后是以base64的形式在编辑器内进行展示的,
在实际项目中如果图片资源过多或者资源过大,那么传递到服务端的html内容
资源存储会过大。因此,可以将图片先传到服务器,编辑器内只是存储资源的
路径。
接下来将两者进行返回的html进行对比:
在这里插入图片描述
在这里插入图片描述
接下来对编辑器内图片资源上传到服务器进行分析:

1、安装依赖
npm install vue-quill-editor --save
2、创建quilleditor模板

<template>
  <div class="editorBox">
    <quilleditor
      v-model="content"
      ref="myTextEditor"
      :options="editorOption"
      @blur="onEditorBlur($event)"
    >
      <div id="toolbar" slot="toolbar">
        <!-- Add subscript and superscript buttons -->
        <span class="ql-formats"><button type="button" class="ql-bold"></button></span>
        <span class="ql-formats"><button type="button" class="ql-italic"></button></span>
        <span class="ql-formats"><button type="button" class="ql-underline"></button></span>
        <span class="ql-formats"><button type="button" class="ql-strike"></button></span>
        <span class="ql-formats"><button type="button" class="ql-blockquote"></button></span>
        <span class="ql-formats"><button type="button" class="ql-code-block"></button></span>
        <span class="ql-formats">
          <button type="button" class="ql-header" value="1"></button>
          <button type="button" class="ql-header" value="2"></button>
        </span>
        <span class="ql-formats"><button type="button" class="ql-list" value="ordered"></button></span>
        <span class="ql-formats"><button type="button" class="ql-list" value="bullet"></button></span>
        <span class="ql-formats"><button class="ql-script" value="sub"></button></span>
        <span class="ql-formats"><button class="ql-indent" value="-1"></button></span>
        <span class="ql-formats"><button class="ql-indent" value="+1"></button></span>
        <span class="ql-formats"><button class="ql-direction" value="rtl"></button></span>
        <select class="ql-size">
          <option value="small"></option>
          <!-- Note a missing, thus falsy value, is used to reset to default -->
          <option selected></option>
          <option value="large"></option>
          <option value="huge"></option>
        </select>
        <select class="ql-align"></select>
        <span class="ql-formats"><button type="button" class="ql-link"></button></span>
        <span class="ql-formats">
          <button type="button" @click="imgClick" style="outline:none">
            <svg viewBox="0 0 18 18"> <rect class="ql-stroke" height="10" width="12" x="3" y="4"></rect> <circle
              class="ql-fill"
              cx="6"
              cy="7"
              r="1"></circle> <polyline
                class="ql-even ql-fill"
                points="5 12 5 11 7 9 8 10 11 7 13 9 13 12 5 12"></polyline> </svg>
          </button>
        </span>
        <span class="ql-formats"><button type="button" class="ql-video"></button></span>
      </div>
    </quilleditor>
  </div>
</template>
<script>
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

import { quillEditor } from 'vue-quill-editor'
const toolbarOptions = [
  ['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线 -----['bold', 'italic', 'underline', 'strike']
  ['blockquote', 'code-block'], // 引用  代码块-----['blockquote', 'code-block']
  [{ header: 1 }, { header: 2 }], // 1、2 级标题-----[{ header: 1 }, { header: 2 }]
  [{ list: 'ordered' }, { list: 'bullet' }], // 有序、无序列表-----[{ list: 'ordered' }, { list: 'bullet' }]
  [{ script: 'sub' }, { script: 'super' }], // 上标/下标-----[{ script: 'sub' }, { script: 'super' }]
  [{ indent: '-1' }, { indent: '+1' }], // 缩进-----[{ indent: '-1' }, { indent: '+1' }]
  [{'direction': 'rtl'}], // 文本方向-----[{'direction': 'rtl'}]
  [{ size: ['small', false, 'large', 'huge'] }], // 字体大小-----[{ size: ['small', false, 'large', 'huge'] }]
  [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题-----[{ header: [1, 2, 3, 4, 5, 6, false] }]
  [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色-----[{ color: [] }, { background: [] }]
  [{ font: [] }], // 字体种类-----[{ font: [] }]
  [{ align: [] }], // 对齐方式-----[{ align: [] }]
  ['clean'], // 清除文本格式-----['clean']
  ['image'] // 链接、图片、视频-----['link', 'image', 'video']
]

export default {
  name: 'VEditor',
  props: {
    value: {
      type: String
    },
    /* 上传图片的地址 */
    uploadUrl: {
      type: String,
      default: '/'
    },
    /* 上传图片的file控件name */
    fileName: {
      type: String,
      default: 'file'
    },
    maxUploadSize: {
      type: Number,
      default: 1024 * 1024 * 1024 * 500
    }
  },
  data () {
    return {
      content: '',
      editorOption: {
        modules: {
          toolbar: '#toolbar'
          // toolbar: toolbarOptions
        }
      },
      client: null
    }
  },
  methods: {
    onEditorBlur (quill) {
      this.$emit('blur', this.content)
    },
    /* 选择上传图片切换 */
    onFileChange (e) {
      this.$emit('fileChange', e, this)
    },
    /* 点击上传图片按钮 */
    imgClick () {
      /* if (!this.uploadUrl) {
        console.log('no editor uploadUrl')
        return
      } */
      /* 内存创建input file */
      var input = document.createElement('input')
      input.type = 'file'
      input.name = this.fileName
      input.accept = 'image/jpeg, image/png, image/jpg, image/gif'
      input.onchange = this.onFileChange

      console.log('图片按钮点击', input)

      input.click()
    }
  },
  computed: {
    editor () {
      return this.$refs.myTextEditor.quill
    }
  },
  components: {
    quilleditor: quillEditor
  },
  mounted () {
    this.content = this.value
  },
  watch: {
    value (newVal, oldVal) {
      if (this.editor) {
        if (newVal !== this.content) {
          this.content = newVal
        }
      }
    }
  }
}
</script>
<style>
.ql-align .ql-picker-label svg{
  width: 20px;
  height: 20px;
}
.editorBox .ql-toolbar{
	display: flex;
	flex-wrap: wrap;
}
.editorBox .ql-editor{
	min-height: 266px;
}
.editorBox .ql-formats{
	height: 30px;
	text-align: left;
}
.editorBox .ql-toolbar.ql-snow .ql-picker-label{
  display: flex;
  align-items: center;
}
</style>

3、页面中使用

<template>
	<QuillEditor @blur="getHtml" :value="content" @fileChange="hasImgAndUpload" />
</template>
<script>
	import QuillEditor from '@/coms/QuillEditor'
	export default {
		name: 'HelloWorld',
		data() {
			return {
				content: ''
			}
		},
		components: { QuillEditor },
		methods: {
			hasImgAndUpload: function(e, editor) {
				let fileInput = e.target
				if (fileInput.files.length === 0) {
					return
				}
				editor.editor.focus()
				if (fileInput.files[0].size > editor.maxUploadSize) {
					editor.$alert('图片不能大于500MB', '图片尺寸过大', {
						confirmButtonText: '确定',
						type: 'warning'
					})
				}
				let data = new FormData()
				data.append(editor.fileName, fileInput.files[0])
				// 文件路径,文件上传成功后返回的url
				let testUrl = 'https://zhouguanyun01.oss-cn-beijing.aliyuncs.com/cms/article/20200218/test.1582018806467.png'
				editor.editor.insertEmbed(editor.editor.getSelection().index, 'image', testUrl)
			}
		}
	}
</script>
  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
Vue Quill Editor是一个Vue富文本编辑器插件,它可以用于在Vue项目中进行富文本编辑。您可以通过安装Vue-Quill-EditorQuill来使用它。 关于图片预览的问题,根据提供的引用内容,我没有找到直接关于富文本图片预览的说明。但是,根据Vue Quill Editor的使用方法,您可以使用自定义的toolbar来实现相关功能。您可以在toolbar中添加一个按钮,当用户点击该按钮时,触发一个方法来预览富文本中的图片。您可以使用Vue的v-if指令根据条件来显示或隐藏图片预览的组件。具体实现的代码如下所示: ``` <template> <div class="editor"> ... <!-- 自定义toolbar中增加图片预览按钮 --> <div id="my-toolbar"> ... <button @click="previewImages">预览图片</button> </div> ... </div> </template> <script setup> import { QuillEditor, Quill } from '@vueup/vue-quill' import { getCurrentInstance, ref } from "vue"; const { proxy } = getCurrentInstance(); const previewImages = () => { // 实现预览图片的逻辑 // 可以使用Quill的API获取富文本中的图片,然后展示在预览组件中 } </script> ``` 在上述代码中,您可以在`previewImages`方法中实现预览图片的逻辑。您可以使用Quill的API获取富文本中的图片,并将其显示在预览组件中。 需要注意的是,具体的图片预览逻辑和组件实现取决于您的具体需求和项目实现。您可以根据自己的情况进行适当的调整和扩展。 <span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [Vue-Quill-Editor富文本编辑器的使用教程](https://download.csdn.net/download/weixin_38701952/13980065)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* *3* [使用vue-quill展示富文本内容](https://blog.csdn.net/qq_36576430/article/details/127793120)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值