...
|
...
|
@@ -2,79 +2,80 @@ |
|
|
import _ from 'lodash';
|
|
|
import MultiImage from './multi-image';
|
|
|
|
|
|
const component = (resolve) => {
|
|
|
require.ensure([], () => {
|
|
|
const VueHtml5Editor = require('vue-html5-editor');
|
|
|
const editorInstance = new VueHtml5Editor({
|
|
|
hiddenModules: ['info', 'image'],
|
|
|
visibleModules: [
|
|
|
'text',
|
|
|
'color',
|
|
|
'font',
|
|
|
'align',
|
|
|
'list',
|
|
|
'link',
|
|
|
'unlink',
|
|
|
'tabulation',
|
|
|
'multi-image',
|
|
|
'hr',
|
|
|
'eraser',
|
|
|
'undo',
|
|
|
'full-screen',
|
|
|
'info',
|
|
|
],
|
|
|
icons: {
|
|
|
text: 'iconfont icon-pencil',
|
|
|
color: 'iconfont icon-paintbrush',
|
|
|
font: 'iconfont icon-font',
|
|
|
align: 'iconfont icon-alignjustify',
|
|
|
list: 'iconfont icon-list',
|
|
|
link: 'iconfont icon-chain',
|
|
|
unlink: 'iconfont icon-chainbroken',
|
|
|
tabulation: 'iconfont icon-table',
|
|
|
image: 'iconfont icon-images',
|
|
|
'multi-image': 'iconfont icon-images',
|
|
|
hr: 'iconfont icon-minus',
|
|
|
eraser: 'iconfont icon-eraser',
|
|
|
undo: 'iconfont icon-undo',
|
|
|
'full-screen': 'iconfont icon-arrows-alt',
|
|
|
},
|
|
|
image: {
|
|
|
sizeLimit: 512 * 1024,
|
|
|
upload: {
|
|
|
url: '/Api/upload/image',
|
|
|
headers: {},
|
|
|
params: {
|
|
|
bucket: 'goodsimg'
|
|
|
},
|
|
|
fieldName: 'file'
|
|
|
},
|
|
|
compress: null,
|
|
|
uploadHandler(responseText) {
|
|
|
let json = JSON.parse(responseText);
|
|
|
|
|
|
if (json.code === 200) {
|
|
|
return _.get(json, 'data.imagesList[0]', '');
|
|
|
}
|
|
|
return json.data;
|
|
|
}
|
|
|
},
|
|
|
language: 'zh-cn',
|
|
|
modules: [{
|
|
|
name: 'multi-image',
|
|
|
icon: 'fa fa-file-image-o',
|
|
|
i18n: '多图片上传',
|
|
|
show: true,
|
|
|
dashboard: MultiImage
|
|
|
}]
|
|
|
});
|
|
|
|
|
|
resolve(editorInstance);
|
|
|
}, 'components.editor');
|
|
|
};
|
|
|
|
|
|
|
|
|
export default [
|
|
|
'editor',
|
|
|
component
|
|
|
() => ({
|
|
|
component: import(/* webpackChunkName: "components.editor" */'vue-html5-editor').then(VueHtml5Editor => {
|
|
|
const editorInstance = new VueHtml5Editor({
|
|
|
hiddenModules: ['info', 'image'],
|
|
|
visibleModules: [
|
|
|
'text',
|
|
|
'color',
|
|
|
'font',
|
|
|
'align',
|
|
|
'list',
|
|
|
'link',
|
|
|
'unlink',
|
|
|
'tabulation',
|
|
|
'multi-image',
|
|
|
'hr',
|
|
|
'eraser',
|
|
|
'undo',
|
|
|
'full-screen',
|
|
|
'info',
|
|
|
],
|
|
|
icons: {
|
|
|
text: 'iconfont icon-pencil',
|
|
|
color: 'iconfont icon-paintbrush',
|
|
|
font: 'iconfont icon-font',
|
|
|
align: 'iconfont icon-alignjustify',
|
|
|
list: 'iconfont icon-list',
|
|
|
link: 'iconfont icon-chain',
|
|
|
unlink: 'iconfont icon-chainbroken',
|
|
|
tabulation: 'iconfont icon-table',
|
|
|
image: 'iconfont icon-images',
|
|
|
'multi-image': 'iconfont icon-images',
|
|
|
hr: 'iconfont icon-minus',
|
|
|
eraser: 'iconfont icon-eraser',
|
|
|
undo: 'iconfont icon-undo',
|
|
|
'full-screen': 'iconfont icon-arrows-alt',
|
|
|
},
|
|
|
image: {
|
|
|
sizeLimit: 512 * 1024,
|
|
|
upload: {
|
|
|
url: '/Api/upload/image',
|
|
|
headers: {},
|
|
|
params: {
|
|
|
bucket: 'goodsimg'
|
|
|
},
|
|
|
fieldName: 'file'
|
|
|
},
|
|
|
compress: null,
|
|
|
uploadHandler(responseText) {
|
|
|
let json = JSON.parse(responseText);
|
|
|
|
|
|
if (json.code === 200) {
|
|
|
return _.get(json, 'data.imagesList[0]', '');
|
|
|
}
|
|
|
return json.data;
|
|
|
}
|
|
|
},
|
|
|
language: 'zh-cn',
|
|
|
modules: [{
|
|
|
name: 'multi-image',
|
|
|
icon: 'fa fa-file-image-o',
|
|
|
i18n: '多图片上传',
|
|
|
show: true,
|
|
|
dashboard: MultiImage
|
|
|
}]
|
|
|
});
|
|
|
|
|
|
return editorInstance;
|
|
|
}),
|
|
|
loading: {
|
|
|
},
|
|
|
error: {}
|
|
|
})
|
|
|
]; |
...
|
...
|
|