oak-general-business/es/components/article/editor/index.js

143 lines
4.0 KiB
JavaScript

export default OakComponent({
entity: 'article',
isList: false,
projection: {
id: 1,
name: 1,
content: 1,
articleMenu: {
id: 1,
},
},
formData: function ({ data: article, features }) {
return {
id: article?.id,
content: article?.content,
name: article?.name,
articleMenuId: article?.articleMenuId,
execuable: this.tryExecute() === true,
};
},
data: {
editor: null,
html: '',
contentTip: false,
},
properties: {
articleMenuId: '',
changeIsEdit: () => undefined,
tocPosition: 'none',
highlightBgColor: 'none',
onArticlePreview: (content, title) => undefined,
origin: null,
scrollId: '',
height: 600,
activeColor: undefined,
},
listeners: {
'editor,content'(prev, next) {
if (next.editor && next.content) {
next.editor.setHtml(next.content);
}
},
oakId(prev, next) {
if (prev.oakId !== next.oakId) {
const { editor } = this.state;
if (editor == null)
return;
editor.destroy();
this.setEditor(null);
}
},
name(prev, next) {
if (prev.name !== next.name) {
window.document.title = next.name ?? '';
}
}
},
lifetimes: {
async ready() {
const { oakId, articleMenuId } = this.props;
if (!oakId) {
if (articleMenuId) {
this.update({
articleMenuId,
});
const { editor } = this.state;
editor?.setHtml('');
// this.update({
// content: '',
// });
}
}
},
detached() {
const { editor } = this.state;
if (editor == null)
return;
editor.destroy();
this.setEditor(null);
},
},
methods: {
async uploadFile(extraFile, file) {
const result = await this.features.extraFile.autoUpload(extraFile, file);
return result;
},
setEditor(editor) {
this.setState({
editor,
});
},
clearContentTip() {
this.setState({
contentTip: false,
});
},
async check() {
if (this.state.name &&
this.state.name.length > 0 &&
this.state.html &&
this.state.html.length > 0 &&
this.state.html !== '<p><br></p>') {
const id = this.getId();
await this.execute(undefined, {
type: 'success',
content: this.t('success'),
});
this.setId(id);
if (this.props.changeIsEdit) {
this.props.changeIsEdit();
}
}
else if (this.state.name && this.state.name.length > 0) {
this.setMessage({
content: this.t('check.no content'),
type: 'warning',
});
}
else if (this.state.html &&
this.state.html.length > 0 &&
this.state.html !== '<p><br></p>') {
this.setMessage({
content: this.t('check.no name'),
type: 'warning',
});
}
},
async reset() {
// 重置
this.clean();
},
setHtml(html) {
this.setState({
html,
});
},
gotoPreview(content, title) {
const { onArticlePreview } = this.props;
onArticlePreview && onArticlePreview(content, title);
},
},
});