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>
<ckeditor v-if="editor && config" :model-value="editorContent" :editor="editor" :config="config" @update:model-value="updateContents" />
</template>
<script>
/**
* This configuration was generated using the CKEditor 5 Builder. You can modify it anytime using this link:
* https://ckeditor.com/ckeditor-5/builder/#installation/NoNgNARATAdAzPCkCMAGKIAcmCsrdwghzICcUqqyyALESDnKXFKW6djTdkhANYB7JKjDBkYEZIlhkAXUggAZmxwBjVRFlA==
*/
import { Ckeditor } from '@ckeditor/ckeditor5-vue';
import {
ClassicEditor,
Alignment,
AutoLink,
BlockQuote,
Bold,
Essentials,
FontBackgroundColor,
FontColor,
FontFamily,
FontSize,
HorizontalLine,
ImageEditing,
ImageUtils,
Indent,
IndentBlock,
Italic,
Link,
Paragraph,
RemoveFormat,
Strikethrough,
Subscript,
Superscript,
Table,
TableCaption,
TableCellProperties,
TableColumnResize,
TableProperties,
TableToolbar,
TextPartLanguage,
Underline,
} from 'ckeditor5';
import translations from 'ckeditor5/translations/ko.js';
import 'ckeditor5/ckeditor5.css';
/**
* Create a free account with a trial: https://portal.ckeditor.com/checkout?plan=free
*/
const LICENSE_KEY = 'GPL'; // or <YOUR_LICENSE_KEY>.
export default {
name: 'EditorComponent',
components: {
Ckeditor
},
props: {
contents: {
type: String,
default: ''
}
},
emits: ['update:contents'],
data() {
return {
isLayoutReady: false,
editor: ClassicEditor,
};
},
computed: {
editorContent() {
// contents가 null 또는 undefined인 경우 빈 문자열 반환
return this.contents || '';
},
config() {
if (!this.isLayoutReady) {
return null;
}
return {
toolbar: {
items: [
'fontSize',
'fontFamily',
'fontColor',
'fontBackgroundColor',
'|',
'bold',
'italic',
'underline',
'strikethrough',
'subscript',
'superscript',
'removeFormat',
'|',
'horizontalLine',
'link',
'insertTable',
'blockQuote',
'|',
'alignment',
'|',
'outdent',
'indent'
],
shouldNotGroupWhenFull: true
},
plugins: [
Alignment,
AutoLink,
BlockQuote,
Bold,
Essentials,
FontBackgroundColor,
FontColor,
FontFamily,
FontSize,
HorizontalLine,
ImageEditing,
ImageUtils,
Indent,
IndentBlock,
Italic,
Link,
Paragraph,
RemoveFormat,
Strikethrough,
Subscript,
Superscript,
Table,
TableCaption,
TableCellProperties,
TableColumnResize,
TableProperties,
TableToolbar,
TextPartLanguage,
Underline,
],
fontFamily: {
supportAllValues: true
},
fontSize: {
options: [10, 12, 14, 'default', 18, 20, 22],
supportAllValues: true
},
language: 'ko',
licenseKey: LICENSE_KEY,
link: {
addTargetToExternalLinks: true,
defaultProtocol: 'https://',
},
placeholder: '내용을 입력하세요.',
table: {
contentToolbar: ['tableColumn', 'tableRow', 'mergeTableCells', 'tableProperties', 'tableCellProperties']
},
translations: [translations],
};
}
},
mounted() {
this.isLayoutReady = true;
},
methods: {
updateContents(data) {
// 에디터 내용이 변경될 때 부모 컴포넌트에 알림
this.$emit('update:contents', data);
}
}
};
</script>