dev.ttsby.com/plugins/ckeditor5/import.system.php

<?php
if(!defined('__KIMS__')) exit;
?>

<style>

:root {
  --ck-color-toolbar-background: #fff;
  --ck-color-toolbar-border: rgba(0, 0, 0, 0.085);
  --ck-border-radius :0
}

.document-editor__toolbar {
  position: fixed;
  top: 117px;
  right: 0;
  left: 0;
  z-index: 1;
}

.document-editor__toolbar .ck.ck-toolbar {
  border-left-width: 0 !important;
  border-right-width: 0 !important;
}

.document-editor {
  position: absolute;
  top: 157px;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: auto;
  -webkit-transition-property: left, right, top, bottom, width, margin;
  transition-property: left, right, top, bottom, width, margin;
  -webkit-transition-duration: .2s;
  transition-duration: .2s;
  font-family: 'NotoSans', 'Malgun Gothic', '맑은 고딕','Apple SD Gothic Neo', '돋움', dotum, sans-serif;
}

.document-editor__editable-container {
  overflow-x: hidden;
  padding: calc(2*var(--ck-spacing-large));
  background: var(--ck-color-base-foreground);
}

.document-editor__editable-container .document-editor__editable {
  width: 20.8cm;
  min-height: 21cm;
  padding: 1cm 2cm 2cm;
  border: 1px solid #d3d3d3;
  border-radius: var(--ck-border-radius);
  background: #fff;
  box-shadow: 0 0 5px rgba(0,0,0,.1);
  margin: 0 auto;
  border-radius: 0
}

.ck.ck-editor__editable:not(.ck-editor__nested-editable).ck-focused {
  box-shadow: 0 0 5px rgba(0,0,0,.1);
  border: 1px solid #d3d3d3;
  outline: 0
}

</style>

<?php if ($g['broswer']!='MSIE 11' && $g['broswer']!='MSIE 10' && $g['broswer']!='MSIE 9'): ?>
<div class="" >
	<div data-role="loader">
		<div class="d-flex justify-content-center align-items-center text-muted bg-white" style="height:100vh">
			<div class="spinner-border mr-2" role="status"></div>
		</div>
	</div>

	<div data-role="editor" data-editor='DecoupledDocumentEditor' class="d-none">

    <div class="document-editor__toolbar"></div>
		<div class="document-editor border-top-0">
		    <div class="document-editor__toolbar"></div>
		    <div class="document-editor__editable-container">
		        <div class="document-editor__editable">
		            <?php echo $__SRC__?>
		        </div>
		    </div>
		</div>

    <div class="opener">
    	<button type="button" class="btn btn-secondary js-openSidebar shadow" data-toggle="tooltip" title="첨부패널 열기">
    		<i class="fa fa-upload fa-lg" aria-hidden="true"></i>
    	</button>
    </div>

	</div>

</div>

<?php getImport('ckeditor5','decoupled-document/build/ckeditor','21.0.0','js'); ?>
<script src="<?php echo $g['s']?>/_core/js/ckeditor5.js"></script>
<script>
  var attach_file_saveDir = '<?php echo $g['path_file']?>site/';// 파일 업로드 폴더
  var attach_module_theme = '_desktop/bs4-default-attach';// attach 모듈 테마
</script>

<script>

let editor;

DecoupledDocumentEditor
	.create( document.querySelector( '.document-editor__editable' ),{
		toolbar: {
			items: [
				'heading',
				'|',
				'fontSize',
				'fontColor',
				'|',
				'bold',
				'italic',
				'underline',
				'strikethrough',
				'highlight',
				'|',
				'alignment',
				'|',
				'numberedList',
				'bulletedList',
				'|',
				'indent',
				'outdent',
				'|',
				'todoList',
				'link',
				'blockQuote',
				'horizontalLine',
				'imageUpload',
				'insertTable',
				'mediaEmbed',
				'code',
				'codeBlock',
				'exportPdf',
				'removeFormat',
				'|',
				'undo',
				'redo'
			]
		},
		language: 'ko',
		extraPlugins: [rbUploadAdapterPlugin],
		image: {
			toolbar: [
				'imageTextAlternative',
				'imageStyle:full',
				'imageStyle:side'
			]
		},
    link: {
      decorators: {
        addTargetToLinks: {
          mode: 'manual',
          label: '새탭에서 열기',
          attributes: {
            target: '_blank',
            rel: 'noopener noreferrer'
          }
        }
      }
    },
		table: {
			contentToolbar: [
				'tableColumn',
				'tableRow',
				'mergeTableCells',
				'tableCellProperties',
				'tableProperties'
			]
		},
		licenseKey: '',
	} )
  .then( newEditor => {
		editor = newEditor;
    $('[data-role="loader"]').addClass('d-none') //로더 제거
		$('[data-role="editor"]').removeClass('d-none')
		const toolbarContainer = document.querySelector( '.document-editor__toolbar' );
		toolbarContainer.appendChild( editor.ui.view.toolbar.element );
    $('.document-editor').on('scroll', function(){
      var height = $(this).scrollTop();
      if(height > 50) {
        $('.document-editor__toolbar').addClass('shadow-sm')
      } else {
        $('.document-editor__toolbar').removeClass('shadow-sm')
      }
    });

	})
	.catch( error => {
			console.error( error );
	} );

</script>
<?php else: ?>
<div class="rb-article">
	<div data-role="loader">
		<div class="d-flex justify-content-center align-items-center border text-muted" style="height:80vh">
			<div class="text-center">
				<p class="mb-2">에디터가 지원되지 않는 환경 입니다.</p>
				<small>Edge,Chrome,Firefox,Safari 브라우저 이용을 부탁드립니다.</small>
			</div>
		</div>
	</div>
</div>
<?php endif; ?>