Skip to content
This repository has been archived by the owner on May 9, 2022. It is now read-only.

Translation pt-br #123

Open
wants to merge 5 commits into
base: 1.x
Choose a base branch
from
Open

Translation pt-br #123

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
c4efe43
support headers and parameters
Apr 14, 2017
05b3ae2
Improvement: Status cod 201 should be allowed
fish-ball Apr 19, 2017
bfeff3b
Merge pull request #57 from fish-ball/patch-1
Apr 20, 2017
853df44
修复双向绑定content
Jul 31, 2017
dc130c9
Merge pull request #93 from bao2314483/master
Oct 26, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
32 changes: 17 additions & 15 deletions README.md
View file
Open in desktop
Expand Up @@ -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"}
Expand Down
112 changes: 90 additions & 22 deletions dist/vue-html5-editor.js
View file
Open in desktop
@@ -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) {
Expand Down Expand Up @@ -307,7 +307,7 @@ var t=new Array(arguments.length-1);if(arguments.length>1){ for(var n=1;n<argume
e.exports=window.lrz;}])});
});

var template$3 = "<div> <div v-show=\"upload.status=='ready'\"> <input type=\"text\" v-model=\"imageUrl\" maxlength=\"255\" :placeholder=\"$parent.locale['please enter a url']\"> <button type=\"button\" @click=\"insertImageUrl\">{{$parent.locale.save}}</button> <input type=\"file\" ref=\"file\" style=\"display: none !important\" @change=\"startUpload\" accept=\"image/png,image/jpeg,image/gif,image/jpg\"> <button type=\"button\" @click=\"pick\">{{$parent.locale.upload}}</button> </div> <div v-if=\"upload.status=='progress'\"> {{$parent.locale.progress}}:{{upload.progressComputable ? $parent.locale.unknown : upload.complete}} </div> <div v-if=\"upload.status=='success'\"> {{$parent.locale[\"please wait\"]}}... </div> <div v-if=\"upload.status=='error'\"> {{$parent.locale.error}}:{{upload.errorMsg}} <button type=\"button\" @click=\"reset\">{{$parent.locale.reset}}</button> </div> <div v-if=\"upload.status=='abort'\"> {{$parent.locale.upload}}&nbsp;{{$parent.locale.abort}}, <button type=\"button\" @click=\"reset\">{{$parent.locale.reset}}</button> </div> </div> ";
var template$3 = "<div> <div v-show=\"upload.status=='ready'\"> <input type=\"text\" v-model=\"imageUrl\" maxlength=\"255\" :placeholder=\"$parent.locale['please enter a url']\"> <button type=\"button\" @click=\"insertImageUrl\">{{$parent.locale.save}}</button> <input type=\"file\" ref=\"file\" style=\"display: none !important\" @change=\"process\" accept=\"image/png,image/jpeg,image/gif,image/jpg\"> <button type=\"button\" @click=\"pick\">{{$parent.locale.upload}}</button> </div> <div v-if=\"upload.status=='progress'\"> {{$parent.locale.progress}}:{{upload.progressComputable ? $parent.locale.unknown : upload.complete}} </div> <div v-if=\"upload.status=='success'\"> {{$parent.locale[\"please wait\"]}}... </div> <div v-if=\"upload.status=='error'\"> {{$parent.locale.error}}:{{upload.errorMsg}} <button type=\"button\" @click=\"reset\">{{$parent.locale.reset}}</button> </div> <div v-if=\"upload.status=='abort'\"> {{$parent.locale.upload}}&nbsp;{{$parent.locale.abort}}, <button type=\"button\" @click=\"reset\">{{$parent.locale.reset}}</button> </div> </div> ";

/**
* Created by peak on 2017/2/10.
Expand Down Expand Up @@ -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) {
Expand All @@ -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);
Expand All @@ -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);
Expand All @@ -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();

Expand Down Expand Up @@ -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);
}
}
Expand All @@ -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
Expand All @@ -476,7 +543,7 @@ var dashboard$4 = {
template: template$4,
data: function data(){
return {
version: "1.0.4"
version: "1.1.0"
}
}
};
Expand Down Expand Up @@ -1096,6 +1163,7 @@ RangeHandler.prototype.execCommand = function execCommand (command, arg) {
break
}
default: {
document.execCommand(command, false, arg);
break
}
}
Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
@@ -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",
Expand Down
1 change: 1 addition & 0 deletions src/editor.js
View file
Open in desktop
Expand Up @@ -44,6 +44,7 @@ export default {
if (val !== content) {
this.$refs.content.innerHTML = val
}
this.$emit('update:content', val)
},
fullScreen(val){
const component = this
Expand Down
2 changes: 1 addition & 1 deletion src/modules/image/dashboard.html
View file
Open in desktop
Expand Up @@ -5,7 +5,7 @@
<input type="text" v-model="imageUrl" maxlength="255" :placeholder="$parent.locale['please enter a url']">
<button type="button" @click="insertImageUrl">{{$parent.locale.save}}</button>

<input type="file" ref="file" style="display: none !important;" @change="startUpload"
<input type="file" ref="file" style="display: none !important;" @change="process"
accept="image/png,image/jpeg,image/gif,image/jpg">
<button type="button" @click="pick">{{$parent.locale.upload}}</button>
</div>
Expand Down
84 changes: 70 additions & 14 deletions src/modules/image/dashboard.js
View file
Open in desktop
Expand Up @@ -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) {
Expand All @@ -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)
Expand All @@ -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)
Expand All @@ -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()

Expand All @@ -100,7 +151,7 @@ export default {
}

xhr.onload = () => {
if (xhr.status !== 200) {
if (xhr.status >= 300) {
this.setUploadError(`request error,code ${xhr.status}`)
return
}
Expand All @@ -126,8 +177,13 @@ 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)
}
}
}
}