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>
<textarea name="editor5" id="editor5" class="form-control" style="width:100%" ref="editorContainer"></textarea>
</template>
<script>
export default {
props: {
bbsCn: {
type: Object,
required: true
}
},
setup(props) {
const editorContainer = ref(null);
let editor = null;
const createEditor = () => {
ClassicEditor
.create(editorContainer.value, {
extraPlugins: [MyCustomUploadAdapterPlugin],
removePlugins: ['MediaEmbed', 'MediaEmbedToolbar'],
image: {
toolbar: [
'imageTextAlternative',
'|',
'imageStyle:alignLeft',
'imageStyle:alignCenter',
'imageStyle:alignRight',
'|',
'resizeImage:50',
'resizeImage:75',
'resizeImage:original',
'resizeImage:custom',
],
resizeOptions: [
{
name: 'resizeImage:original',
value: null,
icon: 'original'
},
{
name: 'resizeImage:custom',
value: 'custom',
icon: 'custom'
},
{
name: 'resizeImage:50',
value: '50',
icon: 'medium'
},
{
name: 'resizeImage:75',
value: '75',
icon: 'large'
}
],
},
fontFamily: {
options: [
'default',
'궁서체',
'바탕',
'돋움',
"Arial, Helvetica, sans-serif",
"Courier New, Courier, monospace",
"Georgia, serif",
"Lucida Sans Unicode, Lucida Grande, sans-serif",
"Tahoma, Geneva, sans-serif",
"Times New Roman, Times, serif",
"Trebuchet MS, Helvetica, sans-serif",
"Verdana, Geneva, sans-serif",
],
},
table: {
contentToolbar: ['tableColumn', 'tableRow', 'mergeTableCells', 'tableCellProperties'],
tableProperties: {
defaultProperties: {
borderStyle: 'solid',
borderColor: 'hsl(0, 0%, 0%)',
borderWidth: '1px',
}
},
tableCellProperties: {
defaultProperties: {
borderStyle: 'solid',
borderColor: 'hsl(0, 0%, 0%)',
borderWidth: '1px',
}
}
}
})
.then(editorInstance => {
editor = editorInstance;
editor.setData(props.bbsCn.bbsCn);
editor.model.document.on('change', () => {
props.bbsCn.bbsCn = editor.getData();
});
})
.catch(error => {
console.error('There was a problem initializing the editor.', error);
});
};
const MyCustomUploadAdapterPlugin = (editor) => {
editor.plugins.get('FileRepository').createUploadAdapter = (loader) => {
return new UploadAdapter(loader);
};
};
onMounted(() => {
createEditor(); // Ensure the editor is created when the component is mounted
});
onBeforeUnmount(() => { // Changed from beforeDestroy to onBeforeUnmount for Vue 3
if (editor) {
editor.destroy()
.then(() => {
editor = null;
});
}
});
return {
editorContainer,
};
},
}
</script>
<style scoped>
.editor-container {
min-height: 300px; /* 에디터 컨테이너의 최소 높이 설정 */
border: 1px solid #ccc; /* 에디터 컨테이너의 테두리 설정 */
}
/* 필요에 따라 스타일 추가 */
</style>