Blog

Merhabalar, bugün projelerimiz için olmazsa olmaz bir text editör olan ckeditörün Laravel projelerimiz vuejs ile entegrasyonu kısmında tercrübelerimi paylaşmaya çalışacağım.

Bilmeyenler için!

CKEditor, doğrudan web sayfalarının veya çevrimiçi uygulamaların içine içerik yazmayı sağlayan WYSIWYG zengin bir metin editörüdür. Temel kodu JavaScript ile yazılmıştır ve CKSource tarafından geliştirilmiş. Editör’ün kendisi ücretsiz olup paketlere göre farklılık göstermektedir.

CKFinder ise CKSource tarafından geliştirilen bir dosya yöneticisidir. Dosyalarınızı ve resimlerini sisteminize yükleyip, editörünüze dahil etmenizi kolaylaştırmaktadır.

Laravel Projesinde VueJS için CKeditör Ekleme

Laravel projesinin kurulu olduğunu dizine gelerek aşağıdaki npm komutunu çalıştırmanız gerekmektedir. Aşağıdaki komut parametlerinde CKEditör 5 ve classic paketlerini node_modules klasörlerine kurulacaktır.

npm install --save @ckeditor/ckeditor5-vue @ckeditor/ckeditor5-build-classic

Yukarıdaki işlemin tamamlanmasından sonra yapacağınız işlem ise şu şekilde olacaktır.

Vuejs template dosyanızı açarak;

<template>
    <div>
        <ckeditor :editor="editor" v-model="editorData" :config="editorConfig"></ckeditor>
    </div>
</template>

<script>
import CKEditor from '@ckeditor/ckeditor5-vue';
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';

Vue.use( CKEditor );
export default {
        name: 'test',
        data() {
            return {
                editor: ClassicEditor,
                editorData: '<p>Yazınız.</p>',
                editorConfig: {
                }
            };
        }
    }
</script>

Bu kısma kadar sadece ckeditör’ümüzü projemize dahil ettik. Asıl hedefimiz bizim ckfinder projemize dahil etmek.

Ckeditör CkFinder Paketin kurulumu

Bu kısımda aslında github’da sevdiğim bir public kütüphane var ckfinder bu paketi kullanarak laravel projenize ckfinder kurulumunu hızlı bir şekilde gerçekleştirebiliyorsunuz.
Bu kısmı geçiyorum çünkü github üzerinde kurulum detaylı ve güzel bir şekilde anlatılmaktadır.

Vuejs ckeditor ckfinder ekleme

Bu kısımda biraz sancılı olabiliyor, çünkü çok detaylı bir anlatım ve örneklemeler bulunmamakta. Benim paylaşacağım kısmı bu kadar açık bir şekilde olanı bende görmedim 🙂 Laravel 6.x üzerinde bu kısım sorunsuz olarak çalışmaktadır.

<template>
    <div>
        <ckeditor :editor="editor" v-model="editorData" :config="editorConfig"></ckeditor>
    </div>
</template>

<script>
import CKEditor from '@ckeditor/ckeditor5-vue';
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';

Vue.use( CKEditor );
export default {
        name: 'test',
        data() {
            return {
                editor: ClassicEditor,
                editorData: '<p>Yazınız.</p>',
                editorConfig: {
toolbar: ['ckfinder', 'imageUpload', '|', 'heading', '|', 'bold', 'italic', '|', 'undo', 'redo'],
                    heading: {
                        options: [
                            {model: 'paragraph', title: 'Paragraph', class: 'ck-heading_paragraph'},
                            {model: 'heading1', view: 'h1', title: 'Heading 1', class: 'ck-heading_heading1'},
                            {model: 'heading2', view: 'h2', title: 'Heading 2', class: 'ck-heading_heading2'}
                        ]
                    },
                    ckfinder: {
                        uploadUrl: '/ckfinder/core/connector/php/connector',
                        options: {},
                    }
                }
            };
        }
    }
</script>

Yukarıdaki kısımda hiç bir şekilde ckfinder paketini include etmiyoruz, bu kısımda dikkat etmemiz gereken en önemli nokta bir önceki adımda github ckfinder kurulum aşamasıdır.
master template kısmınızda yada templatenizi çağırdığınız kısımda;

<script type="text/javascript" src="/js/ckfinder/ckfinder.js"></script>
<script>CKFinder.config( { connectorPath: '/ckfinder/connector' } );</script>

kısmı eklemeniz son derece önemlidir! Bu kısmı unutmanız halinde ckfinder tam olarak çalışmayacak veya modal hatası gibi benzer hata çıktıları alacaksınız.

Yukarıdaki adımları yaparken sorun yaşarsanız yazmanız yeterlidir. Elimden geldiğince mesajlarınıza cevap vermeye çalışacağım.

Yakın zamanda kısa bir örnek projeyide sizler ile paylaşıyor olacağım.