1.代码

<template><div class="public-vue-quill-editor"><quill-editor v-model="value2" ref="myQuillEditor" :options="editorOption"></quill-editor><!-- 自定义上传图片组件 --><public-upload-image:btnId="btnId":show="false"@success="customerImgSuccessHandler":limit="1000"/></div>
</template>
<script>/*** @editorOption quill-editor组件配置信息* @value 默认值*/
import 'quill/dist/quill.snow.css'
import { quillEditor } from 'vue-quill-editor'
// import Delta from 'quill-delta'
export default {name: 'public-vue-quill-editor',data() {return {value2: ''}},props: {btnId: { type: String, default: 'customerUploadImageComponent' },editorOption: {type: Object,default: () => ({modules: {toolbar: [[],['image']]},theme: 'snow',placeholder: '请输入内容'})},value: { type: String, default: '' }},components: { quillEditor },computed: {},created() {},onload() { },onShow() { },watch: {value2: {handler: function (newVal, oldVal) {this.$emit('liveUpdate', newVal)},immediate: true,deep: true},value: {handler: function (newVal, oldVal) {this.value2 = JSON.parse(JSON.stringify(newVal))},immediate: true,deep: true}},mounted() {let that = thisthis.$refs.myQuillEditor.quill.getModule('toolbar').addHandler('image', this.customerImgInsertHandler)this.$refs.myQuillEditor.quill.clipboard.addMatcher(Node.ELEMENT_NODE, function (node, delta) {let ops = []delta.ops.forEach(op => {if (op.insert && typeof op.insert === 'string') { // 如果粘贴了图片，这里会是一个对象，所以可以这样处理ops.push({insert: op.insert})} else {that.$message({message: '不允许粘贴图片,请手动上传',type: 'warning'})}})delta.ops = opsreturn delta})},methods: {customerImgSuccessHandler(val) {if (val) {let imgarr = val.split(',')let quill = this.$refs.myQuillEditor.quilllet length = quill.getSelection().indexquill.insertEmbed(length, 'image', imgarr[imgarr.length - 1])quill.setSelection(length + 1)}},customerImgInsertHandler(state) {this.insertImg = truethis.addRange = this.$refs.myQuillEditor.quill.getSelection()if (state) {document.getElementById(this.btnId).click()}}}
}</script>
<style lang="less" scoped>.public-vue-quill-editor {.quill-editor {height: 450px;}
}</style>

2. 引用

<public-vue-quill-editor :value="form.details" @liveUpdate="(val)=>{form.details=val}" />

3. 页面样式

【vue】vue组件之图文编辑相关推荐

Vue 3 组件开发：搭建基于SpreadJS的表格编辑系统（环境搭建）
Vue是一套用于构建用户界面的渐进式框架,与其它大型 JS 框架不同,Vue 被设计为可以自底向上逐层应用,更易上手,还便于与第三方库或既有项目整合,因此,Vue完全能够为复杂的单页应用提供驱动. 2 ...
【独立版】智慧城市同城V4_2.1.4全开源全插件VUE版，修复房产信息组件后台资料编辑中会显示其他平台小区的问题
源码介绍 [独立版]智慧城市同城V4_2.1.4全开源全插件VUE版,修复房产信息组件后台资料编辑中会显示其他平台小区的问题!智慧城市同城是一套专注于多城市生活服务同城技术解决方案,全面覆盖同堿信息. ...
构建你的第一个Vue.js组件
我记得当时我拿起CakePHP,我很喜欢,开始使用它是多么容易.这些文档不仅结构合理,详尽无遗,而且用户友好.多年以后,这正是我在Vue.js中感受到的.然而,与Cake相比,Vue文档仍然缺少一件事 ...
创建, 发布自己的 Vue UI 组件库
创建, 发布自己的 Vue UI 组件库前言在使用 Vue 进行日常开发时, 我们经常会用到一些开源的 UI 库, 如: Element-UI_, _Vuetify 等. 只需一行命令, 即可方便 ...
16款优秀的Vue UI组件库推荐
16款优秀的Vue UI组件库推荐 Vue 是一个轻巧.高性能.可组件化的MVVM库,API简洁明了,上手快.从Vue推出以来,得到众多Web开发者的认可. 在公司的Web前端项目开发中,多个项目采用 ...
Vue.js组件化开发实践
Vue.js组件化开发实践前言公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了一下的内容.首先会对使用Vue进行开发的一 ...
VUE.JS 组件化开发实践
前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家.点击跳转到教程. 前言公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模 ...
vue import组件的使用
vue import组件的使用 1新建/src/component/firstcomponent.vue <template><div id="firstcomponent ...
vant引入组件报错_强烈推荐优秀的Vue UI组件库
在我们实际开发中常常因为项目周期短不得不引入一些UI框架来辅助开发那常见的比较好的UI框架有那些呢(基于VUE) Element UI组件库 (pc端) Element,一套为开发者.设计师和产品经 ...

【vue】vue组件之图文编辑

图文编辑组件

1.代码

2. 引用

3. 页面样式

【vue】vue组件之图文编辑相关推荐

最新文章

热门文章