ckeditor5 공식 홈페이지 : https://ckeditor.com/

Github : https://github.com/ckeditor/ckeditor5

온라인가이드 : https://ckeditor.com/docs/ckeditor5/latest/index.html

 

1. Ckeditor5를 다운로드할 적절한 폴더로 이동하거나 생성합니다.

d:\laragon\build 

 

2. Github에서 ckeditor5 다운로드

git clone -b stable https://github.com/ckeditor/ckeditor5

 

3. ckeditor5 다운로드가 완료되면 아래의 경로로 이동후 설치진행.

cd ckeditor5/packages/ckeditor5-build-classic
npm install

 

4. 플러그인을 추가로 설치 진행.

npm install --save-dev @ckeditor/ckeditor5-alignment
npm install --save-dev @ckeditor/ckeditor5-font
npm install --save-dev @ckeditor/ckeditor5-code-block
npm install --save-dev @ckeditor/ckeditor5-highlight
npm install --save-dev @ckeditor/ckeditor5-horizontal-line
npm install --save-dev @ckeditor/ckeditor5-html-embed
npm install --save-dev @ckeditor/ckeditor5-html-support
npm install --save-dev @ckeditor/ckeditor5-mention
npm install --save-dev @ckeditor/ckeditor5-remove-format
npm install --save-dev @ckeditor/ckeditor5-source-editing
npm install --save-dev @ckeditor/ckeditor5-special-characters
npm install --save-dev @ckeditor/ckeditor5-restricted-editing
npm install --save-dev @ckeditor/ckeditor5-word-count
npm install --save-dev @ckeditor/ckeditor5-watchdog
npm install --save-dev @ckeditor/ckeditor5-html-support
npm install --save-dev @ckeditor/ckeditor5-special-characters

위 명령으로 오류시 아래와 같이 사용할 수 있음.

npm install @ckeditor/ckeditor5-alignment --save-dev --legacy-peer-deps
npm install @ckeditor/ckeditor5-font --save-dev --legacy-peer-deps
npm install @ckeditor/ckeditor5-code-block --save-dev --legacy-peer-deps
npm install @ckeditor/ckeditor5-highlight --save-dev --legacy-peer-deps
npm install @ckeditor/ckeditor5-horizontal-line --save-dev --legacy-peer-deps
npm install @ckeditor/ckeditor5-html-embed --save-dev --legacy-peer-deps
npm install @ckeditor/ckeditor5-html-support --save-dev --legacy-peer-deps
npm install @ckeditor/ckeditor5-mention --save-dev --legacy-peer-deps
npm install @ckeditor/ckeditor5-remove-format --save-dev --legacy-peer-deps
npm install @ckeditor/ckeditor5-source-editing --save-dev --legacy-peer-deps
npm install @ckeditor/ckeditor5-special-characters --save-dev --legacy-peer-deps
npm install @ckeditor/ckeditor5-restricted-editing --save-dev --legacy-peer-deps
npm install @ckeditor/ckeditor5-word-count --save-dev --legacy-peer-deps
npm install @ckeditor/ckeditor5-watchdog --save-dev --legacy-peer-deps
npm install @ckeditor/ckeditor5-html-support --save-dev --legacy-peer-deps
npm install @ckeditor/ckeditor5-special-characters --save-dev --legacy-peer-deps

 

5. ckeditor.js 파일 수정 ( ckeditor5\packages\ckeditor5-build-classic\src\ckeditor.js)

/**
 * @license Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
 * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
 */

// The editor creator to use.
import ClassicEditorBase from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';

import Essentials from '@ckeditor/ckeditor5-essentials/src/essentials';
import UploadAdapter from '@ckeditor/ckeditor5-adapter-ckfinder/src/uploadadapter';
import Autoformat from '@ckeditor/ckeditor5-autoformat/src/autoformat';
import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold';
import Italic from '@ckeditor/ckeditor5-basic-styles/src/italic';
import BlockQuote from '@ckeditor/ckeditor5-block-quote/src/blockquote';
import Heading from '@ckeditor/ckeditor5-heading/src/heading';
import Image from '@ckeditor/ckeditor5-image/src/image';
import ImageCaption from '@ckeditor/ckeditor5-image/src/imagecaption';
import ImageStyle from '@ckeditor/ckeditor5-image/src/imagestyle';
import ImageToolbar from '@ckeditor/ckeditor5-image/src/imagetoolbar';
import ImageUpload from '@ckeditor/ckeditor5-image/src/imageupload';
import Indent from '@ckeditor/ckeditor5-indent/src/indent';
import Link from '@ckeditor/ckeditor5-link/src/link';
import List from '@ckeditor/ckeditor5-list/src/list';
import MediaEmbed from '@ckeditor/ckeditor5-media-embed/src/mediaembed';
import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
import PasteFromOffice from '@ckeditor/ckeditor5-paste-from-office/src/pastefromoffice';
import Table from '@ckeditor/ckeditor5-table/src/table';
import TableToolbar from '@ckeditor/ckeditor5-table/src/tabletoolbar';
import TextTransformation from '@ckeditor/ckeditor5-typing/src/texttransformation';
import CloudServices from '@ckeditor/ckeditor5-cloud-services/src/cloudservices';

import Alignment from '@ckeditor/ckeditor5-alignment/src/alignment';
import FontSize from '@ckeditor/ckeditor5-font/src/fontsize';
import FontFamily from '@ckeditor/ckeditor5-font/src/fontfamily';
import FontColor from '@ckeditor/ckeditor5-font/src/fontcolor';
import FontBackgroundColor from '@ckeditor/ckeditor5-font/src/fontbackgroundcolor';
import Strikethrough from '@ckeditor/ckeditor5-basic-styles/src/strikethrough';
import Underline from '@ckeditor/ckeditor5-basic-styles/src/underline';
import ImageResize from '@ckeditor/ckeditor5-image/src/imageresize';
import IndentBlock from '@ckeditor/ckeditor5-indent/src/indentblock';
import ListStyle from '@ckeditor/ckeditor5-list/src/liststyle';
import AutoImage from '@ckeditor/ckeditor5-image/src/autoimage';
import CKFinderUploadAdapter from '@ckeditor/ckeditor5-adapter-ckfinder/src/uploadadapter';
import Code from '@ckeditor/ckeditor5-basic-styles/src/code';
import CodeBlock from '@ckeditor/ckeditor5-code-block/src/codeblock';
import Highlight from '@ckeditor/ckeditor5-highlight/src/highlight';
import HorizontalLine from '@ckeditor/ckeditor5-horizontal-line/src/horizontalline';
import HtmlEmbed from '@ckeditor/ckeditor5-html-embed/src/htmlembed';
import ImageInsert from '@ckeditor/ckeditor5-image/src/imageinsert';
import LinkImage from '@ckeditor/ckeditor5-link/src/linkimage';
import DataFilter from '@ckeditor/ckeditor5-html-support/src/datafilter';
import DataSchema from '@ckeditor/ckeditor5-html-support/src/dataschema';
import GeneralHtmlSupport from '@ckeditor/ckeditor5-html-support/src/generalhtmlsupport';
import MediaEmbedToolbar from '@ckeditor/ckeditor5-media-embed/src/mediaembedtoolbar';
import Mention from '@ckeditor/ckeditor5-mention/src/mention';
import RemoveFormat from '@ckeditor/ckeditor5-remove-format/src/removeformat';
import SourceEditing from '@ckeditor/ckeditor5-source-editing/src/sourceediting';
import SpecialCharacters from '@ckeditor/ckeditor5-special-characters/src/specialcharacters';
import SpecialCharactersCurrency from '@ckeditor/ckeditor5-special-characters/src/specialcharacterscurrency';
import SpecialCharactersEssentials from '@ckeditor/ckeditor5-special-characters/src/specialcharactersessentials';
import SpecialCharactersLatin from '@ckeditor/ckeditor5-special-characters/src/specialcharacterslatin';
import SpecialCharactersMathematical from '@ckeditor/ckeditor5-special-characters/src/specialcharactersmathematical';
import SpecialCharactersText from '@ckeditor/ckeditor5-special-characters/src/specialcharacterstext';
import StandardEditingMode from '@ckeditor/ckeditor5-restricted-editing/src/standardeditingmode';
import Subscript from '@ckeditor/ckeditor5-basic-styles/src/subscript';
import Superscript from '@ckeditor/ckeditor5-basic-styles/src/superscript';
import TableCaption from '@ckeditor/ckeditor5-table/src/tablecaption';
import TableCellProperties from '@ckeditor/ckeditor5-table/src/tablecellproperties';
import TableProperties from '@ckeditor/ckeditor5-table/src/tableproperties';
import TodoList from '@ckeditor/ckeditor5-list/src/todolist';
import WordCount from '@ckeditor/ckeditor5-word-count/src/wordcount';
import EditorWatchdog from '@ckeditor/ckeditor5-watchdog/src/editorwatchdog';
import AutoLink from '@ckeditor/ckeditor5-link/src/autolink.js';
import HtmlComment from '@ckeditor/ckeditor5-html-support/src/htmlcomment.js';
import SpecialCharactersArrows from '@ckeditor/ckeditor5-special-characters/src/specialcharactersarrows.js';
import Clipboard from '@ckeditor/ckeditor5-clipboard/src/clipboard';

export default class ClassicEditor extends ClassicEditorBase {}

// Plugins to include in the build.
ClassicEditor.builtinPlugins = [
	Essentials,
	Alignment,
	FontSize,
	FontFamily,
	FontColor,
	FontBackgroundColor,
	UploadAdapter,
	Autoformat,
	Bold,
	Italic,
	Strikethrough,
	Underline,
	BlockQuote,
	Heading,
	Image,
	ImageCaption,
	ImageResize,
	ImageStyle,
	ImageToolbar,
	ImageUpload,
	Indent,
	IndentBlock,
	Link,
	List,
	ListStyle,
	MediaEmbed,
	Paragraph,
	PasteFromOffice,
	Table,
	TableToolbar,
	TextTransformation,
	CloudServices,
	AutoImage,
	CKFinderUploadAdapter,
	Code,
	CodeBlock,
	DataFilter,
	DataSchema,
	GeneralHtmlSupport,
	Highlight,
	HorizontalLine,
	HtmlEmbed,
	ImageInsert,
	LinkImage,
	MediaEmbedToolbar,
	Mention,
	RemoveFormat,
	SourceEditing,
	SpecialCharacters,
	SpecialCharactersCurrency,
	SpecialCharactersEssentials,
	SpecialCharactersLatin,
	SpecialCharactersMathematical,
	SpecialCharactersText,
	StandardEditingMode,
	Subscript,
	Superscript,
	TableCaption,
	TableCellProperties,
	TableProperties,
	TodoList,
	WordCount,
	EditorWatchdog,
	AutoLink,
	HtmlComment,
	SpecialCharactersArrows,
	Clipboard
];

// Editor configuration.
ClassicEditor.defaultConfig = {
	toolbar: {
		items: [
			"undo",
			"redo",
			"|",
			"heading",
			"|",
			"bold",
			"italic",
			"underline",
			"strikethrough",
			"removeFormat",
			"alignment",
			"|",
			"fontSize",
			"fontFamily",
			"fontColor",
			"fontBackgroundColor",
			"highlight",
			"|",
			"imageUpload",
			"insertTable",
			"mediaEmbed",
			"link",
			"codeBlock",
			"|",
			"outdent",
			"indent",
			"|",
			"blockQuote",
			"horizontalLine",
			"|",
			"bulletedList",
			"numberedList",
			"todoList",
			"|",
			"sourceEditing",
			"htmlEmbed",
			"specialCharacters",
			"subscript",
			"superscript",
			"superscript"
		],
		shouldNotGroupWhenFull: false
	},
	image: {
		resizeOptions: [
            {name: 'resizeImage:original',label: 'Original',value: null},
            {name: 'resizeImage:90', label: '90%', value: '90'},
            {name: 'resizeImage:80', label: '80%', value: '80'},
            {name: 'resizeImage:70', label: '70%', value: '70'},
            {name: 'resizeImage:60', label: '60%', value: '60'},
            {name: 'resizeImage:50', label: '50%', value: '50'},
            {name: 'resizeImage:40', label: '40%', value: '40'},
            {name: 'resizeImage:30', label: '30%', value: '30'},
            {name: 'resizeImage:20', label: '20%', value: '20'},
            {name: 'resizeImage:10', label: '10%', value: '10'}
        ],
        toolbar: [
            "imageStyle:inline", "imageStyle:block", "imageStyle:side",
            "|",
            "toggleImageCaption", "imageTextAlternative", "linkImage",

            "|",
            'resizeImage'
        ]
	},
	link: {
		decorators: {
			openInNewTab: {
				mode: 'manual',
				label: 'Open in a new tab',
				attributes: {
					target: '_blank',
					rel: 'noopener noreferrer'
				}
			}
		}
	},
	table: {
		contentToolbar: [
			'tableColumn',
			'tableRow',
			'mergeTableCells',
			"|",
			'tableProperties',
			'tableCellProperties'
		]
	},
	mediaEmbed: { previewsInData: true },
	// This value must be kept in sync with the language defined in webpack.config.js.
	language: 'ko'
};

 

6. 빌드 진행

yarn run build

또는 

npm run build

 

7.  빌드된 2개의 파일을 그누보드로 복사후 추가 설정을 진행한다.

# 빌드 위치 
/ckeditor5/packages/ckeditor5-build-classic/build

# 빌드된 파일 2개와 폴더 1개 
1. ckeditor.js
2. ckeditor.js.map
3. translations (폴더)

# 빌드된 파일 2개와 폴더 1개를 그누보드의 에디터 위치로 복사한다.
/plugin/editor/ckeditor5/build

# 툴바 커스텀시에는 아래의 파일을 수정한다.
/plugin/editor/ckeditor5/ckeditor_config.php

# /lib/common.lib.php 파일을 열어 "html_purifier" 함수가 수정되었는지 체크

8. 그누보드 글쓰기시 이미지의 캡션(caption)이 적용되지 않는 “html_purifier”함수 수정 필요.

function html_purifier($html)
{
    $f = file(G5_PLUGIN_PATH.'/htmlpurifier/safeiframe.txt');
    $domains = array();
    foreach($f as $domain){
        // 첫행이 # 이면 주석 처리
        if (!preg_match("/^#/", $domain)) {
            $domain = trim($domain);
            if ($domain)
                array_push($domains, $domain);
        }
    }
    // 내 도메인도 추가
    array_push($domains, $_SERVER['HTTP_HOST'].'/');
    $safeiframe = implode('|', $domains);

    include_once(G5_PLUGIN_PATH.'/htmlpurifier/HTMLPurifier.standalone.php');
    include_once(G5_PLUGIN_PATH.'/htmlpurifier/extend.video.php');
    $config = HTMLPurifier_Config::createDefault();
    // data/cache 디렉토리에 CSS, HTML, URI 디렉토리 등을 만든다.
    $config->set('Cache.SerializerPath', G5_DATA_PATH.'/cache');
    $config->set('HTML.SafeEmbed', false);
    $config->set('HTML.SafeObject', false);
    $config->set('Output.FlashCompat', false);
    $config->set('HTML.SafeIframe', true);
    if( (function_exists('check_html_link_nofollow') && check_html_link_nofollow('html_purifier')) ){
        $config->set('HTML.Nofollow', true);    // rel=nofollow 으로 스팸유입을 줄임
    }
    $config->set('URI.SafeIframeRegexp','%^(https?:)?//('.$safeiframe.')%');
    $config->set('Attr.AllowedFrameTargets', array('_blank'));
    //유튜브, 비메오 전체화면 가능하게 하기
    $config->set('Filter.Custom', array(new HTMLPurifier_Filter_Iframevideo()));

    // ckeditor 사용시 추가될 내용 시작
    $def = $config->getHTMLDefinition(true);
    $def->addElement('figure', 'Block', 'Flow', 'Common');
    $def->addElement('figcaption', 'Block', 'Flow', 'Common');
    // ckeditor 사용시 추가될 내용 끝

    $purifier = new HTMLPurifier($config);
    return run_replace('html_purifier_result', $purifier->purify($html), $purifier, $html);
}