File name
Commit message
Commit date
05-22
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" style="width:50%" ref="editorContainer"></textarea>
</template>
<script>
import { mdiBorderColor } from '@mdi/js';
import UploadAdapter from './UploadAdapter.js'
export default{
props: {
bbsCn: {
type: Object,
required: true
}
},
data(){
return{
//스마트 에디터
editor: null,
tableDefault: {
borderWidth: '1',
borderStyle: 'solid',
borderColor: '#000000'
},
}
},
methods:{
// 에디터 생성
createEditor: function () {
// ck에디터 적용
ClassicEditor
.create(this.$refs.editorContainer, {
extraPlugins: [this.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",
],
// supportAllValues: true
},
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(editor => {
this.editor = editor;
editor.setData(this.bbsCn.bbsCn);
editor.model.document.on('change', () => {
this.bbsCn.bbsCn = editor.getData();
});
})
.catch(error => {
console.error('There was a problem initializing the editor.', error);
});
},
beforeDestroy: function() {
if (this.editor) {
this.editor.destroy()
.then(() => {
this.editor = null;
});
}
},
MyCustomUploadAdapterPlugin: function(editor) {
editor.plugins.get('FileRepository').createUploadAdapter = (loader) => {
return new UploadAdapter(loader);
}
}
},
mounted(){
}
}
</script>