nextboy / quill-image-extend-module Goto Github PK

View Code? Open in Web Editor NEW

705.0 705.0 127.0 32 KB

vue-quill-editor的增强模块，提供图片上传，复制插入，拖拽插入，支持与其他模块一起使用

JavaScript 83.27% Vue 16.73%

quill-image-extend-module's People

Contributors

Stargazers

Watchers

Forkers

cyxuan0926 senyong somehow-yw likedate sjhb warmarx realign nangongxixi changming1987117 weige0088 midaaiz x710894881 mahf vanmess linxiaobing1005032863 cymaty luo772435545 crazymad001 igisvity chaixueyuan liuxiaoxue zxlp1023 looknd wrfengg fengzifz liuhengj qianqchengithub amoshydra changguo hahacoo xuxiaoxiao312 wx408396293 bigmax67 xiashisan wangzhuoxuan xycodeterminator longlonger winetertk zhangguangyi macnie zwjdreammail yangyz kakercoco jikuodong qiufcong liuyingqq123 marchfantasy iboying kencjc zhanghongjie oracle1wr amumus w757703598 heroyan yuandadasheng skmucheng zhangzhen250 wilderzorn tykgit sheawang km612 jfcjyo sanguiyou greatboy sijinglei zgsnbtl kwokdont cpics tianfanfan byhellobaby zerosjs lancezhu liuwave walkedsnail phpmicroservice hao19871220 zaojiahua hanyingzhong mor-hyq lvlmh twheastasia lxpanup dingjunwei1314 zhanglinablue lily000000 starryrbs msi1979 ooorange strawhathead zhangsan1315 plumos jun-zz liulinfen xiao-qiangln vonechain-didi re757575 lifedre gusvily wpaiwm shihhsing

quill-image-extend-module's Issues

粘贴图片失效

我看readme里面有说支持 复制插入 功能，代码里面却把这个功能给屏蔽了，这是有什么坑吗？

如果图片上传成功，但是没有值返回，此时报错Unexpected end of JSON input

这应该当服务器无值返回的时候，使用JSON.parse会出错。

建议将JSON.parse操作交给用户主动使用。

引入imageResize后显示imports not defined

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)

start and end and loading do not work and have no effect

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!

error when drag a image to a new place

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

在打包时出现错误

您好，我在使用你的插件时，开发模式可以正常使用。但是无法打包生成，build时候报错如下：

引入quill-image-extend-module后,报 document is not defined

你们引入quill-image-extend-module后不报错吗，为啥我的总是报 document is not defined

为什么安装带-dev参数

本组件安装 npm install quill-image-extend-module --save 不带-dev更合适吧

请问传给服务器的file格式是什么？服务器接收的格式应该怎么写

想请问，服务器接收formdata的格式是什么我们传过去的file是什么内容
谢谢大佬

请问是否兼容React

除视图层外的js代码是否兼容React，若不行，亲亲可以把视图和逻辑拆分封装成通用版嘛

Upload error for response code 201

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）

nuxt 中使用后，浏览器控制台有一个警告（quill Overwriting modules/ImageExtend with class ImageExtend）

不

编辑器的监听事件可能了，自己的写的上传图片的那套事件不执行了

文件上传后已经return了后端返回的图片url，在response里面也可以取到，但终究无法添加到content里

上传后的值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">

Consider mentioning this in the documentation somewhere.

Response status code from uploading must be 200.

quill-image-extend-module/index.js

Line 153 in 4500955

if (xhr.status === 200) {

IE change event is emitted twice when uploading image

Browser: ~~IE10~~ IE11

Problem

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.

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

cookie怎么添加

接入阿里云服务器保存图片异常

阿里云服务器图片上传成功后，返回的responseText为空，导致控件异常，JSON.parse(xhr.responseText)报错

设置文件格式

可以添加文件格式一定为为图片的机能吗？
类似于fileInput.setAttribute('accept', 'image/*');
或者提供一个接口自定义文件格式？

你好当我在response中不返回东西时富文本中会出现image的文本请问如何解决

当出现返回值不为0时，没有return值

config.error() is called twice during network error

Expected behaviour

When an error has occurred, self.config.error should only be called once.

Current behaviour

If the browser is offline, uploading a file will cause a network error.
This cause both upload.onerror and xhr.onreadystatechange to trigger self.config.error

Related code:

Feature: Support for OSS and check file's type when upload-btn is clicked

Add callback for OSS : Make upload-request as callbak after browser got upload-tocken from web server.
Add white list and check file' type when upload-btn clicked.

xhr onload 限制了 HTTP 响应码为 200 不合理，应该为 < 400

现在搞得我的 rest 接口返回 201 报错了，应该 <400 的状态码都视为正常。

返回码400

服务器上传地址确定正确https://wx.read1000.com/api/uploadImage，但是前端一直收到400，代码就是demo，是不是需要把input改成elupload

考虑加入babel编译将es6转换成es5么

我最近在使用nuxt.js 进行开发，用到了vue-quill-editor，并加入了该模块。
但实际使用过程中，刷新都会抛出 Unexpected token export 的语法错误异常
反复检查后发现是由于quill-image-extend-module里的es6的写法造成的

经过babel编译后，修复了此问题
望转义成es2015的写法

怎吗取消页面进入就focus 到文本编辑器的状态啊

你的这个插件里面是怎么配置的，页面一进来就会focus 到文本编辑器的位置，页面也会滚动到当前的位置，怎么取消这个呢？

能不能支持自定义配置xhr，例如支持配置withCredentials = true

sizeError为什么是异步的？

我测试了一下，如果第一次传大于size的图，那么sizeError不执行，并且传图成功，此次以后不管你传大于或小于size限制的图，只要你传图sizeError每次都必执行，并且不执行传图。

IE 下无法上传图片或者 apk 文件

在 chrome 下一切正常 ,跑到 IE 下 action 上传图片 apk , 后台收不到信息 , 求助

报错

npm install failed

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>