{"id":1390,"date":"2021-05-14T18:51:55","date_gmt":"2021-05-14T15:51:55","guid":{"rendered":"https:\/\/www.etemkeskin.com\/?p=1390"},"modified":"2021-05-14T18:51:57","modified_gmt":"2021-05-14T15:51:57","slug":"how-to-integrate-ckeditor5-in-web-aplications-with-custom-plugins","status":"publish","type":"post","link":"https:\/\/www.etemkeskin.com\/index.php\/2021\/05\/14\/how-to-integrate-ckeditor5-in-web-aplications-with-custom-plugins\/","title":{"rendered":"How to Integrate ckeditor5 in Web Aplications with Custom Plugins"},"content":{"rendered":"\n

Ckeditor<\/strong> is the most used text editor in web applications. In this post, I will explain how to use CKeditor5<\/strong> in web applications we develop (laravel, codeigniter \u2026 in PHP, Django, Flask \u2026 in Python).<\/p>\n\n\n\n

Customizing the toolbar and integrating plugins into the editor in ckeditor5<\/strong> is a little different from ckeditor4<\/strong>. Plugins<\/strong> are installed as a package in CKEditor 5.<\/p>\n\n\n\n

Before installing Ckeditor5, the javascript package manager npm (node package manager) must be installed on computer.<\/p>\n\n\n\n

1. Installation<\/h3>\n\n\n\n

We will use the online buider on the official website to install the ckeditor on our computer. You can enter Ckeditor5 online builder<\/strong> from the link below.<\/p>\n\n\n\n

https:\/\/ckeditor.com\/ckeditor-5\/online-builder\/<\/a><\/p>\n\n\n\n

We choose the type of ckeditor we can choose on the page that comes up. I chose Classic<\/strong> here.<\/p>\n\n\n\n

\"\"
Ckeditor5 Editor Selection Screen<\/figcaption><\/figure>\n\n\n\n

In step 2,<\/strong> we choose the plugins we want in our editor. If you choose paid plugins, you will receive a license warning from console after installation.<\/p>\n\n\n\n

\"\"
Ckeditor5 plugin Selection Screen<\/figcaption><\/figure>\n\n\n\n

In step 3, <\/strong>we select the features we want the editor to have in the toolbar.<\/p>\n\n\n\n

\"\"
Ckeditor5 Toolbar Properties Selection Screen<\/figcaption><\/figure>\n\n\n\n

In step 4, <\/strong>we select in which language we will use the editor.<\/p>\n\n\n\n

\"\"
Ckeditor5 Language Selection Screen<\/figcaption><\/figure>\n\n\n\n

In the last step<\/strong>, we download ckeditor5 to our computer with the preferences we chose.<\/p>\n\n\n\n

\"\"
Ckeditor5 Language Selection Screen<\/figcaption><\/figure>\n\n\n\n

When we examine the package.json<\/strong> file of Ckeditor5 that we downloaded to computer, we can see the dependencies of ckeditor. We identified these dependencies with ckeditor online-builder<\/strong>. These plugins have not yet been downloaded on our computer, we will install them on our computer with npm<\/strong>.<\/p>\n\n\n\n

{\n  "name": "ckeditor5-custom-build",\n  "author": "CKSource",\n  "description": "A custom CKEditor 5 build made by the CKEditor 5 online builder.",\n  "version": "0.0.1",\n  "license": "SEE LICENSE IN LICENSE.md",\n  "private": true,\n  "main": ".\/build\/ckeditor.js",\n  "devDependencies": {\n    "@ckeditor\/ckeditor5-adapter-ckfinder": "^27.1.0",\n    "@ckeditor\/ckeditor5-alignment": "^27.1.0",\n    "@ckeditor\/ckeditor5-autoformat": "^27.1.0",\n    "@ckeditor\/ckeditor5-basic-styles": "^27.1.0",\n    "@ckeditor\/ckeditor5-block-quote": "^27.1.0",\n    "@ckeditor\/ckeditor5-code-block": "^27.1.0",\n    "@ckeditor\/ckeditor5-dev-utils": "^24.4.2",\n    "@ckeditor\/ckeditor5-dev-webpack-plugin": "^24.4.2",\n    "@ckeditor\/ckeditor5-editor-classic": "^27.1.0",\n    "@ckeditor\/ckeditor5-essentials": "^27.1.0",\n    "@ckeditor\/ckeditor5-font": "^27.1.0",\n    "@ckeditor\/ckeditor5-heading": "^27.1.0",\n    "@ckeditor\/ckeditor5-highlight": "^27.1.0",\n    "@ckeditor\/ckeditor5-horizontal-line": "^27.1.0",\n    "@ckeditor\/ckeditor5-html-embed": "^27.1.0",\n    "@ckeditor\/ckeditor5-image": "^27.1.0",\n    "@ckeditor\/ckeditor5-indent": "^27.1.0",\n    "@ckeditor\/ckeditor5-link": "^27.1.0",\n    "@ckeditor\/ckeditor5-list": "^27.1.0",\n    "@ckeditor\/ckeditor5-media-embed": "^27.1.0",\n    "@ckeditor\/ckeditor5-mention": "^27.1.0",\n    "@ckeditor\/ckeditor5-page-break": "^27.1.0",\n    "@ckeditor\/ckeditor5-paragraph": "^27.1.0",\n    "@ckeditor\/ckeditor5-paste-from-office": "^27.1.0",\n    "@ckeditor\/ckeditor5-remove-format": "^27.1.0",\n    "@ckeditor\/ckeditor5-special-characters": "^27.1.0",\n    "@ckeditor\/ckeditor5-table": "^27.1.0",\n    "@ckeditor\/ckeditor5-theme-lark": "^27.1.0",\n    "@ckeditor\/ckeditor5-typing": "^27.1.0",\n    "@ckeditor\/ckeditor5-word-count": "^27.1.0",\n    "@wiris\/mathtype-ckeditor5": "^7.26.0",\n    "css-loader": "^5.2.4",\n    "postcss": "^8.2.10",\n    "postcss-loader": "^4.2.0",\n    "raw-loader": "^4.0.2",\n    "style-loader": "^2.0.0",\n    "terser-webpack-plugin": "^4.2.3",\n    "webpack": "^4.46.0",\n    "webpack-cli": "^4.6.0"\n  },\n  "scripts": {\n    "build": "webpack --mode production",\n    "start": "npx http-server -o .\/sample -s -c-1"\n  }\n}<\/pre><\/div>\n\n\n\n
To install the packages in the package.json<\/strong> above, we open terminal screen <\/strong>in the ckeditor folder that we downloaded to our computer, in the directory where the package.json file is located. Then we install the packages on our computer by running the following npm code<\/strong>.<\/p>\n\n\n\n
npm install<\/pre><\/div>\n\n\n\n
When we run this code, a folder called node_modules<\/strong> will be created. The ckeditor packages will be installed in this folder.<\/p>\n\n\n\n
We can see which packages were imported into ckeditor5 in the ckeditor.js<\/strong> file in the src folder<\/strong> shown in the picture below. If we want to remove some of these packages later, it is necessary to remove both from the package.json file and from here.<\/p>\n\n\n\n
\"\"
Packages used by the Ckeditor5 editor<\/figcaption><\/figure>\n\n\n\n
In the last step<\/strong>, we will build ckeditor5 with all the packages by running the following code on the terminal screen<\/strong>.<\/p>\n\n\n\n
npm run build<\/pre><\/div>\n\n\n\n
2. Usage<\/h3>\n\n\n\n
To use ckeditor5 on HTML page, we import the ckeditor.js file from the build folder<\/strong>.<\/p>\n\n\n\n
<script src="\/ckeditor5\/build\/ckeditor.js'"><\/script><\/pre><\/div>\n\n\n\n
Then we define the id attribute <\/strong>of the textarea<\/strong> element as editor<\/strong>.<\/p>\n\n\n\n
<form action="" method="post">\n       <textarea name="" id="editor" class="ckEditor"><\/textarea>\n                <br>\n       <button type="submit" class="btn btn-primary float-right">Submit<\/button>       \n<\/form>   <\/pre><\/div>\n\n\n\n
In the last step, we create the editor by calling the ClassicEditor.create()<\/code><\/a> method between the javascript tags under our html page. We can make toolbar and other settings as in the code block below.<\/p>\n\n\n\n
<script>\nClassicEditor\n            .create(document.querySelector( '#editor' ), {\n\n                fontFamily: {\n                    options: [\n                        'default',\n                        'Ubuntu, Arial, sans-serif',\n                        'Ubuntu Mono, Courier New, Courier, monospace'\n                    ]\n                },\n                toolbar: {\n                    items: ['heading', '|', 'imageUpload', 'bold', 'italic', 'underline', 'fontFamily', 'undo', 'redo',\n                    'fontSize', , 'fontFamily', 'fontColor', 'fontBackgroundColor', 'htmlEmbed', 'link', 'insertTable', \n                    'mediaEmbed', 'bulletedList', 'numberedList', '|','MathType', 'blockQuote', 'specialCharacters'],\n                    shouldNotGroupWhenFull: true\n                },\n                image: {\n                    \/\/ You need to configure the image toolbar, too, so it uses the new style buttons.\n                    toolbar: ['imageTextAlternative', '|', 'imageStyle:alignLeft', 'imageStyle:full', 'imageStyle:alignRight', 'imageStyle:alignCenter'],\n\n                    styles: [\n                        \/\/ This option is equal to a situation where no style is applied.\n                        'full',\n                        'side',\n                        'alignCenter',\n                        \/\/ This represents an image aligned to the left.\n                        'alignLeft',\n                        \/\/ This represents an image aligned to the right.\n                        'alignRight'\n                    ]\n                }\n            })\n            .then(editor => {\n                \/\/ This place loads the adapter.\n                editor.plugins.get('FileRepository').createUploadAdapter = (loader) => {\n                    return new UploadAdapter(loader);\n                };\n            })\n            .catch(error => {\n                console.error(error);\n            });\n<\/script><\/pre><\/div>\n\n\n\n
When we render the html page we created from the web browser, we get the following screen of ckeditor5.<\/p>\n\n\n\n
\"\"
Ckeditor5 Image<\/figcaption><\/figure>\n\n\n\n
3. Image Uploading<\/h3>\n\n\n\n
There are several methods if you want Ckeditor5 to work with image files. In this post I will explain about the easiest and most convenient. <\/p>\n\n\n\n
First we create a file called imageupload.js<\/strong> inside the ckeditor5 folder. We import this file into our project.<\/p>\n\n\n\n
<script src="\/ckeditor5\/build\/ckeditor.js'"><\/script>\n<script src="\/ckeditor5\/imageupload.js"><\/script><\/pre><\/div>\n\n\n\n
Then we paste the following code block into this file by updating the api that will be used in the backend (ie server). In the code block below, jquery<\/strong> is used. If you want, you can use axios<\/strong> or fetch api<\/strong>. In the above code block, it is shown how to use imageupload<\/strong> in ClassicEditor.create()<\/code><\/a> method.<\/p>\n\n\n\n
In this way, you will be able to use your image files with the editor easily.<\/p>\n\n\n\n
class UploadAdapter {\n    constructor(loader) {\n        this.loader = loader;\n    }\n\n    upload() {\n        return this.loader.file\n            .then(uploadedFile => {\n                return new Promise((resolve, reject) => {\n                    const data = new FormData();\n                    data.append('upload', uploadedFile);\n                    $.ajax({\n                        url: ADMIN_URL + '\/api\/upload_file.php',\n                        type: 'POST',\n                        data: data,\n                        dataType: 'json',\n                        processData: false,\n                        contentType: false,\n                        success: response => {\n                            resolve({\n                                default: response.url\n                            });\n                        },\n                        error: () => {\n                            reject('Upload failed');\n                        }\n                    });\n                });\n            });\n    }\n\n    abort() {\n    }\n}<\/pre><\/div>\n\n\n\n
Good luck\u2026<\/p>\n","protected":false},"excerpt":{"rendered":"
Ckeditor is the most used text editor in web applications. In this post, I will explain how to use CKeditor5 in web applications we develop (laravel, codeigniter \u2026 in PHP, Django, Flask \u2026 in Python). Customizing the toolbar and integrating plugins into the editor in ckeditor5 is a little different from ckeditor4. Plugins are installed […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[1,50,2,4],"tags":[],"yoast_head":"\nHow to Integrate ckeditor5 in Web Aplications with Custom Plugins - blog website<\/title>\n<meta name=\"description\" content=\"Ckeditor is the most used text editor in web applications. In this post, I will explain how to use CKeditor5 in web applications we develop (laravel, codeigniter \u2026 in PHP, Django, Flask \u2026 in Python).Customizing the toolbar and integrating plugins into the editor in ckeditor5 is a little different from ckeditor4. Plugins are installed as a package in CKEditor 5.Before installing Ckeditor5, the javascript package manager npm (node package manager) must be installed on computer.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.etemkeskin.com\/index.php\/2021\/05\/14\/how-to-integrate-ckeditor5-in-web-aplications-with-custom-plugins\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Integrate ckeditor5 in Web Aplications with Custom Plugins - blog website\" \/>\n<meta property=\"og:description\" content=\"Ckeditor is the most used text editor in web applications. In this post, I will explain how to use CKeditor5 in web applications we develop (laravel, codeigniter \u2026 in PHP, Django, Flask \u2026 in Python).Customizing the toolbar and integrating plugins into the editor in ckeditor5 is a little different from ckeditor4. Plugins are installed as a package in CKEditor 5.Before installing Ckeditor5, the javascript package manager npm (node package manager) must be installed on computer.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.etemkeskin.com\/index.php\/2021\/05\/14\/how-to-integrate-ckeditor5-in-web-aplications-with-custom-plugins\/\" \/>\n<meta property=\"og:site_name\" content=\"blog website\" \/>\n<meta property=\"article:published_time\" content=\"2021-05-14T15:51:55+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-05-14T15:51:57+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.etemkeskin.com\/wp-content\/uploads\/2021\/05\/image.png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Tahmini okuma s\u00fcresi\" \/>\n\t<meta name=\"twitter:data1\" content=\"6 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.etemkeskin.com\/#website\",\"url\":\"https:\/\/www.etemkeskin.com\/\",\"name\":\"blog website\",\"description\":\"Etem KESK\\u0130N\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":\"https:\/\/www.etemkeskin.com\/?s={search_term_string}\",\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"tr\"},{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/www.etemkeskin.com\/index.php\/2021\/05\/14\/how-to-integrate-ckeditor5-in-web-aplications-with-custom-plugins\/#primaryimage\",\"inLanguage\":\"tr\",\"url\":\"https:\/\/www.etemkeskin.com\/wp-content\/uploads\/2021\/05\/image.png\",\"contentUrl\":\"https:\/\/www.etemkeskin.com\/wp-content\/uploads\/2021\/05\/image.png\",\"width\":1045,\"height\":836},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.etemkeskin.com\/index.php\/2021\/05\/14\/how-to-integrate-ckeditor5-in-web-aplications-with-custom-plugins\/#webpage\",\"url\":\"https:\/\/www.etemkeskin.com\/index.php\/2021\/05\/14\/how-to-integrate-ckeditor5-in-web-aplications-with-custom-plugins\/\",\"name\":\"How to Integrate ckeditor5 in Web Aplications with Custom Plugins - blog website\",\"isPartOf\":{\"@id\":\"https:\/\/www.etemkeskin.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.etemkeskin.com\/index.php\/2021\/05\/14\/how-to-integrate-ckeditor5-in-web-aplications-with-custom-plugins\/#primaryimage\"},\"datePublished\":\"2021-05-14T15:51:55+00:00\",\"dateModified\":\"2021-05-14T15:51:57+00:00\",\"author\":{\"@id\":\"https:\/\/www.etemkeskin.com\/#\/schema\/person\/dcbc30282861ce578b96a79ce8789629\"},\"description\":\"Ckeditor is the most used text editor in web applications. In this post, I will explain how to use CKeditor5 in web applications we develop (laravel, codeigniter \\u2026 in PHP, Django, Flask \\u2026 in Python).Customizing the toolbar and integrating plugins into the editor in ckeditor5 is a little different from ckeditor4. Plugins are installed as a package in CKEditor 5.Before installing Ckeditor5, the javascript package manager npm (node package manager) must be installed on computer.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.etemkeskin.com\/index.php\/2021\/05\/14\/how-to-integrate-ckeditor5-in-web-aplications-with-custom-plugins\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.etemkeskin.com\/index.php\/2021\/05\/14\/how-to-integrate-ckeditor5-in-web-aplications-with-custom-plugins\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.etemkeskin.com\/index.php\/2021\/05\/14\/how-to-integrate-ckeditor5-in-web-aplications-with-custom-plugins\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Ana sayfa\",\"item\":\"https:\/\/www.etemkeskin.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Integrate ckeditor5 in Web Aplications with Custom Plugins\"}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.etemkeskin.com\/#\/schema\/person\/dcbc30282861ce578b96a79ce8789629\",\"name\":\"etemkeskin\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/www.etemkeskin.com\/#personlogo\",\"inLanguage\":\"tr\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/6af0148b790691ed24ae245fb3dc773b?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/6af0148b790691ed24ae245fb3dc773b?s=96&d=mm&r=g\",\"caption\":\"etemkeskin\"},\"url\":\"https:\/\/www.etemkeskin.com\/index.php\/author\/etemkeskinyahoo-com\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","_links":{"self":[{"href":"https:\/\/www.etemkeskin.com\/index.php\/wp-json\/wp\/v2\/posts\/1390"}],"collection":[{"href":"https:\/\/www.etemkeskin.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.etemkeskin.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.etemkeskin.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.etemkeskin.com\/index.php\/wp-json\/wp\/v2\/comments?post=1390"}],"version-history":[{"count":92,"href":"https:\/\/www.etemkeskin.com\/index.php\/wp-json\/wp\/v2\/posts\/1390\/revisions"}],"predecessor-version":[{"id":1498,"href":"https:\/\/www.etemkeskin.com\/index.php\/wp-json\/wp\/v2\/posts\/1390\/revisions\/1498"}],"wp:attachment":[{"href":"https:\/\/www.etemkeskin.com\/index.php\/wp-json\/wp\/v2\/media?parent=1390"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.etemkeskin.com\/index.php\/wp-json\/wp\/v2\/categories?post=1390"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.etemkeskin.com\/index.php\/wp-json\/wp\/v2\/tags?post=1390"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}