135 lines
4.0 KiB
JavaScript
135 lines
4.0 KiB
JavaScript
export default OakComponent({
|
||
entity: 'article',
|
||
projection: {
|
||
id: 1,
|
||
name: 1,
|
||
content: 1,
|
||
articleMenu: {
|
||
id: 1,
|
||
},
|
||
},
|
||
isList: false,
|
||
formData: function ({ data: article, features }) {
|
||
return {
|
||
id: article?.id,
|
||
content: article?.content,
|
||
name: article?.name,
|
||
articleMenuId: article?.articleMenuId,
|
||
};
|
||
},
|
||
data: {
|
||
editor: null,
|
||
html: '',
|
||
contentTip: false,
|
||
},
|
||
properties: {
|
||
articleMenuId: '',
|
||
changeIsEdit: () => undefined,
|
||
tocPosition: 'none', //目录显示位置，none为不显示目录
|
||
highlightBgColor: 'none', //点击目录时标题高亮背景色，none为不显示高亮背景色
|
||
onArticlePreview: (content, title) => undefined, //预览文章
|
||
origin: 'qiniu', // 默认为七牛云
|
||
scrollId: '', // 滚动条所在容器id，不传默认页面编辑器容器id
|
||
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);
|
||
}
|
||
},
|
||
},
|
||
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.content &&
|
||
this.state.content.length > 0 &&
|
||
this.state.html !== '<p><br></p>') {
|
||
await this.execute();
|
||
if (this.props.changeIsEdit) {
|
||
this.props.changeIsEdit();
|
||
}
|
||
}
|
||
else if (this.state.name && this.state.name.length > 0) {
|
||
this.setMessage({
|
||
content: '请填写文章内容!',
|
||
type: 'warning',
|
||
});
|
||
}
|
||
else if (this.state.content &&
|
||
this.state.content.length > 0 &&
|
||
this.state.html !== '<p><br></p>') {
|
||
this.setMessage({
|
||
content: '请填写文章标题!',
|
||
type: 'warning',
|
||
});
|
||
}
|
||
},
|
||
async reset() {
|
||
// 重置
|
||
this.clean();
|
||
},
|
||
setHtml(html) {
|
||
this.setState({
|
||
html,
|
||
});
|
||
if (html && html !== '<p><br></p>' && this.state.oakFullpath) {
|
||
this.update({ content: html });
|
||
}
|
||
},
|
||
gotoPreview(content, title) {
|
||
const { onArticlePreview } = this.props;
|
||
onArticlePreview && onArticlePreview(content, title);
|
||
},
|
||
},
|
||
});
|