vue中使用vue-quill-editor富文本编辑器,自定义toolbar,图片上传到七牛
2018-08-11 10:13
996 查看
一、npm 安装 vue-quill-editor
二、在main.js中引入
[code]import VueQuillEditor from 'vue-quill-editor' // require styles 引入样式 import 'quill/dist/quill.core.css' import 'quill/dist/quill.snow.css' import 'quill/dist/quill.bubble.css' Vue.use(VueQuillEditor)
三、将富文本编辑器提出作为组件,上传图片到七牛,在获取七牛返回的图片url插入到富文本中。
[code]<template> <div> <quill-editor :options="editorOption" v-model="content" ref="QuillEditor" @blur="onEditorBlur($event)" @focus="onEditorFocus($event)" @change="onEditorChange($event)" @ready="onEditorReady($event)"></quill-editor> <!-- 文件上传input 将它隐藏--> <el-upload class="upload-demo" :action="qnLocation" :before-upload='beforeUpload' :data="uploadData" :on-success='upScuccess' ref="upload" style="display:none"> <el-button size="small" type="primary" id="imgInput" element-loading-text="插入中,请稍候">点击上传</el-button> </el-upload> </div> </template> <script> import * as Quill from 'quill' // 引入编辑器 import { upQiniu } from '@/api/manage/***' //获取七牛token export default { name: 'quilleditor', props: { quillData: { type: String, default: false } }, data() { return { bucketQuery: { bucket: 'website-image' }, uploadData: {}, content:this.quillData, // 富文本编辑器内容 editorOption:{ // 初始化富文本编辑器 modules:{ toolbar:[ ['bold', 'italic', 'underline', 'strike', 'link','image', 'video'], [{ 'header': 1 }, { 'header': 2 }], [{ 'list': 'ordered'}, { 'list': 'bullet' }], [{ 'indent': '-1'}, { 'indent': '+1' }], [{ 'align': [] }], [{ 'color': [] }, { 'background': [] }], [{ 'font': [] }], [{ 'header': [1, 2, 3, 4, 5, 6, false] }], ['blockquote', 'code-block'], [{ 'size': ['small', false, 'large', 'huge'] }] ] } }, qiniuaddr: 'pd6rnk9ck.bkt.clouddn.com' // 这是七牛云空间的外链默认域名 } }, computed: { // 上传七牛的actiond地址,http 和 https 不一样 qnLocation () { return location.protocol === 'http:' ? 'http://upload.qiniu.com' : 'https://up.qbox.me' } }, methods: { // 图片上传之前调取的函数 beforeUpload (file) { return this.qnUpload(file) }, // 图片上传前获得数据token数据 qnUpload (file) { const suffix = file.name.split('.') const ext = suffix.splice(suffix.length - 1, 1)[0] if (this.uploadType === 'image') { // 如果是点击插入图片 // TODO 图片格式/大小限制 return upQiniu(this.bucketQuery).then(res => { this.uploadData = { // key: `image/${suffix.join('.')}_${new Date().getTime()}.${ext}`, //重命名 token: res.data } }) } else if (this.uploadType === 'video') { // 如果是点击插入视频 return upQiniu(bucketQuery).then(res => { this.uploadData = { // key: `video/${suffix.join('.')}_${new Date().getTime()}.${ext}`, //重命名 token: res } }) } }, // 图片上传成功回调 插入到编辑器中 upScuccess (e, file, fileList) { let vm = this let url = '' if (this.uploadType === 'image') { // 获得文件上传后的URL地址 url = 'http://' + this.qiniuaddr + '/' + e.key } else if (this.uploadType === 'video') { url = 'http://' + this.qiniuaddr + '/' + e.key } if (url != null && url.length > 0) { // 将文件上传后的URL地址插入到编辑器文本中 let value = url // API: https://segmentfault.com/q/1010000008951906 // this.$refs.myTextEditor.quillEditor.getSelection(); // 获取光标位置对象,里面有两个属性,一个是index 还有 一个length,这里要用range.index,即当前光标之前的内容长度,然后再利用 insertEmbed(length, 'image', imageUrl),插入图片即可。 vm.addRange = vm.$refs.QuillEditor.quill.getSelection() value = value.indexOf('http') !== -1 ? value : 'http:' + value vm.$refs.QuillEditor.quill.insertEmbed(vm.addRange !== null ? vm.addRange.index : 0, vm.uploadType, value, Quill.sources.USER) // 调用编辑器的 insertEmbed 方法,插入URL } else { this.$message.error(`${vm.uploadType}插入失败`) } this.$refs['upload'].clearFiles() // 插入成功后清除input的内容 }, // 点击图片ICON触发事件 imgHandler (state) { this.addRange = this.$refs.QuillEditor.quill.getSelection() if (state) { let fileInput = document.getElementById('imgInput') fileInput.click() // 加一个触发事件 } this.uploadType = 'image' }, // 点击视频ICON触发事件 videoHandler (state) { this.addRange = this.$refs.QuillEditor.quill.getSelection() if (state) { let fileInput = document.getElementById('imgInput') fileInput.click() // 加一个触发事件 } this.uploadType = 'video' }, created () { this.$refs = { QuillEditor: HTMLInputElement, imgInput: HTMLInputElement } }, onEditorFocus() { }, onEditorReady() { }, onEditorBlur() { }, onEditorChange({editor, html, text}) { this.$emit('change-content',html) // console.log(html) } }, // 页面加载后执行 为编辑器的图片图标和视频图标绑定点击事件 mounted () { // 为图片ICON绑定事件 getModule 为编辑器的内部属性 // console.log(this.$refs.QuillEditor.quill) this.$refs.QuillEditor.quill.getModule('toolbar').addHandler('image', this.imgHandler) this.$refs.QuillEditor.quill.getModule('toolbar').addHandler('video', this.videoHandler) // 为视频ICON绑定事件 this.content = this.quillData let that = this setTimeout(function(){ // console.log(that.quillData) that.content = that.quillData },200) } } </script>
四、引入富文本组件,listEditQuery.rule是我这边编辑功能时需要的字段。
这里需要获取富文本穿给父组件的值(@change-content="listenToChild"),通过此方法获取
[code]<!-- 引入富文本编辑器 --> <quill-editor @change-content="listenToChild" v-if="flag" :quillData="listEditQuery.rule"></quill-editor>
[code]import quillEditor from '@/components/Quilleditor' //这里根据自己组件所放位置配置 import { ImportDetail } from '@/api/manage/***' export default { data(){ return{ listEditQuery:{}, flag:false //在父组件定义一个flag,当数据获得的之后再进行子组件的渲染 } } components: { quillEditor }, methods: { getList(){ this.listLoading = true ImportDetail(this.listQuery).then(response => { this.listLoading = false this.listEditQuery = response.data this.flag = true }).catch(err => { console.log(err, '没有数据1') this.tableData = [] this.listLoading = false }) }, //富文本 赛事章程 listenToChild(val){ this.listEditQuery .rule = val // console.log(this.listEditQuery.rule) } }, mounted () { this.getList() } }
阅读更多
相关文章推荐
- vue中使用vue-quill-editor富文本编辑器,自定义toolbar修改工具栏options
- vue-quill-editor自定义图片上传
- vue-quill-editor自定义图片上传
- vue-quill-editor上传内容由于图片是base64的导致字符太长的问题解决
- 使用百度editor 富文本编辑器上传图片
- 在Vue项目使用quill-editor带样式编辑器(更改插入图片和视频)
- Vue-Quill-Editor富文本编辑器的使用教程
- 解决vue-quill-editor上传内容由于图片是base64的导致字符太长的问题
- vue-quill-editor富文本编辑器简单使用方法
- 关于CKEditor4.5.6的使用,自定义toolbar配置,上传图片案例(SpringMVC+MyBatis案例),自定义行高,去编辑器的中内容,将编辑器中内容设置到指定的位置等
- vue-quill-editor实现图片上传功能
- vuequillEditor上传图片
- 关于CKEditor4.5.6的使用,自定义toolbar配置,上传图片案例(SpringMVC+MyBatis案例),自定义行高,去编辑器的中内容,将编辑器中内容设置到指定的位置等
- 使用七牛上传图片并加水印
- 使用Simditor和七牛上传图片
- rails使用bootstrap3-wysiwyg可视化编辑器并实现自定义图片上传插入功能
- KindEditor - 富文本编辑器 - 使用+上传图片
- 百度富文本编辑器UEditor自定义上传图片接口
- Android Toolbar使用系统原生返回键,并改变其颜色,自定义图片替换系统原生返回键
- 使用七牛上传图片代码,导入文件常遇问题解决方法