File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
<template>
<div class="content">
<div class="admin-page-title mb30">
<p>기술문서</p>
</div>
<div class="full-page">
<div class="flex content">
<div class="gd-3 pl0">
<div class="tree-zone content pd15">
<div class="border-b mb10 pb10">
<p class="detail-bold">버전정보</p>
</div>
<div class="box pd15 mb10">
<p class="detail-text">현재버전</p>
<p class="detail-bold blue">{{ currentVer }}</p>
</div>
<div class="mb10">
<p class="detail-text">버전 목록</p>
</div>
<div class="tec-tree conten">
<div class="content overflow-y">
<ul>
<li :class="{'mb10 radius pd10 cursor':true, 'selected': selectedIndex === idx}" style="background-color: var(--white);" v-for="(techDoc, idx) in techDocVerList" :key="idx" @click="viewTechDoc(idx,techDoc)">{{ techDoc.techDoc.bbsVerNo }}</li>
</ul>
<!-- <draggable tag="ul" class="tree-node" :list="codeList" :group="{ name: 'menu' }" item-key="id"
handle=".handle" ghost-class="ghost">
<template #item="{ element }">
<Hierachy :tasks="element" :icon="iconPath" :selectedNode="selectedCd"
@changeSelected="fnViewDetail" />
</template>
</draggable> -->
</div>
</div>
<div class="btn-zone pt15">
<button class="large-btn blue-border-btn" v-if="editMode == 'update'" @click="fnVarSave">
버전추가
</button>
</div>
</div>
</div>
<div class="gd-9 pr0 content overflow-y">
<div class="content">
<table class="form-table">
<colgroup>
<col width="50%" />
<col width="50%" />
</colgroup>
<tr>
<td>
<div class="gd-12 pl0">
<label for="" class="form-title mb10">기술문서명</label>
<input type="text" class="full-input" id="techDocNm" v-model="techDoc.techDocNm" :disabled="editMode === 'update'"/>
</div>
</td>
<td>
<div class="gd-12 pl0">
<label for="" class="form-title point-font2 mb10">
카테고리
</label>
<select name="" id="techDocCtgryCd" class="full-select ml0" v-model="techDoc.techDocCtgryCd" :disabled="editMode === 'update'">
<option :value=null disabled>선택하세요</option>
<option v-for="(ctgryCd, idx) in ctgryCdList" :key="idx" :value=ctgryCd.cdId>
{{ ctgryCd.cdNm }}</option>
</select>
</div>
</td>
</tr>
<tr>
<td>
<div class="gd-12 pl0">
<label for="" class="form-title mb10" >버전</label>
<input type="text" class="full-input" id="bbsVerNo" v-model="techDoc.bbsVerNo"/>
</div>
</td>
<td>
<div class="gd-12 pl0">
<label for="" class="form-title mb10">버전명</label>
<input type="text" class="full-input" id="bbsTtl" v-model="techDoc.bbsTtl"/>
</div>
</td>
</tr>
<tr>
<td>
<div class="gd-12 pl0">
<label for="" class="form-title mb10">문서번호</label>
<input type="text" class="full-input" id="bbsDocNo" v-model="techDoc.bbsDocNo"/>
</div>
</td>
<td>
<div class="gd-12 pl0">
<label for="" class="form-title mb10">키워드</label><p>키워드간의 구분은 쉼표로 할 수 있습니다</p>
<input type="text" class="full-input" id="bbsKywdNm" v-model="techDoc.bbsKywdNm"/>
</div>
</td>
</tr>
<tr>
<td>
<div class="gd-12 pl0">
<label for="" class="form-title mb10">배포날짜</label>
<input type="date" class="full-input" id="bbsCrltnDt" v-model="techDoc.bbsCrltnDt"/>
</div>
</td>
<td>
<div class="gd-12 pr0">
<label for="" class="form-title mb10">버전공개여부</label>
<div class="flex align-center no-gutters" style="height: 4rem;">
<div class="gd-4">
<input type="radio" name="code" id="y" class="mr5" value="Y" v-model="rlsYn" :disabled="editMode === 'create'">
<label for="y">공개</label>
</div>
<div class="gd-4">
<input type="radio" name="code" id="n" class="mr5" value="N" v-model="rlsYn" :disabled="editMode === 'create'"/>
<label for="n">비공개</label>
</div>
</div>
</div>
</td>
</tr>
<tr>
<td colspan="2">
<div class="gd-12 pl0">
<label for="" class="form-title mb10">주요내용</label>
<input type="text" class="full-input" id="bbsMainCn" v-model="techDoc.bbsMainCn"/>
</div>
</td>
</tr>
<tr>
<td colspan="2">
<div class="gd-12 pl0">
<label for="" class="form-title mb10">내용</label>
<textarea name="smart" id="smart" style="width:100%; height: 35rem;"></textarea>
</div>
</td>
</tr>
<tr>
<td colspan="2">
<div class="gd-12 pr0">
<label for="" class="form-title mb10">표지이미지</label>
<div class="flex align-center">
<div class="gd-2 pl0 pr0">
<label for="thumbnail" class="large-btn blue-border-btn text-ct">파일찾기</label>
<input type="file" id="thumbnail" ref="thumbnail" @change="fnThumbnailInsert" accept="image/*">
</div>
<div class="gd-12 pl0">
<div>
<ul v-if="imgFileList.length > 0" style="max-height: 20rem;" class="pt10 pb10 overflow-y">
<li v-for="(file, index) in imgFileList" :key="index" class="pl10 pr10 border radius">
<div v-if="file.fileId != null" class="flex justify-between align-center">
<p>{{ file.fileNm }}.{{ file.extnNm }}</p>
<button class="icon-btn" @click="fnImgFileDelete(file, index)">X</button>
</div>
<div v-else class="flex justify-between align-center">
<p>{{ file.name }}</p>
<button class="icon-btn" @click="fnImgFileDelete(file, index)">X</button>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</td>
</tr>
<tr class="border-t">
<td colspan="2">
<div class="gd-12 pr0">
<label for="" class="form-title mb10">첨부파일</label>
<div class="flex align-center">
<div class="gd-2 pl0 pr0">
<label for="file" class="large-btn blue-border-btn text-ct">파일찾기</label>
<input type="file" id="file" ref="file" @change="fnFileInsert" multiple>
</div>
<div class="gd-12 pl0">
<div>
<ul v-if="fileList.length > 0" style="max-height: 20rem;" class="pt10 pb10 overflow-y">
<li v-for="(file, idx) in fileList" :key="idx" class="pl10 pr10 border radius">
<div v-if="file.fileId != null" class="flex justify-between align-center">
<p> {{ file.fileNm }}.{{ file.extnNm }}</p>
<button class="icon-btn" @click="fnFileDelete(file, idx)">X</button>
</div>
<div v-else class="flex justify-between align-center">
{{ file.name }}
<button class="icon-btn" @click="fnFileDelete(file, idx)">X</button>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</td>
</tr>
</table>
<div class="flex justify-end pt15" >
<div class="gd-1 pr0">
<button class="large-btn gray-border-btn" @click="fnList">
목록
</button>
</div>
<div class="gd-1 pr0" v-if="editMode === 'update'">
<button class="large-btn red-border-btn" @click="verDelete">
삭제
</button>
</div>
<div class="gd-1 pr0">
<button class="large-btn blue-border-btn" v-if="editMode === 'create'" @click="save">
등록
</button>
<button class="large-btn blue-border-btn" v-else-if="!isVerSave && editMode === 'update'" @click="verUpdate">
수정
</button>
<button class="large-btn blue-border-btn" v-else @click="verSave">
버전등록
</button>
</div>
<!-- <div class="gd-1 pr0" v-else>
<button class="large-btn blue-border-btn" v-if="!isVerSave" @click="verUpdate">
수정
</button>
<button class="large-btn blue-border-btn" v-else @click="verSave">
버전등록
</button>
</div>
<div class="gd-1 pr0">
<button class="large-btn red-border-btn" v-if="editMode === 'update'" @click="verDelete">
삭제
</button>
</div> -->
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import draggable from "vuedraggable";
import Hierachy from "../../../../component/hierachy/HierachyDraggable.vue";
import { mdiConsoleNetwork, mdiFileCode } from "@mdi/js";
import { findAllVer, findByVer, verDelete } from "../../../../../resources/api/techDoc.js"
import axios from "axios";
export default {
components: {
draggable: draggable,
Hierachy: Hierachy,
},
data() {
return {
// 페이지 권한 객체
pageAuth: JSON.parse(localStorage.getItem("vuex")).pageAuth,
// id
pageId: this.$route.query.pageId,
//path
path: this.$store.state.path,
// 글 작성 모드
// create - 등록 (기본)
// update - 수정
editMode: "create",
// 상세조회 정보 담는 객체
techDoc: {
techDocId: this.pageId,
techDocNm: null,
techDocCtgryCd: null,
rlsTechDocId: null,
bbsId: null,
bbsTtl: null,
bbsCn: null,
fileMngId: null,
bbsVerNo: null,
bbsDocNo: null,
imgFileMngId: null,
bbsMainCn: null,
bbsKywdNm: null,
bbsCrltnDt: null
},
//카테고리 리스트
ctgryCdList: [],
//현재 버전
currentVer:null,
//공개여부
rlsYn: 'Y',
//버전추가 모드
isVerSave: false,
//파일
imgFileList: [],
fileList: [],
deleteImgFileList: [],
deleteFileList: [],
//버전 리스트
techDocVerList: [],
//에디터
oEditors: [],
selectedIndex: null // 선택된 인덱스
};
},
created() {
// pageId 확인
if (this.pageId != null) {
this.editMode = "update";
this.findAllVer();
}
this.findAllCtgry();
},
methods: {
fnList() {
if(!confirm("목록으로 돌아가시겠습니까? 작성중인 내용이 있으면 초기화 됩니다. ")) return
this.$router.push({
path: this.path + '/list.page'
});
},
//버전추가 모드로 변경
fnVarSave() {
let docNm = this.techDoc.techDocNm;
let docCtgrycd = this.techDoc.techDocCtgryCd;
this.techDoc = {
techDocId: this.pageId,
techDocNm: null,
techDocCtgryCd: null,
rlsTechDocId: null,
bbsId: null,
bbsTtl: null,
bbsCn: null,
fileMngId: null,
bbsVerNo: null,
bbsDocNo: null,
imgFileMngId: null,
bbsMainCn: null,
bbsKywdNm: null,
bbsCrltnDt: null
}
this.techDoc.techDocNm = docNm;
this.techDoc.techDocCtgryCd = docCtgrycd;
// this.techDoc.techDocId= this.pageId
// // this.techDoctechDocNm= null,
// // this.techDoctechDocCtgryCd= null,
// this.techDoc.rlsTechDocId= null
// this.techDoc.bbsId= null
// this.techDoc.bbsTtl= null
// this.techDoc.bbsCn= null
// this.techDoc.fileMngId= null
// this.techDoc.bbsVerNo= null
// this.techDoc.bbsDocNo= null
// this.techDoc.imgFileMngId= null
// this.techDoc.bbsMainCn= null
// this.techDoc.bbsKywdNm= null
// this.techDoc.bbsCrltnDt= null
this.imgFileList = [];
this.fileList = [];
this.deleteImgFileList = [];
this.deleteFileList = [];
this.rlsYn = 'N';
this.oEditors.getById["smart"].exec("SET_IR", [""]); //내용초기화
if(this.editMode === 'update') document.getElementById("bbsVerNo").focus();
else document.getElementById("techDocNm").focus();
this.isVerSave = true;
},
//카테고리 리스트 불러오기
async findAllCtgry() {
this.ctgryCdList = await this.$getCommonCode('techDocCtgryCd');
},
//선택 버전 보여주기
viewTechDoc(idx,techDoc) {
this.selectedIndex = idx;
this.techDoc = techDoc.techDoc;
this.techDoc.bbsCrltnDt = this.$yyyymmdd(this.techDoc.bbsCrltnDt);
this.isVerSave = false;
this.oEditors.getById["smart"].exec("SET_IR", [techDoc.techDoc.bbsCn]);
document.getElementById("bbsVerNo").focus();
document.getElementById("bbsVerNo").blur();
if(this.currentVer === this.techDoc.bbsVerNo) this.rlsYn = 'Y'
else this.rlsYn = 'N'
this.imgFileList = techDoc.imgFileList;
this.fileList = techDoc.fileList;
this.deleteImgFileList = [];
this.deleteFileList = [];
},
//기술 문서 버전 리스트 목록 조회
async findAllVer() {
// 데이터 세팅
const data = { techDocId: this.pageId };
try {
const response = await findAllVer(data);
this.techDocVerList = response.data.data.list;
this.techDoc = response.data.data.techDocMap.techDoc;
this.imgFileList = response.data.data.techDocMap.imgFileList;
this.fileList = response.data.data.techDocMap.fileList;
this.techDoc.bbsCrltnDt = this.$yyyymmdd(this.techDoc.bbsCrltnDt);
if(this.oEditors.length === 0) {
this.initEditor(this.techDoc.bbsCn);
} else {
// this.oEditors.getById["smart"].exec("SET_IR", [""]); //내용초기화
this.oEditors.getById["smart"].exec("SET_IR", [this.techDoc.bbsCn]);
document.getElementById("bbsVerNo").focus();
document.getElementById("bbsVerNo").blur();
}
this.currentVer = this.techDoc.bbsVerNo
} catch (error) {
const errorData = error.response.data;
if (errorData.message != null && errorData.message != "") {
alert(error.response.data.message);
} else {
// alert("에러가 발생했습니다.\n관리자에게 문의해주세요.");
alert(this.$getCmmnMessage('err005'));
}
}
},
//기술 문서 버전 상세 조회
async findByVer() {
// 데이터 세팅
const data = { techDocId: this.pageId };
try {
const response = await findByVer();
this.techDoc = response.data.data;
} catch (error) {
const errorData = error.response.data;
if (errorData.message != null && errorData.message != "") {
alert(error.response.data.message);
} else {
// alert("에러가 발생했습니다.\n관리자에게 문의해주세요.");
alert(this.$getCmmnMessage('err005'));
}
}
},
//기술 문서 등록
save() {
const vm = this;
if (!vm.Validation()) return;
if (!confirm(vm.$getCmmnMessage('cnf003'))) return;
vm.techDoc.rlsTechDocId = 'Y'
let formData = new FormData();
for (const file of vm.fileList) {
formData.append('file', file);
}
for (const imgFile of vm.imgFileList) {
formData.append('imgFile', imgFile);
}
const techDoc = new Blob([JSON.stringify(vm.techDoc)], {
type: "application/json; charset=UTF-8",
});
formData.append("techDocVerVO", techDoc);
axios({
url: '/techDoc/save.file',
method: 'post',
headers: {
'Content-Type': 'multipart/form-data',
Authorization: vm.$store.state.authorization,
},
data: formData
}).then(function (response) {
if (response.status === 200) {
alert(vm.$getCmmnMessage('msg001'));
vm.$router.push({
path: vm.path + '/view.page', query: { 'pageId' : response.data.data.bbsId }
});
} else {
alert("문의 등록 중 오류가 발생하였습니다.\n담당자에게 문의하세요.");
}
}).catch(function (error) {
console.log('error-',error)
alert("문의 등록 중 오류가 발생하였습니다.\n담당자에게 문의하세요.");
});
},
//기술 문서 버전 등록
async verSave() {
const vm = this;
if (!vm.Validation()) return;
if(vm.rlsYn === 'Y') {
if (!confirm("현재버전은 " + vm.currentVer + " 입니다. 버전을 " + vm.techDoc.bbsVerNo + " (으)로 변경하시겠습니까?")) {
return;
} else {
vm.techDoc.rlsTechDocId = 'Y'
}
} else {
if (!confirm(vm.$getCmmnMessage('cnf003'))) return;
vm.techDoc.rlsTechDocId = 'N'
}
let formData = new FormData();
for (const file of vm.fileList) {
formData.append('file', file);
}
for (const imgFile of vm.imgFileList) {
formData.append('imgFile', imgFile);
}
const techDoc = new Blob([JSON.stringify(vm.techDoc)], {
type: "application/json; charset=UTF-8",
});
formData.append("techDocVerVO", techDoc);
axios({
url: '/techDoc/verSave.file',
method: 'post',
headers: {
'Content-Type': 'multipart/form-data',
Authorization: vm.$store.state.authorization,
},
data: formData
}).then(function (response) {
if (response.status === 200) {
alert(vm.$getCmmnMessage('msg001'));
vm.findAllVer();
} else {
alert("문의 등록 중 오류가 발생하였습니다.\n담당자에게 문의하세요.");
}
}).catch(function (error) {
console.log('error-',error)
alert("문의 등록 중 오류가 발생하였습니다.\n담당자에게 문의하세요.");
});
},
//기술 문서 버전 수정
async verUpdate() {
if (!this.Validation()) return;
if (this.rlsYn === 'Y' && this.currentVer != this.techDoc.bbsVerNo) {
if (!confirm("현재버전은 " + this.currentVer + " 입니다. 버전을 " + this.techDoc.bbsVerNo + " (으)로 변경하시겠습니까?")) {
return;
} else {
this.techDoc.rlsTechDocId = 'Y'
}
} else if(this.rlsYn === 'N' && this.currentVer === this.techDoc.bbsVerNo) {
alert("해당 기술문서의 공개버전입니다. 다른 버전으로 변경 후 공개여부를 수정해 주세요.")
this.rlsYn = 'Y'
return;
} else {
if(!confirm(this.$getCmmnMessage('cnf004'))) return;
this.techDoc.rlsTechDocId = 'N'
}
var formData = new FormData();
const techDoc = new Blob([JSON.stringify(this.techDoc)], {
type: "application/json; charset=UTF-8",
});
formData.append("techDocVerVO", techDoc);
const deleteFileList = new Blob(
[JSON.stringify(this.deleteFileList)],
{
type: "application/json; charset=UTF-8",
}
);
formData.append("deleteFileList", deleteFileList);
// 추가 첨부파일
for (const file of this.fileList) {
if (file.fileId == null) {
formData.append("file", file);
}
}
// 이미지 파일
const deleteImgFileList = new Blob(
[JSON.stringify(this.deleteImgFileList)],
{
type: "application/json; charset=UTF-8",
}
);
formData.append("deleteImgFileList", deleteImgFileList);
for (const imgFile of this.imgFileList) {
if (imgFile.fileId == null) {
formData.append("imgFile", imgFile);
}
}
// axios 호출
axios({
url: "/techDoc/verUpdate.file",
method: "post",
headers: {
"Content-Type": "multipart/form-data; charset=UTF-8",
Authorization: this.$store.state.authorization,
},
data: formData,
}).then((response) => {
if (response.status === 200) {
alert(this.$getCmmnMessage('msg002'));
if(this.rlsYn === 'Y') this.findAllVer();
else this.viewTechDoc(this.selectedIndex,response.data.data);
} else {
alert("문의 등록 중 오류가 발생하였습니다.\n담당자에게 문의하세요.");
}
}).catch((error) => {
console.log('error', error);
// alert("에러가 발생했습니다.\n관리자에게 문의해주세요.");
alert(this.$getCmmnMessage('err005'));
});
},
// 버전 삭제
async verDelete() {
if (this.currentVer === this.techDoc.bbsVerNo) {
alert("해당 기술문서의 공개버전입니다. 다른 버전으로 변경 후 삭제해 주세요.")
return
} else {
if (!confirm(this.$getCmmnMessage("cnf002"))) return
}
// 데이터 세팅
const data = this.techDoc;
try {
const response = await verDelete(data);
alert(this.$getCmmnMessage('msg003'));
this.findAllVer();
} catch (error) {
console.log(error)
const errorData = error.response.data;
if (errorData.message != null && errorData.message != "") {
alert(error.response.data.message);
} else {
// alert("에러가 발생했습니다.\n관리자에게 문의해주세요.");
alert(this.$getCmmnMessage('err005'));
}
}
},
// 썸네일 등록
fnThumbnailInsert(event) {
const file = event.target.files[0];
if (file && file.type.startsWith('image/')) {
if (this.imgFileList.length > 0) {
if (this.imgFileList[0].fileId != null) {
this.deleteImgFileList.push(this.imgFileList[0]);
}
}
this.imgFileList[0] = file;
} else {
// 이미지 파일이 아닐 경우, 사용자에게 경고
alert('이미지 파일만 등록할 수 있습니다.');
}
},
// 썸네일 삭제
fnImgFileDelete(file, index) {
if (file.fileId != null) {
this.deleteImgFileList.push(file);
}
this.imgFileList = [];
},
// 첨부파일 등록
fnFileInsert(event) {
// 위험한 파일 확장자 목록
const dangerousExtensions = ['exe', 'bat', 'sh', 'cmd', 'js', 'html', 'htm', 'php', 'py', 'pl', 'rb'];
const file = event.target.files[0];
if(file) {
const fileExtension = file.name.split('.').pop().toLowerCase();
// 파일 확장자가 위험한지 확인
if (dangerousExtensions.includes(fileExtension)) {
alert('이 파일 형식은 업로드할 수 없습니다.');
return;
} else {
if (this.fileList.length > 0) {
if (this.fileList[0].fileId != null) {
this.deleteFileList.push(this.fileList[0]);
}
}
this.fileList[0] = file;
}
} else {
alert("첨부파일 등록 중 오류가 발생 하였습니다. 다시 시도해주세요.")
}
},
// 첨부파일 삭제
fnFileDelete(file, index) {
if (file.fileId != null) {
this.deleteFileList.push(file);
}
this.fileList.splice(index, 1);
},
Validation() {
const vm = this;
if(!vm.isVerSave) {
// 기술문서명 빈값
vm.techDoc.techDocNm = vm.techDoc.techDocNm ? vm.techDoc.techDocNm.trim() : null
if (vm.$isEmpty(vm.techDoc.techDocNm)) {
alert("기술문서명을 입력하세요.")
document.getElementById("techDocNm").focus();
return false;
}
}
if(!vm.isVerSave) {
// 카테고리 빈값
if (vm.$isEmpty(vm.techDoc.techDocCtgryCd)) {
alert("카테고리를 선택하세요.")
document.getElementById("techDocCtgryCd").focus();
return false;
}
}
// 버전 빈값
vm.techDoc.bbsVerNo = vm.techDoc.bbsVerNo ? vm.techDoc.bbsVerNo.trim() : null
if (vm.$isEmpty(vm.techDoc.bbsVerNo)) {
alert("버전을 입력하세요.")
document.getElementById("bbsVerNo").focus();
return false;
}
// 버전명명 빈값
vm.techDoc.bbsTtl = vm.techDoc.bbsTtl ? vm.techDoc.bbsTtl.trim() : null
if (vm.$isEmpty(vm.techDoc.bbsTtl)) {
alert("버전명을 입력하세요.")
document.getElementById("bbsTtl").focus();
return false;
}
// 문서번호 빈값
vm.techDoc.bbsDocNo = vm.techDoc.bbsDocNo ? vm.techDoc.bbsDocNo.trim() : null
if (vm.$isEmpty(vm.techDoc.bbsDocNo)) {
alert("문서번호를 입력하세요.")
document.getElementById("bbsDocNo").focus();
return false;
}
// 키워드 빈값
vm.techDoc.bbsKywdNm = vm.techDoc.bbsKywdNm ? vm.techDoc.bbsKywdNm.trim() : null
if (vm.$isEmpty(vm.techDoc.bbsKywdNm)) {
alert("키워드를 입력하세요.")
document.getElementById("bbsKywdNm").focus();
return false;
}
// 배포날짜 빈값
vm.techDoc.bbsCrltnDt = vm.techDoc.bbsCrltnDt ? vm.techDoc.bbsCrltnDt.trim() : null
if (vm.$isEmpty(vm.techDoc.bbsCrltnDt)) {
alert("배포날짜를 선택하세요.")
document.getElementById("bbsCrltnDt").focus();
return false;
}
// 버전공개여부 빈값
if(vm.editMode === 'update') {
if (vm.$isEmpty(vm.rlsYn)) {
alert("배포날짜를 선택하세요.")
document.getElementById("y").focus();
return false;
}
}
// 주요내용 빈값
vm.techDoc.bbsMainCn = vm.techDoc.bbsMainCn ? vm.techDoc.bbsMainCn.trim() : null
if (vm.$isEmpty(vm.techDoc.bbsMainCn)) {
alert("주요내용을 입력하세요.")
document.getElementById("bbsMainCn").focus();
return false;
}
const oEditors = vm.oEditors;
oEditors.getById['smart'].exec("UPDATE_CONTENTS_FIELD", []);
// 스마트에디터의 iframe에 있는 내용을 textarea로.
vm.techDoc.bbsCn = document.getElementById('smart').value;
//2.내용 null검사
if (vm.$isEmpty(vm.techDoc.bbsCn) || vm.removeHtmlAndSpace(vm.techDoc.bbsCn) === '') {
alert("내용을 입력하세요.")
oEditors.getById['smart'].exec("FOCUS");
return false;
}
//내용 길이 검사
if (vm.techDoc.bbsCn > 5000) {
alert("내용은 5000자 까지 입력할 수 있습니다.")
oEditors.getById['smart'].exec("FOCUS");
return false;
}
//표지이미지 검사
if (!vm.imgFileList.length > 0) {
alert("표지이미지를 등록하세요.")
document.getElementById("thumbnail").focus();
return false;
}
//표지이미지 검사
if (!vm.fileList.length > 0) {
alert("첨부파일을 등록하세요.")
document.getElementById("file").focus();
return false;
}
return true;
},
//에디터 html 삭제
removeHtmlAndSpace: function (str) {
return str.replace(/<[^>]*>/g, '') // HTML 태그 제거
.replace(/ /gi, ' ') // 를 공백으로 변환
.replace(/\s/g, ''); // 모든 공백 제거
},
// 에디터 만들기
initEditor: function (initData) {
// 스마트 에디터 적용
const oEditors = this.oEditors;
nhn.husky.EZCreator.createInIFrame({
oAppRef: oEditors,
elPlaceHolder: "smart",
sSkinURI: "/client/smarteditor2-2.8.2.3/SmartEditor2Skin.html",
htParams: {
bSkipXssFilter: true,
bUseVerticalResizer: true,
bUseModeChanger: true
},
fOnAppLoad: function () {
oEditors.getById["smart"].exec("SET_IR", [initData]);
},
fCreator: "createSEditor2"
});
},
},
watch: {},
computed: {
},
mounted() {
if(this.editMode === 'create') {
const oEditors = this.oEditors;
nhn.husky.EZCreator.createInIFrame({
oAppRef: oEditors,
elPlaceHolder: "smart",
sSkinURI: "/client/smarteditor2-2.8.2.3/SmartEditor2Skin.html",
htParams: {
bUseToolbar: true, // 툴바 사용 여부 (true:사용/ false:사용하지 않음)
bSkipXssFilter: true,
bUseVerticalResizer: true,
bUseModeChanger: true
},
fCreator: "createSEditor2"
});
}
},
};
</script>
<style scoped>
.ghost {
height: 15px;
color: transparent;
border: 1px dashed var(--blue);
}
.ghost * {
display: none;
}
</style>