From c4efe4316f47bb932cedc3c42204d2bf158722f3 Mon Sep 17 00:00:00 2001 From: peak Date: Fri, 14 Apr 2017 10:14:52 +0800 Subject: [PATCH 1/3] support headers and parameters --- README.md | 32 ++++----- dist/vue-html5-editor.js | 112 +++++++++++++++++++++++++------ package.json | 2 +- src/modules/image/dashboard.html | 2 +- src/modules/image/dashboard.js | 80 ++++++++++++++++++---- src/modules/image/index.js | 23 +++++-- src/range/handler.js | 1 + 7 files changed, 195 insertions(+), 57 deletions(-) diff --git a/README.md b/README.md index 44d56b8..c690695 100644 --- a/README.md +++ b/README.md @@ -100,23 +100,25 @@ Vue.use(VueHtml5Editor, { // 配置图片模块 // config image module image: { - // 后端图片上传的地址，如果为空，默认转图片为base64 - // Url of the server-side,default null and convert image to base64 - server: null, - // 请求时表单参数名 - // the name for file field in multipart request - fieldName: "image", // 文件最大体积，单位字节 max file size sizeLimit: 512 * 1024, - // 是否压缩，默认true，设置为true时会使用localResizeIMG进行压缩 - // default true,if set to true,the image will resize by localResizeIMG (https://github.com/think2011/localResizeIMG) - compress: true, - // 图片压缩选项 - // follows are options of localResizeIMG - width: 1600, - height: 1600, - quality: 80, - // 响应数据处理 + // 上传参数,默认把图片转为base64而不上传 + // upload config,default null and convert image to base64 + upload: { + url: null, + headers: {}, + params: {}, + fieldName: {} + }, + // 压缩参数,默认使用localResizeIMG进行压缩,设置为null禁止压缩 + // compression config,default resize image by localResizeIMG (https://github.com/think2011/localResizeIMG) + // set null to disable compression + compress: { + width: 1600, + height: 1600, + quality: 80 + }, + // 响应数据处理,最终返回图片链接 // handle response data，return image url uploadHandler(responseText){ //default accept json data like {ok:false,msg:"unexpected"} or {ok:true,data:"image url"} diff --git a/dist/vue-html5-editor.js b/dist/vue-html5-editor.js index b34827f..088a729 100644 --- a/dist/vue-html5-editor.js +++ b/dist/vue-html5-editor.js @@ -1,7 +1,7 @@ /** - * Vue-html5-editor 1.0.4 + * Vue-html5-editor 1.1.0 * https://github.com/PeakTai/vue-html5-editor - * build at Mon Apr 10 2017 15:17:13 GMT+0800 (CST) + * build at Thu Apr 13 2017 15:51:01 GMT+0800 (CST) */ (function (global, factory) { @@ -307,7 +307,7 @@ var t=new Array(arguments.length-1);if(arguments.length>1){ for(var n=1;n
{{$parent.locale.progress}}:{{upload.progressComputable ? $parent.locale.unknown : upload.complete}}
{{$parent.locale[\"please wait\"]}}...
{{$parent.locale.error}}:{{upload.errorMsg}}
{{$parent.locale.upload}} {{$parent.locale.abort}},
"; +var template$3 = "
{{$parent.locale.progress}}:{{upload.progressComputable ? $parent.locale.unknown : upload.complete}}
{{$parent.locale[\"please wait\"]}}...
{{$parent.locale.error}}:{{upload.errorMsg}}
{{$parent.locale.upload}} {{$parent.locale.abort}},
"; /** * Created by peak on 2017/2/10. @@ -343,11 +343,52 @@ var dashboard$3 = { this.upload.status = 'error'; this.upload.errorMsg = msg; }, - startUpload: function startUpload() { + process: function process() { var this$1 = this; var component = this; var config = this.$options.module.config; + // compatibility with older format + // { + // server: null, + // fieldName: 'image', + // compress: true, + // width: 1600, + // height: 1600, + // quality: 80 + // } + // ----------- divider ---------------- + // { + // upload: { + // url: null, + // headers: {}, + // params: {}, + // fieldName: {} + // }, + // compress: { + // width: 1600, + // height: 1600, + // quality: 80 + // }, + // } + + if (!config.upload && typeof config.server === 'string') { + config.upload = {url: config.server}; + } + if (config.upload && !config.upload.url) { + config.upload = null; + } + if (config.upload && typeof config.fieldName === 'string') { + config.upload.fieldName = config.fieldName; + } + + if (typeof config.compress === 'boolean') { + config.compress = { + width: config.width, + height: config.height, + quality: config.quality + }; + } var file = this.$refs.file.files[0]; if (file.size > config.sizeLimit) { @@ -356,15 +397,11 @@ var dashboard$3 = { } this.$refs.file.value = null; - // 需要压缩 if (config.compress) { - lrz_all_bundle(file, { - width: config.width, - height: config.height, - quality: config.quality, - fieldName: config.fieldName - }).then(function (rst) { - if (config.server) { + config.compress.fieldName = config.upload && config.upload.fieldName + ? config.upload.fieldName : 'image'; + lrz_all_bundle(file, config.compress).then(function (rst) { + if (config.upload) { component.uploadToServer(rst.file); } else { component.insertBase64(rst.base64); @@ -376,7 +413,7 @@ var dashboard$3 = { } // 不需要压缩 // base64 - if (!config.server) { + if (!config.upload) { var reader = new FileReader(); reader.onload = function (e) { component.insertBase64(e.target.result); @@ -394,8 +431,22 @@ var dashboard$3 = { var this$1 = this; var config = this.$options.module.config; + var formData = new FormData(); - formData.append(config.fieldName, file); + formData.append(config.upload.fieldName || 'image', file); + + if (typeof config.upload.params === 'object') { + Object.keys(config.upload.params).forEach(function (key) { + var value = config.upload.params[key]; + if (Array.isArray(value)) { + value.forEach(function (v) { + formData.append(key, v); + }); + } else { + formData.append(key, value); + } + }); + } var xhr = new XMLHttpRequest(); @@ -437,7 +488,12 @@ var dashboard$3 = { this$1.upload.status = 'abort'; }; - xhr.open('POST', config.server); + xhr.open('POST', config.upload.url); + if (typeof config.upload.headers === 'object') { + Object.keys(config.upload.headers).forEach(function (k) { + xhr.setRequestHeader(k, config.upload.headers[k]); + }); + } xhr.send(formData); } } @@ -452,13 +508,24 @@ var image = { icon: 'fa fa-file-image-o', i18n: 'image', config: { - server: null, - fieldName: 'image', + // server: null, + // fieldName: 'image', + // compress: true, + // width: 1600, + // height: 1600, + // quality: 80, sizeLimit: 512 * 1024,// 512k - compress: true, - width: 1600, - height: 1600, - quality: 80, + // upload: { + // url: null, + // headers: {}, + // params: {}, + // fieldName: {} + // }, + compress: { + width: 1600, + height: 1600, + quality: 80 + }, uploadHandler: function uploadHandler(responseText){ var json = JSON.parse(responseText); return json.ok ? json.data : null @@ -476,7 +543,7 @@ var dashboard$4 = { template: template$4, data: function data(){ return { - version: "1.0.4" + version: "1.1.0" } } }; @@ -1096,6 +1163,7 @@ RangeHandler.prototype.execCommand = function execCommand (command, arg) { break } default: { + document.execCommand(command, false, arg); break } } diff --git a/package.json b/package.json index 07d4f14..b2b5193 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "vue-html5-editor", - "version": "1.0.4", + "version": "1.1.0", "description": "A WYSIWYG text editor base on html5 and vue", "repository": { "type": "git", diff --git a/src/modules/image/dashboard.html b/src/modules/image/dashboard.html index 3ef7ab2..09569ef 100644 --- a/src/modules/image/dashboard.html +++ b/src/modules/image/dashboard.html @@ -5,7 +5,7 @@ - diff --git a/src/modules/image/dashboard.js b/src/modules/image/dashboard.js index 7cf6bed..e5b2a7e 100644 --- a/src/modules/image/dashboard.js +++ b/src/modules/image/dashboard.js @@ -36,9 +36,50 @@ export default { this.upload.status = 'error' this.upload.errorMsg = msg }, - startUpload() { + process() { const component = this const config = this.$options.module.config + // compatibility with older format + // { + // server: null, + // fieldName: 'image', + // compress: true, + // width: 1600, + // height: 1600, + // quality: 80 + // } + // ----------- divider ---------------- + // { + // upload: { + // url: null, + // headers: {}, + // params: {}, + // fieldName: {} + // }, + // compress: { + // width: 1600, + // height: 1600, + // quality: 80 + // }, + // } + + if (!config.upload && typeof config.server === 'string') { + config.upload = {url: config.server} + } + if (config.upload && !config.upload.url) { + config.upload = null + } + if (config.upload && typeof config.fieldName === 'string') { + config.upload.fieldName = config.fieldName + } + + if (typeof config.compress === 'boolean') { + config.compress = { + width: config.width, + height: config.height, + quality: config.quality + } + } const file = this.$refs.file.files[0] if (file.size > config.sizeLimit) { @@ -47,15 +88,11 @@ export default { } this.$refs.file.value = null - // 需要压缩 if (config.compress) { - lrz(file, { - width: config.width, - height: config.height, - quality: config.quality, - fieldName: config.fieldName - }).then((rst) => { - if (config.server) { + config.compress.fieldName = config.upload && config.upload.fieldName + ? config.upload.fieldName : 'image' + lrz(file, config.compress).then((rst) => { + if (config.upload) { component.uploadToServer(rst.file) } else { component.insertBase64(rst.base64) @@ -67,7 +104,7 @@ export default { } // 不需要压缩 // base64 - if (!config.server) { + if (!config.upload) { const reader = new FileReader() reader.onload = (e) => { component.insertBase64(e.target.result) @@ -83,8 +120,22 @@ export default { }, uploadToServer(file) { const config = this.$options.module.config + const formData = new FormData() - formData.append(config.fieldName, file) + formData.append(config.upload.fieldName || 'image', file) + + if (typeof config.upload.params === 'object') { + Object.keys(config.upload.params).forEach((key) => { + const value = config.upload.params[key] + if (Array.isArray(value)) { + value.forEach((v) => { + formData.append(key, v) + }) + } else { + formData.append(key, value) + } + }) + } const xhr = new XMLHttpRequest() @@ -126,7 +177,12 @@ export default { this.upload.status = 'abort' } - xhr.open('POST', config.server) + xhr.open('POST', config.upload.url) + if (typeof config.upload.headers === 'object') { + Object.keys(config.upload.headers).forEach((k) => { + xhr.setRequestHeader(k, config.upload.headers[k]) + }) + } xhr.send(formData) } } diff --git a/src/modules/image/index.js b/src/modules/image/index.js index e58882a..04e237a 100644 --- a/src/modules/image/index.js +++ b/src/modules/image/index.js @@ -9,13 +9,24 @@ export default { icon: 'fa fa-file-image-o', i18n: 'image', config: { - server: null, - fieldName: 'image', + // server: null, + // fieldName: 'image', + // compress: true, + // width: 1600, + // height: 1600, + // quality: 80, sizeLimit: 512 * 1024,// 512k - compress: true, - width: 1600, - height: 1600, - quality: 80, + // upload: { + // url: null, + // headers: {}, + // params: {}, + // fieldName: {} + // }, + compress: { + width: 1600, + height: 1600, + quality: 80 + }, uploadHandler(responseText){ const json = JSON.parse(responseText) return json.ok ? json.data : null diff --git a/src/range/handler.js b/src/range/handler.js index 9c38961..5b56b78 100644 --- a/src/range/handler.js +++ b/src/range/handler.js @@ -307,6 +307,7 @@ export default class RangeHandler { break } default: { + document.execCommand(command, false, arg) break } } From 05b3ae2f43d8a40779ce9f31ae625a7e046db67a Mon Sep 17 00:00:00 2001 From: Alfred Huang <57082212@qq.com> Date: Thu, 20 Apr 2017 00:13:02 +0800 Subject: [PATCH 2/3] Improvement: Status cod 201 should be allowed Some RESTful backend interface returns status code 201 for successful created requests. So 201-299 should be considered as success, not only 200. --- src/modules/image/dashboard.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/modules/image/dashboard.js b/src/modules/image/dashboard.js index e5b2a7e..d0148e4 100644 --- a/src/modules/image/dashboard.js +++ b/src/modules/image/dashboard.js @@ -151,7 +151,7 @@ export default { } xhr.onload = () => { - if (xhr.status !== 200) { + if (xhr.status >= 300) { this.setUploadError(`request error,code ${xhr.status}`) return } @@ -186,4 +186,4 @@ export default { xhr.send(formData) } } -} \ No newline at end of file +} From 853df44399c2629599cabfb998056d5f23268816 Mon Sep 17 00:00:00 2001 From: yjb Date: Mon, 31 Jul 2017 10:15:12 +0800 Subject: [PATCH 3/3] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E5=8F=8C=E5=90=91?= =?UTF-8?q?=E7=BB=91=E5=AE=9Acontent?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/editor.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/editor.js b/src/editor.js index 1c01bf4..113b37c 100644 --- a/src/editor.js +++ b/src/editor.js @@ -44,6 +44,7 @@ export default { if (val !== content) { this.$refs.content.innerHTML = val } + this.$emit('update:content', val) }, fullScreen(val){ const component = this