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="pagetitle">
<h2>공지사항 등록</h2>
</div>
<section class="section">
<div class="card">
<div class="card-body pt-3">
<table class="form-table" style="width: 100%;">
<tbody>
<tr>
<th class="text-lf">
<span>제목</span>
</th>
<td>
<input
type="text"
class="form-control"
placeholder="제목을 입력하세요."
/>
</td>
</tr>
<tr class="border-top">
<th colspan="4" class="text-lf">
<span>내용</span>
</th>
</tr>
<tr style="max-height: 600px">
<td colspan="4" style="height: 100%" class="pt-0">
<ckeditor :editor="editor" v-model="editorData"></ckeditor>
</td>
</tr>
<!-- 첨부파일 -->
<tr class="border-top">
<th class="text-lf">
첨부파일
</th>
<td colspan="2">
<div class="gd-12 pr0">
<div class="gd-2 pl0 pr0">
<label for="file" class="btn btn-outline-primary">파일찾기</label>
<input
type="file"
id="file"
ref="file"
@change="handleFileInsert"
multiple
/>
</div>
</div>
</td>
</tr>
<!-- 공지글 -->
<tr class="border-top">
<th class="text-lf">
공지글
</th>
<td colspan="3">
<div class="d-flex no-gutters">
<div class="col-md-4">
<input
type="radio"
name="notice"
id="notice-y"
class="mr5"
value="Y"
/>
<label for="notice-y">사용</label>
</div>
<div class="col-md-4">
<input
type="radio"
name="notice"
id="notice-n"
class="mr5"
value="N"
/>
<label for="notice-n">미사용</label>
</div>
</div>
</td>
</tr>
<!-- 공지글 게시기간 -->
<tr class="border-top">
<th class="text-lf">
공지글 게시기간
</th>
<td colspan="3">
<div class="d-flex no-gutters">
<div class="col-md-4">
<input
type="datetime-local"
class="form-control"
/>
</div>
<div class="pd-1">-</div>
<div class="col-md-4">
<input
type="datetime-local"
class="form-control"
/>
</div>
</div>
</td>
</tr>
<!-- 비밀글 -->
<tr class="border-top">
<th class="text-lf">
비밀글
</th>
<td colspan="3">
<div class="d-flex no-gutters">
<div class="col-md-4">
<input
type="radio"
name="private"
id="private-y"
class="mr5"
value="Y"
/>
<label for="private-y">사용</label>
</div>
<div class="col-md-4">
<input
type="radio"
name="private"
id="private-n"
class="mr5"
value="N"
/>
<label for="private-n">미사용</label>
</div>
</div>
</td>
</tr>
</tbody>
</table>
<div class="text-end">
<button class="btn btn-primary" @click="handleInsert">
{{ notice == null ? "등록" : "수정" }}
</button>
<button class="btn btn-secondary" @click="handleCancel">취소</button>
</div>
</div>
</div>
</section>
</template>
<script>
import CKEditor from '@ckeditor/ckeditor5-vue';
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
export default {
components: {
ckeditor: CKEditor
},
data() {
return {
editor: ClassicEditor, // Editor build to use
editorData: '', // Data for editor content
};
},
methods: {
handleInsert() {
console.log('Editor Data:', this.editorData);
},
handleCancel() {
// Your cancel logic
},
},
mounted() {
console.log(CKEditor); // Check if CKEditor is properly imported and available
}
};
</script>
<style scoped>
td,
th {
padding: 1rem;
}
th {
width: 10rem;
}
#file {
position: absolute;
width: 0;
height: 0;
padding: 0;
overflow: hidden;
border: 0;
}
.ckeditor {
width: 100%;
height: 300px; /* Adjust height as needed */
}
</style>