代码贴上

<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. MySQL-数据库创建与删除

    创建数据库 在MySQL中,数据库是用于存储和操作诸如表,数据库视图,触发器,存储过程等数据的对象的集合. 要在MySQL中创建数据库,使用CREATE DATABASE语句,如下: CREATE D ...

  2. Delphi中SendMessage使用说明(所有消息说明) good

    Delphi中SendMessage使用说明 SendMessage基础知识 函数功能:该函数将指定的消息发送到一个或多个窗口.此函数为指定的窗口调用窗口程序,直到窗口程序处理完消息再返回.而函数Po ...

  3. YTU 2507: 李白打酒

    2507: 李白打酒 时间限制: 1 Sec  内存限制: 128 MB 提交: 414  解决: 186 题目描述 话说大诗人李白,一生好饮.幸好他从不开车.  一天,他提着酒壶,从家里出来,酒壶中 ...

  4. POJ 2590:Steps

    Steps Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 7872   Accepted: 3612 Description ...

  5. E20171228-hm

    traverse  n. 穿过; 横贯,横切; 横木; [建] 横梁;               vt. 通过; 横越,横贯; [法] 否认,反驳; [木工] 横刨;

  6. bzoj 1596: [Usaco2008 Jan]电话网络【贪心】

    dfs,如果一个点的儿子.本身.父亲都没有塔,就在父亲上建一个 原理不明-- #include<iostream> #include<cstdio> using namespa ...

  7. 为什么Markdown能夺得程序员的青睐

    Markdown基本情况概述 Markdown是在HTML的基础上产生的.HTML的功能已经足够强大,可以编写出漂亮的网页.HTML在没有CSS的加持上,尽管不能显示出绚丽多彩的网页,但是仍然可以达到 ...

  8. Springboot 相关注解大全

    1.Spring注解 1.@Autowired 标注在方法,Spring容器创建当前对象,就会调用方法,完成赋值:方法使用的参数,自定义类型的值从ioc容器中获取自动装配; Spring利用依赖注入( ...

  9. [BZOJ5109/CodePlus2017]大吉大利,晚上吃鸡!

    Description 最近<绝地求生:大逃杀>风靡全球,皮皮和毛毛也迷上了这款游戏,他们经常组队玩这款游戏.在游戏中,皮皮和毛毛最喜欢做的事情就是堵桥,每每有一个好时机都能收到不少的快递 ...

  10. 离散化+BFS HDOJ 4444 Walk

    题目传送门 /* 题意:问一个点到另一个点的最少转向次数. 坐标离散化+BFS:因为数据很大,先对坐标离散化后,三维(有方向的)BFS 关键理解坐标离散化,BFS部分可参考HDOJ_1728 */ # ...