代码贴上

<template>
<div class="quill-editor-example">
<div class="box">
<el-upload class="upload-demo" name="editorUpload" accept="image/*" action="/api/upload/singleFile" :show-file-list="false" :on-success="success">
</el-upload>
</div>
<quill-editor v-model="content" ref="myQuillEditor" class="editer" :options="editorOption" @ready="onEditorReady($event)">
</quill-editor>
<button @click="submit">提交</button>
</div>
</template>
<script>
import { quillEditor } from 'vue-quill-editor';
import 'quill/dist/quill.core.css';
import 'quill/dist/quill.snow.css';
import 'quill/dist/quill.bubble.css';
// 工具栏配置
const toolbarOptions = [
['bold', 'italic', 'underline', 'strike'],
['blockquote', 'code-block'],
[{ 'header': 1 }, { 'header': 2 }],
[{ 'list': 'ordered' }, { 'list': 'bullet' }],
[{ 'script': 'sub' }, { 'script': 'super' }],
[{ 'indent': '-1' }, { 'indent': '+1' }],
[{ 'direction': 'rtl' }],
[{ 'size': ['small', false, 'large', 'huge'] }],
[{ 'header': [1, 2, 3, 4, 5, 6, false] }],
[{ 'color': [] }, { 'background': [] }],
[{ 'font': [] }],
[{ 'align': [] }],
['link', 'image'],
['clean']
];
export default {
data() {
let _this = this;
return {
name: '02-example',
content: "<p style='color:red;'>example content</p>",
editorOption: {
modules: {
toolbar: {
container: toolbarOptions, // 工具栏
handlers: {
'image': function(value) {
if (value) {
document.querySelector(".box input[name='editorUpload']").click();
} else {
this.quill.format('image', false);
}
}
}
}
}
}
}
},
components: {
quillEditor
},
computed: {
editor() {
return this.$refs.myQuillEditor.quill
}
},
mounted() {
console.log('this is my editor, example 2', this.editor)
},
methods: {
onEditorReady(editor) {
console.log('editor ready!', editor)
},
submit() {
console.log(this.content);
this.$message.success('提交成功!');
},
success(res, file, fileList) {
// res为图片服务器返回的数据
// 获取富文本组件实例
let quill = this.$refs.myQuillEditor.quill
// 如果上传成功
// if (res.code === '200' && res.info !== null) {
// 获取光标所在位置
let length = quill.getSelection().index;
// 插入图片 res.info为服务器返回的图片地址
quill.insertEmbed(length, 'image', res.msg)
// 调整光标到最后
quill.setSelection(length + 1)
// } else {
// this.$message.error('图片插入失败')
// }
console.log(res)
}
},
} </script>

vue-quill-editor + element-ui upload实现富文本图片上传的更多相关文章

  1. summernote富文本图片上传,增加视频上传功能、批量上传方法

    Summernote 是一个简单灵活的所见即所得的 HTML 在线编辑器,基于 jQuery 和 Bootstrap 构建,支持快捷键操作,提供大量可定制的选项. 但是却只有图片上传功能,没有视频上传 ...

  2. layui 富文本 图片上传 后端PHP接口

    <!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/ ...

  3. 基于element ui 实现七牛云自定义key上传文件,并监听更新上传进度

    借助上传Upload 上传组件的 http-request 覆盖默认的上传行为,可以自定义上传的实现 <el-upload multiple ref="sliderUpload&quo ...

  4. 关于editor网页编辑器ueditor.config.js 配置图片上传

    最近公司项目在做一个门户网站,其中新闻和简介等部分使用到了ueditor编辑器,但是上级明确指示需要图片上传这个功能,这时却发现图片上传功能不能正常使用,上传时一直报错,网上收了好几个处理办法,都说的 ...

  5. AntDesign vue学习笔记(七)Form 读写与图片上传

    AntDesign Form使用布局相比传统Jquery有点繁琐 (一)先读写一个简单的input为例 <a-form :form="form" layout="v ...

  6. 【Django组件】KindEditor富文本编辑器上传文件,html样式文本,VUE异步提交数据(易懂版)

    1:下载与配置 适合版本: python3 下载:http://kindeditor.net/down.php 文档:http://kindeditor.net/doc.php 将文件包放入stati ...

  7. 使用element UI el-upload组件实现视频文件上传及上传进度显示方法总结

    实现效果: 上传中: 上传完成: 代码: <el-form-item label="视频上传" prop="Video"> <!-- acti ...

  8. vue富文本编辑器vue-quill-editor使用总结(包含图片上传,拖拽,放大和缩小)

    vue-quill-editor是vue很好的富文本编辑器,富文本的功能基本上都支持,样式是黑白色,简洁大方. 第一步下载 vue-quill-editor: npm i vue-quill-edit ...

  9. vue项目富文本编辑器vue-quill-editor之自定义图片上传

    使用富文本编辑器的第一步肯定是先安装依赖 npm i vue-quill-editor 1.如果按照官网富文本编辑器中的图片上传是将图片转为base64格式的,如果需要上传图片到自己的服务器,需要修改 ...

随机推荐

  1. MySQLi 和 PDO 连接 MySQL

    PHP 连接 MySQL PHP 5 及以上版本建议使用以下方式连接 MySQL : MySQLi extension ("i" 意为 improved) PDO (PHP Dat ...

  2. Go 语言的下一个大版本:Go 2.0 被安排上了(全面兼容1.X,改进错误处理和泛型这两大主题)

    今年 8 月 Go 开发团队公布了 Go 2.0 的设计草案,包括错误处理和泛型这两大主题.现在备受瞩目的 Go 2.0 又有了新动向 —— 昨日 Go 开发团队在其官方博客表示,Go 2 已经被安排 ...

  3. Swing手动进行最大化最小化

    首先jdk的setExtendedState是有bug的,需要先重载JFrame的setExtendedState方法 /** * Fix the bug "jframe undecorat ...

  4. [RK3288][Android6.0] 系统按键驱动流程分析【转】

    本文转载自:http://blog.csdn.net/kris_fei/article/details/77894406 Rockchip的按键驱动位于 kernel/drivers/input/ke ...

  5. bzoj2705 [SDOI2012]Longge的问题——因数

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=2705 一开始自己想了半天... 有了点思路:遍历 n 的因数 k,每个因数要预处理出 gcd ...

  6. JavaScript 解析读取XML文档 实例代码(转)

    JavaScript解析读取XML文件,主要就是加载并解析XML文件,然后就可以测试解析的XML文件的内容,打印输出来. 在线演示:http://demo.jb51.net/js/2012/readx ...

  7. Git-flow 一个简单高效的Git工作流

    背景 由于Git的分支比SVN更好管理且更易使用,最近团队从SVN迁移到Git,需要重新规划开发流程,最终确定使用Git-flow工作流,这是目前比较流行的一种分支模型,下面是Git-flow的简易流 ...

  8. Python print 输出不换行,只有空格

    for x in open("/home/soyo/桌面/中期内容/6.txt"): print x, ,,,]: print x, #print 输出没有换行,只有空格 结果: ...

  9. P3482 [POI2009]SLO-Elephants

    传送门 首先,交换关系肯定是构成一个环的时候最优 如果这个环是自环,不用交换了 如果环的大小为2,直接交换便是 否则的话,我们可以用环里最小的点最为交换媒介,然后去和其他交换直到到达正确的位置,那么环 ...

  10. 台哥原创:java 连连看源码

    2010年,迷上了玩连连看 随手就做了这个,正好手头有这些图片素材 ​ 游戏启动时,界面先铺上了一层透明幕布,然后这些兵器图片交替从上到下,从左到右出现.. ​ 鼠标停在兵器格子上时,所在格子会有红色 ...