{"id":1457,"date":"2021-05-14T18:17:25","date_gmt":"2021-05-14T15:17:25","guid":{"rendered":"https:\/\/www.etemkeskin.com\/?p=1457"},"modified":"2021-05-14T18:17:27","modified_gmt":"2021-05-14T15:17:27","slug":"web-uygulamalarina-ckeditor5-i-secilen-pluginler-ile-birlikte-nasil-entegre-edilir","status":"publish","type":"post","link":"https:\/\/www.etemkeskin.com\/index.php\/tr\/2021\/05\/14\/web-uygulamalarina-ckeditor5-i-secilen-pluginler-ile-birlikte-nasil-entegre-edilir\/","title":{"rendered":"Web Uygulamalar\u0131na CKeditor5′ i Se\u00e7ilen Pluginler ile Birlikte Nas\u0131l Entegre Edilir?"},"content":{"rendered":"\n

Ckeditor<\/strong> web uygulamalar\u0131nda en \u00e7ok kullan\u0131lan yaz\u0131 edit\u00f6r\u00fcd\u00fcr. Bu yaz\u0131da CKeditor5′ i geli\u015ftirdi\u011fimiz web uygulamalar\u0131nda(PHP’ deki laravel, codeigniter …, Python’ da Django, Flask … gibi frameworklerle geli\u015ftirilen) nas\u0131l kullan\u0131laca\u011f\u0131n\u0131 anlataca\u011f\u0131m.<\/p>\n\n\n\n

Ckeditor5′ te toolbar\u0131n \u00f6zelle\u015ftirilmesi ve pluginlerin<\/strong> edit\u00f6re entegre edilmesi ckedit\u00f6r4<\/strong>‘ ten biraz farkl\u0131d\u0131r. CKEditor 5’te pluginler paket olarak y\u00fcklenir. <\/p>\n\n\n\n

Ckeditor5 y\u00fcklemeden \u00f6nce bilgisayar\u0131m\u0131zda javascript paket y\u00f6neticisi npm<\/strong>(node paket y\u00f6neticisi)’ in y\u00fckl\u00fc olmas\u0131 gerekiyor.<\/p>\n\n\n\n

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

ckedit\u00f6r\u00fc bilgisayar\u0131m\u0131za y\u00fcklemek i\u00e7in resmi web sitesindeki online buider<\/strong>‘ \u0131 kullanaca\u011f\u0131z. Ckeditor5 online builder’ a a\u015fa\u011f\u0131daki linkten ula\u015fabilirsiniz.<\/p>\n\n\n\n

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

Kar\u015f\u0131m\u0131za gelen sayfada tercih edebilece\u011fimiz ckedit\u00f6r t\u00fcr\u00fcn\u00fc se\u00e7iyoruz. Ben burda Classic<\/strong>‘ i se\u00e7tim<\/p>\n\n\n\n

\"\"
Ckeditor5 Edit\u00f6r Se\u00e7me Ekran\u0131<\/figcaption><\/figure>\n\n\n\n

2. ad\u0131mda<\/strong> edit\u00f6r\u00fcm\u00fczde olmas\u0131n\u0131 istedi\u011fimiz pluginleri se\u00e7iyoruz. E\u011fer \u00fccretli pluginleri se\u00e7erseniz kurulumdan sonra console’ dan lisans uyar\u0131s\u0131 alacaks\u0131n\u0131z.<\/p>\n\n\n\n

\"\"
Ckeditor5 plugin Se\u00e7me Ekan\u0131<\/figcaption><\/figure>\n\n\n\n

3. ad\u0131mda<\/strong> edit\u00f6r\u00fcn toolbar\u0131nda olmas\u0131n\u0131 istedi\u011fimiz \u00f6zelliklerini belirliyoruz.<\/p>\n\n\n\n

\"\"
Ckeditor5 Toolbar \u00d6zelliklerini Belirleme Ekran\u0131<\/figcaption><\/figure>\n\n\n\n

4. ad\u0131mda<\/strong> edit\u00f6r\u00fc hangi dilde kullanaca\u011f\u0131m\u0131z belirliyoruz.<\/p>\n\n\n\n

\"\"
Ckeditor5 Dil Belirleme Ekran\u0131<\/figcaption><\/figure>\n\n\n\n

Son ad\u0131mda<\/strong> se\u00e7ti\u011fimiz tercihlerle bilgisayar\u0131m\u0131za ckeditor5′ i indiriyoruz.<\/p>\n\n\n\n

\"\"
Ckeditor5 Dil Belirleme Ekran\u0131<\/figcaption><\/figure>\n\n\n\n

Bilgisayar\u0131m\u0131za indirdi\u011fimiz Ckeditor5′ in package.json<\/strong> dosyas\u0131na bakt\u0131\u011f\u0131m\u0131zda ckeditor’ \u00fcn ba\u011f\u0131ml\u0131l\u0131klar\u0131n\u0131 g\u00f6rebiliriz. Bu ba\u011f\u0131ml\u0131l\u0131klar\u0131 ckeditor online-builder ile biz belirledik. Bu pluginler bilgisayar\u0131m\u0131za daha y\u00fcklenmedi bunlar\u0131 npm<\/strong> ile bilgisayar\u0131m\u0131za y\u00fckleyece\u011fiz. <\/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
Yukar\u0131daki package.json<\/strong>‘ daki paketleri y\u00fcklemek i\u00e7in  terminal<\/strong> ekran\u0131m\u0131z\u0131, bilgisayar\u0131m\u0131za indirdi\u011fimiz ckeditor klas\u00f6r\u00fcnde yani package.json<\/strong> dosyas\u0131n\u0131n bulundu\u011fu dizinde a\u00e7\u0131yoruz. Daha sonra a\u015fa\u011f\u0131daki a\u015fa\u011f\u0131daki npm kodunu \u00e7al\u0131\u015ft\u0131rarak paketleri bilgisayar\u0131m\u0131za y\u00fckl\u00fcyoruz.<\/p>\n\n\n\n
npm install<\/pre><\/div>\n\n\n\n
Bu kodu \u00e7al\u0131\u015ft\u0131rd\u0131\u011f\u0131m\u0131zda node_module<\/strong>s ad\u0131nda klas\u00f6r olu\u015facak. Bu klas\u00f6re  ckeditor paketleri y\u00fcklenecektir.<\/p>\n\n\n\n
A\u015fa\u011f\u0131daki resimde g\u00f6r\u00fclen src klas\u00f6r\u00fcn\u00fcn i\u00e7inde olan ckeditor.js <\/strong>dosyas\u0131nda ckeditor5′ e hangi paketlerin import<\/strong> edildi\u011fini g\u00f6rebiliriz. E\u011fer daha sonra bu paketlerden baz\u0131lar\u0131n\u0131 kald\u0131rmak istersek hem package.json dosyas\u0131ndan hem de buradan kald\u0131rmak gerekiyor.<\/p>\n\n\n\n
\"\"
Ckeditor5 edit\u00f6r\u00fcn\u00fcn kulland\u0131\u011f\u0131 paketler<\/figcaption><\/figure>\n\n\n\n
Son ad\u0131mda<\/strong> ckeditor5′ i t\u00fcm paketler ile birlikte a\u015fa\u011f\u0131daki kodu terminal ekran\u0131nda \u00e7al\u0131\u015ft\u0131rarak build edece\u011fiz.<\/p>\n\n\n\n
npm run build<\/pre><\/div>\n\n\n\n
2. Kullan\u0131m<\/h3>\n\n\n\n
ckeditor5′ i HTML sayfam\u0131zda kullanmak i\u00e7in build klas\u00f6r\u00fc<\/strong>n\u00fcn i\u00e7indeki ckeditor.js dosyas\u0131n\u0131 import ediyoruz.<\/p>\n\n\n\n
<script src="\/ckeditor5\/build\/ckeditor.js'"><\/script><\/pre><\/div>\n\n\n\n
Daha sonra textarea<\/strong> elementin id’ sini editor<\/strong> olarak tan\u0131ml\u0131yoruz.<\/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
 Son ad\u0131mda html sayfam\u0131z\u0131n alt\u0131na javascript taglerinin aras\u0131na ClassicEditor.create()<\/code><\/a> metodunu \u00e7a\u011f\u0131rarak edit\u00f6r\u00fc olu\u015fturuyoruz. A\u015fa\u011f\u0131daki kod blo\u011fundaki gibi tollbara ve di\u011fer ayarlar\u0131 yapabiliriz.  <\/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
Olu\u015fturdu\u011fumuz html sayfas\u0131n\u0131 web taray\u0131c\u0131dan \u00e7a\u011f\u0131rd\u0131\u011f\u0131m\u0131zda ckeditor5 ‘in a\u015fa\u011f\u0131daki g\u00f6r\u00fcnt\u00fcs\u00fcn\u00fc elde ederiz.<\/p>\n\n\n\n
\"\"
Ckeditor5 G\u00f6r\u00fcnt\u00fcs\u00fc<\/figcaption><\/figure>\n\n\n\n
3. Resim Y\u00fckleme<\/h3>\n\n\n\n
Ckeditor5′ in resim dosyalar\u0131 ile birlikte \u00e7al\u0131\u015fmas\u0131n\u0131 istiyorsan\u0131z bunun birka\u00e7 y\u00f6ntemi var. Bu yaz\u0131da en kolay\u0131 ve en uygunundan bahsedece\u011fim. <\/p>\n\n\n\n
\u0130lk \u00f6nce ckeditor5 klas\u00f6r\u00fcn\u00fcn i\u00e7ine imageupload.js<\/strong> ad\u0131nda bir dosya olu\u015fturuyoruz. Bu dosyay\u0131 projemize \u00e7a\u011f\u0131r\u0131yoruz.<\/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
Daha sonra bu dosyan\u0131n i\u00e7ine a\u015fa\u011f\u0131daki kod blo\u011funu backendde(yani server’da ) hangi api kullan\u0131lacaksa o ayarlar\u0131 yaparak yap\u0131\u015ft\u0131r\u0131yoruz. A\u015fa\u011f\u0131daki kod blo\u011funda jquery<\/strong> kullan\u0131ld\u0131. Siz isterseniz axios<\/strong> yada fetch api<\/strong>sini kullanabilirsiniz. Yukar\u0131daki kod blo\u011funda ClassicEditor.create()<\/code><\/a> metodunun i\u00e7inde imageupload<\/strong> nas\u0131l kullan\u0131ld\u0131\u011f\u0131 g\u00f6sterilmi\u015ftir.<\/p>\n\n\n\n
B\u00f6ylelikle resim dosyalar\u0131n\u0131z\u0131 da edit\u00f6rle birlikte rahatl\u0131kla kullanabilmi\u015f olacaks\u0131n\u0131z.<\/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
Ba\u015far\u0131lar…<\/p>\n","protected":false},"excerpt":{"rendered":"
Ckeditor web uygulamalar\u0131nda en \u00e7ok kullan\u0131lan yaz\u0131 edit\u00f6r\u00fcd\u00fcr. Bu yaz\u0131da CKeditor5′ i geli\u015ftirdi\u011fimiz web uygulamalar\u0131nda(PHP’ deki laravel, codeigniter …, Python’ da Django, Flask … gibi frameworklerle geli\u015ftirilen) nas\u0131l kullan\u0131laca\u011f\u0131n\u0131 anlataca\u011f\u0131m. Ckeditor5′ te toolbar\u0131n \u00f6zelle\u015ftirilmesi ve pluginlerin edit\u00f6re entegre edilmesi ckedit\u00f6r4‘ ten biraz farkl\u0131d\u0131r. CKEditor 5’te pluginler paket olarak y\u00fcklenir. Ckeditor5 y\u00fcklemeden \u00f6nce bilgisayar\u0131m\u0131zda javascript paket […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[18,52,28],"tags":[],"yoast_head":"\nWeb Uygulamalar\u0131na CKeditor5' i Se\u00e7ilen Pluginler ile Birlikte Nas\u0131l Entegre Edilir? - blog website<\/title>\n<meta name=\"description\" content=\"Ckeditor web uygulamalar\u0131nda en \u00e7ok kullan\u0131lan yaz\u0131 edit\u00f6r\u00fcd\u00fcr. Bu yaz\u0131da CKeditor5' i geli\u015ftirdi\u011fimiz web uygulamalar\u0131nda(PHP' deki laravel, codeigniter ..., Python' da Django, Flask ... gibi frameworklerle geli\u015ftirilen) nas\u0131l kullan\u0131laca\u011f\u0131n\u0131 anlataca\u011f\u0131m.Ckeditor5' te toolbar\u0131n \u00f6zelle\u015ftirilmesi ve pluginlerin edit\u00f6re entegre edilmesi ckedit\u00f6r4' ten biraz farkl\u0131d\u0131r. CKEditor 5'te pluginler paket olarak y\u00fcklenir. Ckeditor5 y\u00fcklemeden \u00f6nce bilgisayar\u0131m\u0131zda javascript paket y\u00f6neticisi npm(node paket y\u00f6neticisi)' in y\u00fckl\u00fc olmas\u0131 gerekiyor.\" \/>\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\/tr\/2021\/05\/14\/web-uygulamalarina-ckeditor5-i-secilen-pluginler-ile-birlikte-nasil-entegre-edilir\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Web Uygulamalar\u0131na CKeditor5' i Se\u00e7ilen Pluginler ile Birlikte Nas\u0131l Entegre Edilir? - blog website\" \/>\n<meta property=\"og:description\" content=\"Ckeditor web uygulamalar\u0131nda en \u00e7ok kullan\u0131lan yaz\u0131 edit\u00f6r\u00fcd\u00fcr. Bu yaz\u0131da CKeditor5' i geli\u015ftirdi\u011fimiz web uygulamalar\u0131nda(PHP' deki laravel, codeigniter ..., Python' da Django, Flask ... gibi frameworklerle geli\u015ftirilen) nas\u0131l kullan\u0131laca\u011f\u0131n\u0131 anlataca\u011f\u0131m.Ckeditor5' te toolbar\u0131n \u00f6zelle\u015ftirilmesi ve pluginlerin edit\u00f6re entegre edilmesi ckedit\u00f6r4' ten biraz farkl\u0131d\u0131r. CKEditor 5'te pluginler paket olarak y\u00fcklenir. Ckeditor5 y\u00fcklemeden \u00f6nce bilgisayar\u0131m\u0131zda javascript paket y\u00f6neticisi npm(node paket y\u00f6neticisi)' in y\u00fckl\u00fc olmas\u0131 gerekiyor.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.etemkeskin.com\/index.php\/tr\/2021\/05\/14\/web-uygulamalarina-ckeditor5-i-secilen-pluginler-ile-birlikte-nasil-entegre-edilir\/\" \/>\n<meta property=\"og:site_name\" content=\"blog website\" \/>\n<meta property=\"article:published_time\" content=\"2021-05-14T15:17:25+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-05-14T15:17:27+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=\"7 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\/tr\/2021\/05\/14\/web-uygulamalarina-ckeditor5-i-secilen-pluginler-ile-birlikte-nasil-entegre-edilir\/#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\/tr\/2021\/05\/14\/web-uygulamalarina-ckeditor5-i-secilen-pluginler-ile-birlikte-nasil-entegre-edilir\/#webpage\",\"url\":\"https:\/\/www.etemkeskin.com\/index.php\/tr\/2021\/05\/14\/web-uygulamalarina-ckeditor5-i-secilen-pluginler-ile-birlikte-nasil-entegre-edilir\/\",\"name\":\"Web Uygulamalar\\u0131na CKeditor5' i Se\\u00e7ilen Pluginler ile Birlikte Nas\\u0131l Entegre Edilir? - blog website\",\"isPartOf\":{\"@id\":\"https:\/\/www.etemkeskin.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.etemkeskin.com\/index.php\/tr\/2021\/05\/14\/web-uygulamalarina-ckeditor5-i-secilen-pluginler-ile-birlikte-nasil-entegre-edilir\/#primaryimage\"},\"datePublished\":\"2021-05-14T15:17:25+00:00\",\"dateModified\":\"2021-05-14T15:17:27+00:00\",\"author\":{\"@id\":\"https:\/\/www.etemkeskin.com\/#\/schema\/person\/dcbc30282861ce578b96a79ce8789629\"},\"description\":\"Ckeditor web uygulamalar\\u0131nda en \\u00e7ok kullan\\u0131lan yaz\\u0131 edit\\u00f6r\\u00fcd\\u00fcr. Bu yaz\\u0131da CKeditor5' i geli\\u015ftirdi\\u011fimiz web uygulamalar\\u0131nda(PHP' deki laravel, codeigniter ..., Python' da Django, Flask ... gibi frameworklerle geli\\u015ftirilen) nas\\u0131l kullan\\u0131laca\\u011f\\u0131n\\u0131 anlataca\\u011f\\u0131m.Ckeditor5' te toolbar\\u0131n \\u00f6zelle\\u015ftirilmesi ve pluginlerin edit\\u00f6re entegre edilmesi ckedit\\u00f6r4' ten biraz farkl\\u0131d\\u0131r. CKEditor 5'te pluginler paket olarak y\\u00fcklenir. Ckeditor5 y\\u00fcklemeden \\u00f6nce bilgisayar\\u0131m\\u0131zda javascript paket y\\u00f6neticisi npm(node paket y\\u00f6neticisi)' in y\\u00fckl\\u00fc olmas\\u0131 gerekiyor.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.etemkeskin.com\/index.php\/tr\/2021\/05\/14\/web-uygulamalarina-ckeditor5-i-secilen-pluginler-ile-birlikte-nasil-entegre-edilir\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.etemkeskin.com\/index.php\/tr\/2021\/05\/14\/web-uygulamalarina-ckeditor5-i-secilen-pluginler-ile-birlikte-nasil-entegre-edilir\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.etemkeskin.com\/index.php\/tr\/2021\/05\/14\/web-uygulamalarina-ckeditor5-i-secilen-pluginler-ile-birlikte-nasil-entegre-edilir\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Ana sayfa\",\"item\":\"https:\/\/www.etemkeskin.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Web Uygulamalar\\u0131na CKeditor5′ i Se\\u00e7ilen Pluginler ile Birlikte Nas\\u0131l Entegre Edilir?\"}]},{\"@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\/1457"}],"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=1457"}],"version-history":[{"count":6,"href":"https:\/\/www.etemkeskin.com\/index.php\/wp-json\/wp\/v2\/posts\/1457\/revisions"}],"predecessor-version":[{"id":1463,"href":"https:\/\/www.etemkeskin.com\/index.php\/wp-json\/wp\/v2\/posts\/1457\/revisions\/1463"}],"wp:attachment":[{"href":"https:\/\/www.etemkeskin.com\/index.php\/wp-json\/wp\/v2\/media?parent=1457"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.etemkeskin.com\/index.php\/wp-json\/wp\/v2\/categories?post=1457"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.etemkeskin.com\/index.php\/wp-json\/wp\/v2\/tags?post=1457"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}