vue-quill-editor + element-ui upload实现富文本图片上传
代码贴上
<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实现富文本图片上传的更多相关文章
- summernote富文本图片上传,增加视频上传功能、批量上传方法
Summernote 是一个简单灵活的所见即所得的 HTML 在线编辑器,基于 jQuery 和 Bootstrap 构建,支持快捷键操作,提供大量可定制的选项. 但是却只有图片上传功能,没有视频上传 ...
- layui 富文本 图片上传 后端PHP接口
<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/ ...
- 基于element ui 实现七牛云自定义key上传文件,并监听更新上传进度
借助上传Upload 上传组件的 http-request 覆盖默认的上传行为,可以自定义上传的实现 <el-upload multiple ref="sliderUpload&quo ...
- 关于editor网页编辑器ueditor.config.js 配置图片上传
最近公司项目在做一个门户网站,其中新闻和简介等部分使用到了ueditor编辑器,但是上级明确指示需要图片上传这个功能,这时却发现图片上传功能不能正常使用,上传时一直报错,网上收了好几个处理办法,都说的 ...
- AntDesign vue学习笔记(七)Form 读写与图片上传
AntDesign Form使用布局相比传统Jquery有点繁琐 (一)先读写一个简单的input为例 <a-form :form="form" layout="v ...
- 【Django组件】KindEditor富文本编辑器上传文件,html样式文本,VUE异步提交数据(易懂版)
1:下载与配置 适合版本: python3 下载:http://kindeditor.net/down.php 文档:http://kindeditor.net/doc.php 将文件包放入stati ...
- 使用element UI el-upload组件实现视频文件上传及上传进度显示方法总结
实现效果: 上传中: 上传完成: 代码: <el-form-item label="视频上传" prop="Video"> <!-- acti ...
- vue富文本编辑器vue-quill-editor使用总结(包含图片上传,拖拽,放大和缩小)
vue-quill-editor是vue很好的富文本编辑器,富文本的功能基本上都支持,样式是黑白色,简洁大方. 第一步下载 vue-quill-editor: npm i vue-quill-edit ...
- vue项目富文本编辑器vue-quill-editor之自定义图片上传
使用富文本编辑器的第一步肯定是先安装依赖 npm i vue-quill-editor 1.如果按照官网富文本编辑器中的图片上传是将图片转为base64格式的,如果需要上传图片到自己的服务器,需要修改 ...
随机推荐
- MySQL-数据库创建与删除
创建数据库 在MySQL中,数据库是用于存储和操作诸如表,数据库视图,触发器,存储过程等数据的对象的集合. 要在MySQL中创建数据库,使用CREATE DATABASE语句,如下: CREATE D ...
- Delphi中SendMessage使用说明(所有消息说明) good
Delphi中SendMessage使用说明 SendMessage基础知识 函数功能:该函数将指定的消息发送到一个或多个窗口.此函数为指定的窗口调用窗口程序,直到窗口程序处理完消息再返回.而函数Po ...
- YTU 2507: 李白打酒
2507: 李白打酒 时间限制: 1 Sec 内存限制: 128 MB 提交: 414 解决: 186 题目描述 话说大诗人李白,一生好饮.幸好他从不开车. 一天,他提着酒壶,从家里出来,酒壶中 ...
- POJ 2590:Steps
Steps Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 7872 Accepted: 3612 Description ...
- E20171228-hm
traverse n. 穿过; 横贯,横切; 横木; [建] 横梁; vt. 通过; 横越,横贯; [法] 否认,反驳; [木工] 横刨;
- bzoj 1596: [Usaco2008 Jan]电话网络【贪心】
dfs,如果一个点的儿子.本身.父亲都没有塔,就在父亲上建一个 原理不明-- #include<iostream> #include<cstdio> using namespa ...
- 为什么Markdown能夺得程序员的青睐
Markdown基本情况概述 Markdown是在HTML的基础上产生的.HTML的功能已经足够强大,可以编写出漂亮的网页.HTML在没有CSS的加持上,尽管不能显示出绚丽多彩的网页,但是仍然可以达到 ...
- Springboot 相关注解大全
1.Spring注解 1.@Autowired 标注在方法,Spring容器创建当前对象,就会调用方法,完成赋值:方法使用的参数,自定义类型的值从ioc容器中获取自动装配; Spring利用依赖注入( ...
- [BZOJ5109/CodePlus2017]大吉大利,晚上吃鸡!
Description 最近<绝地求生:大逃杀>风靡全球,皮皮和毛毛也迷上了这款游戏,他们经常组队玩这款游戏.在游戏中,皮皮和毛毛最喜欢做的事情就是堵桥,每每有一个好时机都能收到不少的快递 ...
- 离散化+BFS HDOJ 4444 Walk
题目传送门 /* 题意:问一个点到另一个点的最少转向次数. 坐标离散化+BFS:因为数据很大,先对坐标离散化后,三维(有方向的)BFS 关键理解坐标离散化,BFS部分可参考HDOJ_1728 */ # ...