위지위그 summernote
위지위그 summernote 사용방법
위지위그(WYSIWYG) "What You See Is What You Get"
화면에서 보는 대로 결과가 나타나는 편집기를 말합니다. 예를들어, 티스토리 블로그에서 게시글을 작성할 때, 화면에 보이는 작성한 그대로 출력 결과를 볼수 있는 기능입니다.
Summernote는 웹 기반의 WYSIWYG 에디터입니다.
사용자가 쉽게 HTML 콘텐츠를 작성하고 편집할 수 있게 도와주는 오픈소스 라이브러리입니다.
간편한 UI와 다양한 기능으로 웹 페이지에서 텍스트와 이미지를 직관적으로 수정할 수 있습니다.
summernote 사이트에 접속해서
Getting stared → Installation에 보면 Bootstrap버전별 혹은 Without Bootstrap으로 사용하는 코드를 볼 수 있습니다.
html로 띄우기
without Bootstrap의 경우 사이트 상의 코드를 복사하여 html 파일만 만들어주면 됩니다.
그럼 위와같은 화면의 뜨는것을 확인할 수 있습니다.
vue에서 summernote 사용하기
vue에서 summernote 사용하기
jquery 설치하기
npm install jquery
summernote 사용을 위해 jquery 설치하기
vue-plugin-load-script 설치하기
npm install --save vue-plugin-load-script@^2.1.1
main.js
main.js에 jQuery, LoadScript import 수정해 줍니다.
index.html
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>
<%= htmlWebpackPlugin.options.title %>
</title>
<link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-lite.min.css" rel="stylesheet">
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
index.html에 summernote jquery를 추가해 줍니다.
summernote 홈페이지의 without Bootstrap의 코드에서 script의 안 부분만 복사합니다.
HelloWorld.vue
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<div id="summernote"></div>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
props: {
msg: String
},
mounted() {
this.$loadScript("https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-lite.min.js")
.then(() => {
window.$('#summernote').summernote({
placeholder: '메시지를 입력해주세요',
tabsize: 2,
height: 80,
toolbar: [
['style', ['style']],
['font', ['bold', 'underline', 'clear']],
['color', ['color']],
['para', ['ul', 'ol', 'paragraph']],
['table', ['table']],
['insert', ['link', 'picture', 'video']],
['view', ['fullscreen', 'codeview', 'help']]
]
});
})
.catch(() => {
console.log('summernote error');
});
},
}
</script>
<style scoped></style>띄울 화면의 vue 코드를 수정해 줍니다.
결과 화면
그럼 최종적으로 서버를 돌려보면 이렇게 화면에 띄는걸 확인할 수 있습니다.
summernote 글 저장하기
summernote 글 저장하기
작성할 버튼을 만들어주고
저장할 내용을 함수에 넣어줍니다.
일단 console에 찍게 했습니다만, Backend와 연결시켜서 저장하면 됩니다.
HelloWorld.vue
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<textarea id="summernote"></textarea>
<button @click="send">작성하기</button>
</div>
</template>
<script>
export default {
methods: {
send() {
console.log(window.$('#summernote').summernote('code'));
}
},
name: 'HelloWorld',
props: {
msg: String
},
mounted() {
this.$loadScript("https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-lite.min.js")
.then(() => {
window.$('#summernote').summernote({
placeholder: '메시지를 입력해주세요',
tabsize: 2,
height: 80,
toolbar: [
['style', ['style']],
['font', ['bold', 'underline', 'clear']],
['color', ['color']],
['para', ['ul', 'ol', 'paragraph']],
['table', ['table']],
['insert', ['link', 'picture', 'video']],
['view', ['fullscreen', 'codeview', 'help']]
]
});
})
.catch(() => {
console.log('summernote error');
});
},
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped></style>
그림파일 summernote로 저장하기
그림파일 summernote로 저장하기
axios 설치
npm install axios
axios 사용을 위해 터미널에서 npm install axios를 해줍니다.
file 업로드를 위한 input을 하나 만듭니다.
formData형태로 말아서 데이터를 던져줍니다.
HelloWorld.vue
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<input type="text" name="name" v-model="course.name">
<textarea name="description" id="summernote"></textarea>
<input type="text" name="price" v-model="course.price">
<input type="file" name="image" @change="onFileChange">
<button @click="send">작성하기</button>
</div>
</template>
<script>
import axios from 'axios';
export default {
methods: {
onFileChange(event) {
this.image = event.target.files[0];
},
async send() {
this.course.description = window.$('#summernote').summernote('code');
const formData = new FormData();
const jsonBlob = new Blob([JSON.stringify(this.course)], { type: 'application/json' })
formData.append('request', jsonBlob);
formData.append('image', this.image);
await axios.post("http://localhost:8080/course/create", formData, {
headers: {
'Content-Type': 'multipart/form-data'
}
});
}
},
data() {
return {
image: null,
course: {
name: "",
description: "",
price: 0,
}
}
},
name: 'HelloWorld',
props: {
msg: String
},
mounted() {
this.$loadScript("https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-lite.min.js")
.then(() => {
window.$('#summernote').summernote({
placeholder: '메시지를 입력해주세요',
tabsize: 2,
height: 80,
toolbar: [
['style', ['style']],
['font', ['bold', 'underline', 'clear']],
['color', ['color']],
['para', ['ul', 'ol', 'paragraph']],
['table', ['table']],
['insert', ['link', 'picture', 'video']],
['view', ['fullscreen', 'codeview', 'help']]
]
});
})
.catch(() => {
console.log('summernote error');
});
},
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped></style>
Summernote - Super Simple WYSIWYG editor
Super Simple WYSIWYG Editor on Bootstrap Summernote is a JavaScript library that helps you create WYSIWYG editors online.
summernote.org
'Vue' 카테고리의 다른 글
| [vue] router 라우터 사용법 (0) | 2024.08.06 |
|---|---|
| [vue] 무한스크롤 적용하기 (0) | 2024.08.06 |
| [vue] pinia 전역변수 사용하기 (0) | 2024.08.02 |
| [vue] 부모 - 자식 컴포넌트 데이터 이동 (0) | 2024.08.01 |
| [vue] Visual Studio Code에서 Vue 설치하기 (0) | 2024.07.31 |