|
@@ -20,6 +20,12 @@
|
|
<h2>{{ currentId ? "编辑文章" : "新建文章" }}</h2>
|
|
<h2>{{ currentId ? "编辑文章" : "新建文章" }}</h2>
|
|
</div>
|
|
</div>
|
|
<div class="hd-r">
|
|
<div class="hd-r">
|
|
|
|
+ <el-button
|
|
|
|
+ class="btn el-button-ff523d green"
|
|
|
|
+ style="width: 80px;"
|
|
|
|
+ @click="handlePreview()"
|
|
|
|
+ >预览</el-button
|
|
|
|
+ >
|
|
<el-button
|
|
<el-button
|
|
class="btn el-button-ff523d"
|
|
class="btn el-button-ff523d"
|
|
style="width: 80px;"
|
|
style="width: 80px;"
|
|
@@ -141,26 +147,26 @@
|
|
<el-form-item label="内容" prop="content" style="width: 100%;">
|
|
<el-form-item label="内容" prop="content" style="width: 100%;">
|
|
<my-u-editor
|
|
<my-u-editor
|
|
ref="myUEditor"
|
|
ref="myUEditor"
|
|
|
|
+ :rich-text="formData.content"
|
|
@readyCallback="editorReadyCallback"
|
|
@readyCallback="editorReadyCallback"
|
|
@postData="editorPostData"
|
|
@postData="editorPostData"
|
|
></my-u-editor>
|
|
></my-u-editor>
|
|
</el-form-item>
|
|
</el-form-item>
|
|
</div>
|
|
</div>
|
|
- <div class="form-item-wrap" v-if="formData.imgsUrl.length > 0">
|
|
|
|
- <el-form-item
|
|
|
|
- class="imgs-url"
|
|
|
|
- label="列表图(直接从内容中获取)"
|
|
|
|
- prop="imgsUrl"
|
|
|
|
- style="width: 100%;"
|
|
|
|
- >
|
|
|
|
- <el-image
|
|
|
|
- v-for="(item, index) in formData.imgsUrl"
|
|
|
|
- :key="index"
|
|
|
|
- style="width: 100px; margin-right: 10px;"
|
|
|
|
- :src="item"
|
|
|
|
- :preview-src-list="formData.imgsUrl"
|
|
|
|
- fit="contain"
|
|
|
|
- ></el-image>
|
|
|
|
|
|
+ <div class="form-item-wrap">
|
|
|
|
+ <el-form-item prop="imgsUrl" style="width: 100%;">
|
|
|
|
+ <upload-imgs-file
|
|
|
|
+ title="列表图片"
|
|
|
|
+ tip="(默认从内容中获取前3张,可删除)"
|
|
|
|
+ filesTip="支持上传类型为图片png、jpg、jpeg的文件,单张图片不超过200K"
|
|
|
|
+ :multiple="true"
|
|
|
|
+ :total="3"
|
|
|
|
+ :imgs-arr="formData.imgsUrl"
|
|
|
|
+ :is-required="false"
|
|
|
|
+ :limit-size="200 * 1024"
|
|
|
|
+ :is-hide-upload="true"
|
|
|
|
+ @imgChange="handleImgChange"
|
|
|
|
+ ></upload-imgs-file>
|
|
</el-form-item>
|
|
</el-form-item>
|
|
</div>
|
|
</div>
|
|
</el-form>
|
|
</el-form>
|
|
@@ -174,15 +180,22 @@
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
+ <preview
|
|
|
|
+ v-if="previewContents"
|
|
|
|
+ :detail-obj="previewContents"
|
|
|
|
+ @close="previewContents = null"
|
|
|
|
+ ></preview>
|
|
</el-drawer>
|
|
</el-drawer>
|
|
</template>
|
|
</template>
|
|
|
|
|
|
<script>
|
|
<script>
|
|
import MyUEditor from "@/components/common/MyUEditor";
|
|
import MyUEditor from "@/components/common/MyUEditor";
|
|
|
|
+import UploadImgsFile from "@/components/common/UploadImgsFile";
|
|
|
|
+import Preview from "@/components/daily4StudyAbroad/Preview";
|
|
import html2canvas from "html2canvas";
|
|
import html2canvas from "html2canvas";
|
|
|
|
|
|
export default {
|
|
export default {
|
|
- components: { MyUEditor },
|
|
|
|
|
|
+ components: { MyUEditor, UploadImgsFile, Preview },
|
|
props: {
|
|
props: {
|
|
// 编辑时传递的ID
|
|
// 编辑时传递的ID
|
|
currentId: {
|
|
currentId: {
|
|
@@ -198,6 +211,7 @@ export default {
|
|
isSaveLock: false, // 点击保存时锁住请求
|
|
isSaveLock: false, // 点击保存时锁住请求
|
|
isShowPreview: false, // 是否预览
|
|
isShowPreview: false, // 是否预览
|
|
isShowCoropper: false, // 图片裁剪显示控制
|
|
isShowCoropper: false, // 图片裁剪显示控制
|
|
|
|
+ previewContents: null, // 预览对象
|
|
AUTHOR_LIST: [],
|
|
AUTHOR_LIST: [],
|
|
authorList: [], // 作者列表
|
|
authorList: [], // 作者列表
|
|
// 所有筛选选项对象
|
|
// 所有筛选选项对象
|
|
@@ -206,7 +220,7 @@ export default {
|
|
statusOptions: [] // 状态选项
|
|
statusOptions: [] // 状态选项
|
|
},
|
|
},
|
|
tagArr: [], // 话题数组
|
|
tagArr: [], // 话题数组
|
|
- imgs: [],
|
|
|
|
|
|
+ imgsTmp: [], // 保存富文本图片数组
|
|
// 表单对象
|
|
// 表单对象
|
|
formData: {
|
|
formData: {
|
|
title: "", // 标题
|
|
title: "", // 标题
|
|
@@ -254,6 +268,34 @@ export default {
|
|
this.loadTags();
|
|
this.loadTags();
|
|
},
|
|
},
|
|
methods: {
|
|
methods: {
|
|
|
|
+ handlePreview() {
|
|
|
|
+ if (
|
|
|
|
+ !this.formData.title.trim() ||
|
|
|
|
+ this.formData.title.trim().length < 5
|
|
|
|
+ ) {
|
|
|
|
+ this.$message.warning("请正确填写标题");
|
|
|
|
+ return false;
|
|
|
|
+ }
|
|
|
|
+ if (!this.formData.authorId) {
|
|
|
|
+ this.$message.warning("请选择作者");
|
|
|
|
+ return false;
|
|
|
|
+ }
|
|
|
|
+ if (!this.formData.content.trim()) {
|
|
|
|
+ this.$message.warning("请填写内容");
|
|
|
|
+ return false;
|
|
|
|
+ }
|
|
|
|
+ const previewContents = {
|
|
|
|
+ title: this.formData.title.trim(),
|
|
|
|
+ content: this.formData.content.trim(),
|
|
|
|
+ updateTime: this.$utils.formatTimeToStr(
|
|
|
|
+ parseInt(new Date().valueOf() / 1000)
|
|
|
|
+ ),
|
|
|
|
+ author: this.AUTHOR_LIST.filter(item => {
|
|
|
|
+ return item.id === this.formData.authorId;
|
|
|
|
+ })[0].userName
|
|
|
|
+ };
|
|
|
|
+ this.previewContents = previewContents;
|
|
|
|
+ },
|
|
// 取消
|
|
// 取消
|
|
handleClose() {
|
|
handleClose() {
|
|
this.$emit("closedEvent");
|
|
this.$emit("closedEvent");
|
|
@@ -378,6 +420,9 @@ export default {
|
|
},
|
|
},
|
|
// 富文本传输数据
|
|
// 富文本传输数据
|
|
editorPostData(content) {
|
|
editorPostData(content) {
|
|
|
|
+ if (this.formData.content === content) {
|
|
|
|
+ return false;
|
|
|
|
+ }
|
|
this.formData.content = content;
|
|
this.formData.content = content;
|
|
this.$nextTick(async () => {
|
|
this.$nextTick(async () => {
|
|
const imgNodes = document.querySelectorAll(".render-container img");
|
|
const imgNodes = document.querySelectorAll(".render-container img");
|
|
@@ -385,13 +430,24 @@ export default {
|
|
for (let i = 0; i < imgNodes.length; i++) {
|
|
for (let i = 0; i < imgNodes.length; i++) {
|
|
imgs.push(imgNodes[i].src);
|
|
imgs.push(imgNodes[i].src);
|
|
}
|
|
}
|
|
|
|
+ // 没有图片,无需处理
|
|
if (imgs.length === 0) {
|
|
if (imgs.length === 0) {
|
|
return false;
|
|
return false;
|
|
}
|
|
}
|
|
- if (JSON.stringify(this.imgs) === JSON.stringify(imgs)) {
|
|
|
|
|
|
+ // // 图片都已上传到hooli oss,无需处理
|
|
|
|
+ // const isAllOk = imgs.every(item => {
|
|
|
|
+ // return item.includes("hoolihome.com");
|
|
|
|
+ // });
|
|
|
|
+ // if (isAllOk) {
|
|
|
|
+ // return false;
|
|
|
|
+ // }
|
|
|
|
+ // 图片没有变化,无需处理
|
|
|
|
+ if (JSON.stringify(this.imgsTmp) === JSON.stringify(imgs)) {
|
|
return false;
|
|
return false;
|
|
}
|
|
}
|
|
- this.imgs = imgs;
|
|
|
|
|
|
+
|
|
|
|
+ this.imgsTmp = imgs;
|
|
|
|
+
|
|
const params = {};
|
|
const params = {};
|
|
params.data = {
|
|
params.data = {
|
|
imgs: JSON.stringify(imgs),
|
|
imgs: JSON.stringify(imgs),
|
|
@@ -407,24 +463,33 @@ export default {
|
|
data: null
|
|
data: null
|
|
};
|
|
};
|
|
});
|
|
});
|
|
|
|
+ // data最多返回30张处理图片,多余30张不处理
|
|
if (parseInt(code) === 0 && Array.isArray(data) && data.length > 0) {
|
|
if (parseInt(code) === 0 && Array.isArray(data) && data.length > 0) {
|
|
const imgsUrl = [];
|
|
const imgsUrl = [];
|
|
for (let i = 0; i < imgNodes.length; i++) {
|
|
for (let i = 0; i < imgNodes.length; i++) {
|
|
- if (data[i]) {
|
|
|
|
- const url = data[i].host + data[i].url;
|
|
|
|
|
|
+ const item = data[i];
|
|
|
|
+ if (item) {
|
|
|
|
+ const url = item.host + item.url;
|
|
imgNodes[i].src = url;
|
|
imgNodes[i].src = url;
|
|
if (i < 3) {
|
|
if (i < 3) {
|
|
imgsUrl.push(url);
|
|
imgsUrl.push(url);
|
|
}
|
|
}
|
|
|
|
+ } else {
|
|
|
|
+ break;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
this.formData.imgsUrl = imgsUrl;
|
|
this.formData.imgsUrl = imgsUrl;
|
|
const content = document.querySelector(".render-container").innerHTML;
|
|
const content = document.querySelector(".render-container").innerHTML;
|
|
this.formData.content = content;
|
|
this.formData.content = content;
|
|
- this.$refs.myUEditor.setContent(content, true);
|
|
|
|
}
|
|
}
|
|
});
|
|
});
|
|
},
|
|
},
|
|
|
|
+ // 列表图片
|
|
|
|
+ handleImgChange(files) {
|
|
|
|
+ if (files && files.length) {
|
|
|
|
+ this.formData.imgsUrl = files;
|
|
|
|
+ }
|
|
|
|
+ },
|
|
// 本地匹配作者
|
|
// 本地匹配作者
|
|
filterMethodAuthor(keyword) {
|
|
filterMethodAuthor(keyword) {
|
|
if (keyword.trim()) {
|
|
if (keyword.trim()) {
|
|
@@ -584,7 +649,6 @@ export default {
|
|
formData.tagList = obj.tagList[0].id;
|
|
formData.tagList = obj.tagList[0].id;
|
|
}
|
|
}
|
|
this.formData = Object.assign(this.formData, formData);
|
|
this.formData = Object.assign(this.formData, formData);
|
|
- this.$refs.myUEditor.setContent(formData.content);
|
|
|
|
}
|
|
}
|
|
}
|
|
}
|
|
};
|
|
};
|
|
@@ -809,10 +873,4 @@ export default {
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
-.imgs-url {
|
|
|
|
- /deep/ .el-form-item__content {
|
|
|
|
- display: flex;
|
|
|
|
- align-items: center;
|
|
|
|
- }
|
|
|
|
-}
|
|
|
|
</style>
|
|
</style>
|