nextboy / quill-image-extend-module Goto Github PK
View Code? Open in Web Editor NEWvue-quill-editor的增强模块,提供图片上传,复制插入,拖拽插入,支持与其他模块一起使用
vue-quill-editor的增强模块,提供图片上传,复制插入,拖拽插入,支持与其他模块一起使用
Hi
我看readme里面有说支持 复制插入 功能,代码 里面却把这个功能给屏蔽了,这是有什么坑吗?
希望增加一个支持地图定位截图的功能
像百度的ue
你之前那个版本里的 accept 在这个版本里无效,这个如何处理?
绑定一个函数 任意操作后 返回一个url 将这个url 插入编辑器
大佬您好,请问一下如何上传file格式的图片?
import { quillEditor, Quill } from 'vue-quill-editor'
import { container, ImageExtend, QuillWatch } from 'quill-image-extend-module'
import ImageResize from 'quill-image-resize-module'
Quill.register('modules/ImageExtend', ImageExtend)
Quill.register('modules/ImageResize', ImageResize)
用七牛上传图片怎么上传token
start and end and loading parameters of config do not work and have no effect and i see your source code , obviously there are logic code, but it does not have effects!
when I drag a image to another place, it has the following error in chrome:
Uncaught TypeError: Failed to execute 'readAsDataURL' on 'FileReader': parameter 1 is not of type 'Blob'. at ImageExtend.toBase64 (index.js?187d:119) at ImageExtend.dropHandle (index.js?187d:104)
and another error:
Uncaught TypeError: Cannot read property 'size' of undefined at ImageExtend.dropHandle
I have no idea to solve it, anybody has the same question?
场景:同一个页面初始化了三个quill富文本,应用了你的上传图片modules
问题:不管点击第几个富文本的上传图片按钮,都上传的是第一个富文本编辑器,三个富文本配置都一样,一开始用的是同一个配置对象,考虑到可能是this指向问题,换成了三个一样的配置对象,分开配置,但是还是上述情况,希望作者有空看一下是否有这种情况
@NextBoy
我不想用太多的东西,怎么去配置啊?
你们引入quill-image-extend-module后不报错吗,为啥我的总是报 document is not defined
本组件安装 npm install quill-image-extend-module --save 不带-dev更合适吧
想请问,服务器接收formdata的格式是什么 我们传过去的file是什么内容
谢谢 大佬
除视图层外的js代码是否兼容React,若不行,亲亲可以把视图和逻辑拆分封装成通用版嘛
If my back-end for upload images returns code 201(created), instead of 200(success) the editor is showing uploading error.
I think, it's better to have more flexible response codes configurations(in callbacks, may be), or at least, to treat 2** codes as success, as it is stated in the docs.
服务器返回链接了,但图片显示不出来,再传一张图,前面那张就显示出来了,后面传的这张也是显示不出,继续上传图片情况和前面一样,和解?
nuxt 中使用后,浏览器控制台有一个警告(quill Overwriting modules/ImageExtend with class ImageExtend)
编辑器的监听事件可能了,自己的写的上传图片的那套事件不执行了
上传后的值img的标签里面不是返回的url。而是像这样,小白求解
content的内容一直是这样,而且手动插入图片标签也无法显示
<p><br></p><p><img src="//:0"></p>
手动在success事件后添加context也不行,都会变成//:0
源代码:
`
<div>
<div class="quilledit">
<quill-editor
:options="editorOption"
@blur="save()"
v-model="content">
`
Response status code from uploading must be 200.
quill-image-extend-module/index.js
Line 153 in 4500955
Browser: IE10 IE11
Clearing the value of file input will cause MS Edge / IE10 IE11 to trigger a new change
event. However, the new change event contain no file, since it has just been cleared and cause the subsequent code to fail to execute.
https://github.com/NextBoy/quill-image-extend-module/blob/ff6a0f2/index.js#L257
fileInput.addEventListener('change', function () {
let self = QuillWatch.active
self.file = fileInput.files[0]
fileInput.value = '' // <-- Clearing the value of file input will cause MS Edge / IE10 to trigger a new `change` event.
用toolbar功能实现自定义上传图片,使用OSS上传后得到图片URL,如何插入到content?Thx
阿里云服务器图片上传成功后,返回的responseText为空,导致控件异常,JSON.parse(xhr.responseText)报错
可以添加文件格式一定为为图片的机能吗?
类似于fileInput.setAttribute('accept', 'image/*');
或者提供一个接口自定义文件格式?
When an error has occurred, self.config.error
should only be called once.
upload.onerror
and xhr.onreadystatechange
to trigger self.config.error
Related code:
你的这个插件里面是怎么配置的,页面一进来就会focus 到文本编辑器的位置,页面也会滚动到当前的位置,怎么取消这个呢?
在 chrome 下一切正常 ,跑到 IE 下 action 上传图片 apk , 后台收不到信息 , 求助
sudo npm install quill-image-extend-module --save-dev
npm ERR! Cannot read property '0' of undefined
npm ERR! A complete log of this run can be found in:
npm ERR! /Users/quqiufeng/.npm/_logs/2018-05-01T09_55_37_041Z-debug.log
本人非专业前端,也没有具体学习过, 勿喷
并且好多用法都不科学,还请大神多多指教
1.定义一个七牛对象以及基础属性
let qiniu = {'action': '//upload.qiniup.com/', 'baseUrl': '//7xk3lh.com1.z0.glb.clouddn.com/', 'token': ''};
2.定义一个获取token方法 以便后续刷新使用
let getToken = function () { axios.get('Qiniu/token').then(res => { qiniu.token = res.data.data.token; }); };
3.调用获取token方法
getToken();
4.改造example/example1.vue里的用法
export default {
components: {quillEditor},
data () {
return {
content: ' ',
editorOption: {
modules: {
ImageExtend: {
loading: true,
name: 'file',
size: 3,
action: qiniu.action,
response: (res) => {
return qiniu.baseUrl + res.key;
},
headers: (xhr) => {
},
start: () => {
},
end: () => {
getToken(); // 每次完成后刷新token
},
error: () => {
},
change: (xhr, formData) => {
// 跟随form 提交必要参数
const file = formData.get('file');
const suffix = file.name.split('.');
const ext = suffix.splice(suffix.length - 1, 1)[0];
// 文件名称
formData.append('key', `image/${suffix.join('.')}_${new Date().getTime()}.${ext}`);
formData.append('token', qiniu.token);
}
},
toolbar: {
container: container,
handlers: {
'image': function () {
QuillWatch.emit(this.quill.id);
}
}
}
}
}
};
}
};
全部代码
<template>
<div class="quill-wrap">
<quill-editor
v-model="content"
ref="myQuillEditor"
:options="editorOption"
>
</quill-editor>
</div>
</template>
<script>
import axios from 'axios';
import {quillEditor, Quill} from 'vue-quill-editor';
import {container, ImageExtend, QuillWatch} from 'quill-image-extend-module';
// require styles
import 'quill/dist/quill.core.css';
import 'quill/dist/quill.snow.css';
import 'quill/dist/quill.bubble.css';
Quill.register('modules/ImageExtend', ImageExtend);
let qiniu = {'action': '//upload.qiniup.com/', 'baseUrl': '//7xk3lh.com1.z0.glb.clouddn.com/', 'token': ''};
let getToken = function () {
axios.get('Qiniu/token').then(res => {
qiniu.token = res.data.data.token;
});
};
getToken();
export default {
components: {quillEditor},
data () {
return {
content: ' ',
editorOption: {
modules: {
ImageExtend: {
loading: true,
name: 'file',
size: 3,
action: qiniu.action,
response: (res) => {
return qiniu.baseUrl + res.key;
},
headers: (xhr) => {
},
start: () => {
},
end: () => {
getToken();
},
error: () => {
},
change: (xhr, formData) => {
const file = formData.get('file');
const suffix = file.name.split('.');
const ext = suffix.splice(suffix.length - 1, 1)[0];
formData.append('key', `image/${suffix.join('.')}_${new Date().getTime()}.${ext}`);
formData.append('token', qiniu.token);
}
},
toolbar: {
container: container,
handlers: {
'image': function () {
QuillWatch.emit(this.quill.id);
}
}
}
}
}
};
}
};
</script>
In English Please
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.