139 lines
4.8 KiB
JavaScript
139 lines
4.8 KiB
JavaScript
import { generateNewId } from 'oak-domain/lib/utils/uuid';
|
|
export default OakComponent({
|
|
isList: true,
|
|
properties: {
|
|
html: '',
|
|
delta: '',
|
|
readOnly: false,
|
|
showImgSize: false,
|
|
showImgResize: false,
|
|
editorStyle: '',
|
|
placeholder: '请输入',
|
|
showTabBar: true,
|
|
entity: '',
|
|
entityId: '',
|
|
tag1: '',
|
|
tag2: '',
|
|
origin: null,
|
|
},
|
|
methods: {
|
|
onEditReady(e) {
|
|
if (process.env.OAK_PLATFORM === 'wechatMp') {
|
|
const { html, delta } = this.props;
|
|
this
|
|
.createSelectorQuery()
|
|
.select('#editor')
|
|
.context((res) => {
|
|
this.editorCtx = res.context;
|
|
this.editorCtx.setContents({
|
|
html,
|
|
delta,
|
|
});
|
|
})
|
|
.exec();
|
|
this.triggerEvent('ready', e);
|
|
}
|
|
},
|
|
onEditFocus(e) {
|
|
if (process.env.OAK_PLATFORM === 'wechatMp') {
|
|
this.triggerEvent('focus', e);
|
|
}
|
|
},
|
|
onEditBlur(e) {
|
|
if (process.env.OAK_PLATFORM === 'wechatMp') {
|
|
this.triggerEvent('blur', e);
|
|
}
|
|
},
|
|
onEditStatuschange(e) {
|
|
if (process.env.OAK_PLATFORM === 'wechatMp') {
|
|
this.triggerEvent('statuschange', e);
|
|
}
|
|
},
|
|
async onPickMp(event) {
|
|
if (process.env.OAK_PLATFORM === 'wechatMp') {
|
|
const { mediaType } = event.currentTarget.dataset;
|
|
try {
|
|
const { errMsg, tempFiles } = await wx.chooseMedia({
|
|
count: 1,
|
|
mediaType: ['image'],
|
|
sourceType: ['album', 'camera'],
|
|
camera: 'back',
|
|
});
|
|
if (errMsg !== 'chooseMedia:ok') {
|
|
this.triggerEvent('error', {
|
|
level: 'warning',
|
|
msg: errMsg,
|
|
});
|
|
}
|
|
else {
|
|
const { fileType, size, tempFilePath } = tempFiles[0];
|
|
const extension = tempFilePath.substring(tempFilePath.lastIndexOf('.') + 1);
|
|
const filename = tempFilePath.substring(0, tempFilePath.lastIndexOf('.'));
|
|
const extraFile = {
|
|
origin: this.props.origin,
|
|
type: 'image',
|
|
tag1: this.props.tag1 || 'editorImg',
|
|
tag2: this.props.tag2,
|
|
objectId: generateNewId(),
|
|
filename,
|
|
size,
|
|
fileType,
|
|
extension,
|
|
entity: this.props.entity,
|
|
entityId: this.props.entityId,
|
|
bucket: '',
|
|
id: generateNewId(),
|
|
uploadState: 'uploading'
|
|
};
|
|
const url = await this.features.extraFile.autoUpload({
|
|
extraFile: extraFile,
|
|
file: tempFilePath
|
|
});
|
|
this.editorCtx.insertImage({
|
|
src: url,
|
|
});
|
|
}
|
|
}
|
|
catch (err) {
|
|
console.error(err);
|
|
if (err.errMsg !== 'chooseMedia:fail cancel') {
|
|
this.triggerEvent('error', {
|
|
level: 'error',
|
|
msg: err.errMsg,
|
|
});
|
|
}
|
|
}
|
|
}
|
|
},
|
|
onInput(e) {
|
|
const html = e.detail.html;
|
|
const text = e.detail.text;
|
|
this.triggerEvent('input', { html, text }, {});
|
|
},
|
|
addUnderline() {
|
|
this.editorCtx.format('underline');
|
|
},
|
|
addItalic() {
|
|
this.editorCtx.format('italic');
|
|
},
|
|
addBold() {
|
|
this.editorCtx.format('bold');
|
|
},
|
|
addHeader(e) {
|
|
const headerType = e.currentTarget.dataset.header;
|
|
this.editorCtx.format('header', headerType);
|
|
},
|
|
addAlign(e) {
|
|
const alignType = e.currentTarget.dataset.align;
|
|
this.editorCtx.format('align', alignType);
|
|
},
|
|
addList(e) {
|
|
const listType = e.currentTarget.dataset.list;
|
|
this.editorCtx.format('list', listType);
|
|
},
|
|
undo() {
|
|
this.editorCtx.undo();
|
|
},
|
|
},
|
|
});
|