JavaScript ile Zengin Metin Editörü Entegrasyonu

Bu yazıda, Bootstrap kullanarak temel bir form yapısı oluşturacak ve her bir form öğesini sırayla ekleyeceğiz. İlk olarak, kullanıcıdan ad, e-posta adresi ve talep türü gibi bilgilerin alınacağı alanları oluşturacağız. Son adımda ise, QuillJS metin editörünü entegre ederek kullanıcıya zengin metin düzenleme imkanı sunacağız.

1. Bootstrap Projesi için Temel İskeletin Oluşturulması

Bootstrap ile bir form tasarlamaya başlamadan önce, projenizin temel iskeletini oluşturmanız gerekmektedir. Bunun için Bootstrap’in en güncel sürümünü projenize dahil etmelisiniz. Bootstrap’i dahil etmek için CDN kullanabiliriz. Aşağıdaki örnekte, HTML sayfasının temel yapısını kurup, Bootstrap stil dosyasını dahil ediyoruz.

Örnek HTML İskeleti:


<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap Form Örneği</title>
    <!-- Bootstrap CSS dosyasını dahil et -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

    <div class="container mt-5">
        <h2>İletişim Formu</h2>
        <!-- Formun içeriği buraya eklenecek -->
    </div>

    <!-- Bootstrap JS dosyasını ve bağımlılıklarını dahil et -->
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js"></script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Bootstrap Form Örneği</title>

</head>

<body>

<h2>İletişim Formu</h2>

</div>

</body>

</html>

Açıklamalar:

Meta Tag’leri: Sayfanın karakter setini UTF-8 olarak belirledik ve mobil cihazlar için uyumlu hale getirdik (viewport).
Bootstrap CSS ve JS Bağlantıları: Bootstrap’in stil dosyası ve gerekli JavaScript dosyalarını CDN üzerinden dahil ettik.
Container: Formu sayfanın ortasında hizalamak için container sınıfını kullandık.

2. Form Yapısının Eklenmesi

Bootstrap, form öğelerini kolayca stilize etmek ve düzenlemek için birçok hazır sınıf sunar. Şimdi, oluşturduğumuz temel iskelet üzerine formu ekleyeceğiz. Bu formda, Bootstrap’in sağladığı form-group ve form-control sınıflarını kullanarak input, select ve textarea alanlarını düzenleyeceğiz.

Örnek Form Yapısı:


<div class="container mt-5">
    <h2>İletişim Formu</h2>
    <form>
        <!-- Ad Alanı -->
        <div class="mb-3">
            <label for="name" class="form-label">Adınız</label>
            <input type="text" class="form-control" id="name" placeholder="Adınızı girin">
        </div>

        <!-- E-posta Alanı -->
        <div class="mb-3">
            <label for="email" class="form-label">E-posta Adresiniz</label>
            <input type="email" class="form-control" id="email" placeholder="E-posta adresinizi girin">
        </div>

        <!-- Talep Türü Seçimi -->
        <div class="mb-3">
            <label for="requestType" class="form-label">Talep Türü</label>
            <select class="form-select" id="requestType">
                <option value="genel">Genel Soru</option>
                <option value="teknik">Teknik Destek</option>
                <option value="öneri">Öneri</option>
            </select>
        </div>

        <!-- Açıklama Alanı -->
        <div class="mb-3">
            <label for="message" class="form-label">Mesajınız</label>
            <textarea class="form-control" id="message" rows="4" placeholder="Mesajınızı buraya yazın"></textarea>
        </div>

        <!-- Gönder Butonu -->
        <button type="submit" class="btn btn-primary">Gönder</button>
    </form>
</div>

<h2>İletişim Formu</h2>

<form>

<label for="name" class="form-label">Adınız</label>

</div>

<label for="email" class="form-label">E-posta Adresiniz</label>

</div>

<label for="requestType" class="form-label">Talep Türü</label>

<option value="genel">Genel Soru</option>

<option value="teknik">Teknik Destek</option>

<option value="öneri">Öneri</option>

</select>

</div>

<label for="message" class="form-label">Mesajınız</label>

</div>

<button type="submit" class="btn btn-primary">Gönder</button>

</form>

</div>

Açıklamalar:

Form Etiketi: <form> etiketi ile formu başlattık. Bootstrap’in sağladığı mb-3 sınıfı, her form öğesinin altına boşluk ekler ve daha düzenli bir görünüm sağlar.
Ad Alanı (Text Input): Kullanıcıdan ad alacak bir metin kutusu (<input type="text">) ekledik. Bu input alanına form-control sınıfı eklenerek, Bootstrap’in varsayılan stilini uyguladık.
E-posta Alanı (Email Input): E-posta girişi için type="email" belirledik, böylece e-posta formatına uygun bir giriş yapılmasını sağladık.
Talep Türü (Select Menu): Kullanıcının seçebileceği bir dropdown menüsü (<select>) ekledik. form-select sınıfı ile Bootstrap’in seçme menüsüne stil ekledik.
Açıklama Alanı (Textarea): Kullanıcının uzun metin yazabilmesi için bir textarea ekledik. rows="4" ile kutunun yüksekliğini ayarladık.
Gönder Butonu: Formun sonunda bir gönderme butonu ekledik. btn btn-primary sınıfları ile butona Bootstrap’in mavi rengini ve stilini verdik.

3. QuillJS ile Zengin Metin Editörü Entegrasyonu

QuillJS, modern ve güçlü bir zengin metin editörüdür. Basit bir şekilde entegre edilebilir ve kullanıcılara metin biçimlendirme seçenekleri sunar. Bu adımda, formumuzdaki textarea yerine QuillJS metin editörünü kullanacağız.

QuillJS’in CDN ile Dahil Edilmesi ve Kullanılması

QuillJS’i projenize entegre etmek için, öncelikle Quill’in CSS ve JavaScript dosyalarını CDN üzerinden dahil etmemiz gerekecek. Ardından, textarea yerine QuillJS’in sunduğu bir editör alanı ekleyeceğiz.

QuillJS ile Formun Düzenlenmesi:


<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>İletişim Formu</title>
    
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
    
    <!-- QuillJS CSS -->
    <link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">

</head>
<body>

    <div class="container mt-5">
        <h2>İletişim Formu</h2>
        <form>
            <!-- Ad Alanı -->
            <div class="mb-3">
                <label for="name" class="form-label">Adınız</label>
                <input type="text" class="form-control" id="name" placeholder="Adınızı girin">
            </div>

            <!-- E-posta Alanı -->
            <div class="mb-3">
                <label for="email" class="form-label">E-posta Adresiniz</label>
                <input type="email" class="form-control" id="email" placeholder="E-posta adresinizi girin">
            </div>

            <!-- Talep Türü Seçimi -->
            <div class="mb-3">
                <label for="requestType" class="form-label">Talep Türü</label>
                <select class="form-select" id="requestType">
                    <option value="genel">Genel Soru</option>
                    <option value="teknik">Teknik Destek</option>
                    <option value="öneri">Öneri</option>
                </select>
            </div>

            <!-- QuillJS Zengin Metin Editörü -->
            <div class="mb-3">
                <label for="message" class="form-label">Mesajınız</label>
                <!-- QuillJS için editör alanı -->
                <div id="message" style="height: 200px;"></div>
            </div>

            <!-- Gönder Butonu -->
            <button type="submit" class="btn btn-primary">Gönder</button>
        </form>
    </div>

    <!-- QuillJS ve Bootstrap JS dosyaları -->
    <script src="https://cdn.quilljs.com/1.3.6/quill.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js"></script>

    <script>
        // QuillJS Editörünü başlatma
        var quill = new Quill('#message', {
            theme: 'snow',
            modules: {
                toolbar: [
                    [{ 'header': '1' }, { 'header': '2' }, { 'font': [] }],
                    [{ 'list': 'ordered' }, { 'list': 'bullet' }],
                    ['bold', 'italic', 'underline'],
                    ['link'],
                    [{ 'align': [] }],
                    ['clean']
                ]
            }
        });
    </script>

</body>
</html>

<!DOCTYPE html>

<head>

<title>İletişim Formu</title>

</head>

<body>

<h2>İletişim Formu</h2>

<form>

<label for="name" class="form-label">Adınız</label>

</div>

<label for="email" class="form-label">E-posta Adresiniz</label>

</div>

<label for="requestType" class="form-label">Talep Türü</label>

<option value="genel">Genel Soru</option>

<option value="teknik">Teknik Destek</option>

<option value="öneri">Öneri</option>

</select>

</div>

<label for="message" class="form-label">Mesajınız</label>

</div>

<button type="submit" class="btn btn-primary">Gönder</button>

</form>

</div>

// QuillJS Editörünü başlatma

var quill = new Quill('#message', {

theme: 'snow',

modules: {

toolbar: [

[{ 'header': '1' }, { 'header': '2' }, { 'font': [] }],

[{ 'list': 'ordered' }, { 'list': 'bullet' }],

['bold', 'italic', 'underline'],

['link'],

[{ 'align': [] }],

['clean']

]

}

});

</script>

</body>

</html>

Açıklamalar:

QuillJS CSS ve JS Bağlantıları: QuillJS’i projeye entegre etmek için gerekli olan stil ve JavaScript dosyalarını CDN üzerinden dahil ettik.
- https://cdn.quilljs.com/1.3.6/quill.snow.css ile QuillJS’in stil dosyasını,
- https://cdn.quilljs.com/1.3.6/quill.min.js ile JavaScript dosyasını ekledik.
Quill Editörü için Alan: div etiketi kullanarak QuillJS’in editörüne ait alanı oluşturduk. Bu alanın boyutunu style="height: 200px;" ile belirledik.
QuillJS Başlatma: new Quill('#message', {...}) ile QuillJS editörünü başlatıyoruz. Burada, toolbar (araç çubuğu) seçeneklerini özelleştirdik, böylece kullanıcı metin düzenlerken başlık, yazı tipi, listeler, kalın/italik/altı çizili metin ve bağlantılar gibi işlemleri yapabilir.
Gönderim İşlemi: QuillJS metin editörü ile toplanan veriyi form içinde kullanmak isterseniz, quill.root.innerHTML ile editörün içeriğini alabilir ve bir form gönderim işlemiyle backend’e gönderebilirsiniz.

Bu adımda, formu oluşturduk ve QuillJS’i entegre ederek kullanıcıya zengin metin düzenleme seçenekleri sunduk.

QuillJS’in dokümantasyonunda birçok ek ayar ve özellik bulunmaktadır. İşte QuillJS editörünü daha da özelleştirebilmek için yapabileceğiniz 4 farklı ayar örneği:

1. Font Seçeneklerini Eklemek

QuillJS editörüne özel yazı tipleri eklemek için font modülünü kullanabilirsiniz.


var quill = new Quill('#message', {
    theme: 'snow',
    modules: {
        toolbar: [
            [{ 'font': ['serif', 'monospace'] }]
        ]
    }
});

var quill = new Quill('#message', {

theme: 'snow',

modules: {

toolbar: [

[{ 'font': ['serif', 'monospace'] }]

]

}

});

Açıklama: Bu ayar, kullanıcıların metin yazarken iki yazı tipi seçeneği (serif ve monospace) arasından seçim yapmasını sağlar.

2. Metin Rengi Seçimi

Metin rengini değiştirmek için color modülünü kullanabilirsiniz.


var quill = new Quill('#message', {
    theme: 'snow',
    modules: {
        toolbar: [
            ['bold', 'italic', 'underline'],
            [{ 'color': [] }] // Renk paletini ekler
        ]
    }
});

var quill = new Quill('#message', {

theme: 'snow',

modules: {

toolbar: [

['bold', 'italic', 'underline'],

[{ 'color': [] }] // Renk paletini ekler

]

}

});

Açıklama: Bu, kullanıcıların metnin rengini değiştirmesine olanak tanır.

3. Resim Ekleme Özelliği

QuillJS’e resim eklemek için image modülünü kullanabilirsiniz.


var quill = new Quill('#message', {
    theme: 'snow',
    modules: {
        toolbar: [
            ['bold', 'italic', 'underline'],
            ['link'],
            ['image'] // Resim eklemek için toolbar öğesi
        ]
    }
});

var quill = new Quill('#message', {

theme: 'snow',

modules: {

toolbar: [

['bold', 'italic', 'underline'],

['link'],

['image'] // Resim eklemek için toolbar öğesi

]

}

});

Açıklama: Bu ayar, kullanıcıların metin düzenlerken resim eklemelerini sağlar.

4. Zemin Rengi Seçimi

Zemin rengini değiştirmek için QuillJS editörüne özel arka plan renkleri ekleyebilirsiniz.


var quill = new Quill('#message', {
    theme: 'snow',
    modules: {
        toolbar: [
            [{ 'background': [] }] // Arka plan rengi seçimi ekler
        ]
    }
});

var quill = new Quill('#message', {

theme: 'snow',

modules: {

toolbar: [

[{ 'background': [] }] // Arka plan rengi seçimi ekler

]

}

});

Açıklama: Bu ayar, metnin arka plan rengini değiştirmeye olanak tanır.

Bu ek ayarlarla QuillJS editörünü daha da özelleştirebilir ve kullanıcı deneyimini iyileştirebilirsiniz.

JavaScript ile Zengin Metin Editörü Entegrasyonu

1. Bootstrap Projesi için Temel İskeletin Oluşturulması

Açıklamalar:

2. Form Yapısının Eklenmesi

Açıklamalar:

3. QuillJS ile Zengin Metin Editörü Entegrasyonu

QuillJS’in CDN ile Dahil Edilmesi ve Kullanılması

Açıklamalar:

1. Font Seçeneklerini Eklemek

2. Metin Rengi Seçimi

3. Resim Ekleme Özelliği

4. Zemin Rengi Seçimi

Yorum Yap

İptal Et

1. Bootstrap Projesi için Temel İskeletin Oluşturulması

Açıklamalar:

2. Form Yapısının Eklenmesi

Açıklamalar:

3. QuillJS ile Zengin Metin Editörü Entegrasyonu

QuillJS’in CDN ile Dahil Edilmesi ve Kullanılması

Açıklamalar:

1. Font Seçeneklerini Eklemek

2. Metin Rengi Seçimi

3. Resim Ekleme Özelliği

4. Zemin Rengi Seçimi

Bunları da beğenebilirsiniz

Yorum Yap