Summernote'u Nuxt 3 İçine Kurma ve Kullanma Rehberi

Summernote, kullanıcı dostu bir WYSIWYG (What You See Is What You Get) metin editörüdür. Nuxt 3 projenizde Summernote'u entegre ederek zengin metin editörü özelliklerini kullanabilirsiniz. Bu rehberde, Summernote'u Nuxt 3 projesine nasıl ekleyeceğinizi ve nasıl kullanacağınızı öğreneceksiniz.

1. Gereksinimler

Nuxt 3 projesi oluşturulmuş olmalı.
Node.js ve npm/yarn kurulu olmalı.

2. Summernote'u Projeye Ekleme

Adım 1: Summernote ve Bağımlılıklarını Yükleme

Summernote, jQuery ve Bootstrap'e bağımlıdır. Bu nedenle öncelikle bu bağımlılıkları yüklemeniz gerekiyor.

Terminalde projenizin kök dizininde aşağıdaki komutları çalıştırın:

npm install summernote jquery bootstrap

Veya yarn kullanıyorsanız:

yarn add summernote jquery bootstrap

Adım 2: Summernote CSS ve JS Dosyalarını Projeye Ekleme

Summernote'un stil ve script dosyalarını Nuxt 3 projenize eklemeniz gerekiyor. Bunun için nuxt.config.ts dosyasını düzenleyeceğiz.

nuxt.config.ts dosyasını açın ve aşağıdaki gibi düzenleyin:

export default defineNuxtConfig({
  app: {
    head: {
      link: [
        { rel: 'stylesheet', href: 'https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css' },
        { rel: 'stylesheet', href: 'https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-lite.min.css' },
      ],
      script: [
        { src: 'https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js' },
        { src: 'https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js' },
        { src: 'https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-lite.min.js' },
      ],
    },
  },
});

Bu yapılandırma, Summernote'un CSS ve JS dosyalarını projenize ekler.

Adım 3: Summernote'u Bir Component İçinde Kullanma

Summernote'u kullanmak için bir Vue component'i oluşturacağız. Örneğin, components/SummernoteEditor.vue adında bir dosya oluşturun ve aşağıdaki kodu ekleyin:

Bu component, Summernote editörünü başlatır ve bir textarea üzerinde çalışır.

Adım 4: Component'i Bir Sayfada Kullanma

Oluşturduğunuz SummernoteEditor component'ini bir sayfada kullanmak için örneğin pages/index.vue dosyasını açın ve aşağıdaki kodu ekleyin:

<template>
  <div>
    <h1>Summernote Editör Örneği</h1>
    <SummernoteEditor />
  </div>
</template>

<script setup>
import SummernoteEditor from '~/components/SummernoteEditor.vue';
</script>

3. Summernote ile Veri İşleme

Summernote editöründen veri almak ve bu veriyi kullanmak için aşağıdaki adımları izleyebilirsiniz.

Veriyi Alma

SummernoteEditor.vue component'ini güncelleyerek editördeki veriyi alabilirsiniz:

<template>
  <div>
    <textarea ref="summernoteEditor"></textarea>
    <button @click="getContent">İçeriği Al</button>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';

const summernoteEditor = ref(null);

const getContent = () => {
  const content = $(summernoteEditor.value).summernote('code');
  console.log(content);
};

onMounted(() => {
  $(summernoteEditor.value).summernote({
    height: 300,
    placeholder: 'Metin girin...',
  });
});
</script>

Bu örnekte, "İçeriği Al" butonuna tıklandığında editördeki içerik konsola yazdırılır.

Veriyi Gönderme

Editördeki veriyi bir API'ye göndermek için getContent fonksiyonunu kullanabilirsiniz:

const sendContent = async () => {
  const content = $(summernoteEditor.value).summernote('code');
  await $fetch('/api/save-content', {
    method: 'POST',
    body: { content },
  });
};

4. İsteğe Bağlı: Summernote Özelleştirmeleri

Summernote'u ihtiyaçlarınıza göre özelleştirebilirsiniz. Örneğin:

Araç Çubuğunu Özelleştirme: toolbar seçeneği ile araç çubuğunu düzenleyebilirsiniz.
Dil Desteği: Summernote'un dil dosyalarını ekleyerek farklı dillerde kullanabilirsiniz.
Plugins: Summernote'un resim yükleme, video ekleme gibi eklentilerini kullanabilirsiniz.

5. Sonuç

Bu rehberde, Nuxt 3 projenize Summernote metin editörünü nasıl entegre edeceğinizi ve nasıl kullanacağınızı öğrendiniz. Summernote, kullanıcı dostu arayüzü ve zengin özellikleriyle projelerinizde kolayca kullanabileceğiniz bir araçtır.