Kurulum

viveEditor’ü bir sayfaya CDN’den tek bir betikle ekleyebilir ya da npm’den kurup kendi paketleyicinizle derleyebilirsiniz. Bu sayfa iki yolu, hangi paketleri seçmeniz gerektiğini ve hangi stil dosyalarını yüklemeniz gerektiğini anlatıyor.

CDN betiğiyle

Derleme adımı gerekmez. Stil dosyasını ve betiği yükleyin, sonra bir textarea’ya data-editor ekleyin:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/viveeditor@x.y.z/dist/viveeditor.css" />
<script src="https://cdn.jsdelivr.net/npm/viveeditor@x.y.z/dist/viveeditor.classic.iife.js"></script>

<form method="post">
  <label for="body">Makale</label>
  <textarea id="body" name="body" data-editor required></textarea>
</form>

x.y.z yerine kullandığınız sürümü tam olarak yazın. Sayfa hazır olduğunda betik her textarea[data-editor] öğesini araç çubuklu bir editöre çevirir ve window.ViveEditor nesnesini sunar. Form, textarea’nın adıyla temiz HTML gönderir. Bu HTML’i sunucuda her zaman yeniden temizleyin.

Betikte temel biçimlendirme, listeler, hizalama ve renkler, yapılacaklar listeleri, kod blokları (sözdizimi renklendirmesi olmadan), tablolar, bul ve değiştir, görseller (adresle, yükleyici olmadan), video gömme ve Office’ten temiz yapıştırma vardır. Bahsetme, emoji, formül, dipnot, şablonlar ve yapay zekâ asistanı yalnızca npm’de bulunur; <vive-editor> öğesi de öyle.

Sitenizde İçerik Güvenliği Politikası (CSP) varsa yayına almadan önce Güvenlik ve CSP sayfasını okuyun.

npm ile

Her şey tek pakette

viveeditor paketi CDN betiğindeki editörün aynısını içerir:

npm install viveeditor

import { upgradeAll } from 'viveeditor'
import 'viveeditor/style.css'

upgradeAll()

Paketleyiciyle çalışırken CDN ek dosyaları yoktur. Dosya menüsünde Word ve Markdown’ı görmek için dönüştürücüleri yükleyici fonksiyon olarak verin; ayrıntılar Dosya aç, kaydet, yazdır sayfasında.

Çerçeve bileşeni

React, Vue, Svelte ve Angular için ayrı bileşen paketleri var; bunları viveeditor ile birlikte kurarsınız:

npm install @viveeditor/react viveeditor

@viveeditor/vue, @viveeditor/svelte ve @viveeditor/angular da aynı şekilde kurulur. Herhangi bir sayfa için <vive-editor> form alanını sunan @viveeditor/element paketi de var. Ayrıntılar Çerçeveler sayfasında.

Yalnızca gereken parçalar

Her özellik ayrı bir pakettir. @viveeditor/core motorun kendisidir ve araç çubuğu içermez; araç çubuğu için @viveeditor/ui ekleyin:

npm install @viveeditor/core @viveeditor/ext-basic @viveeditor/ext-list @viveeditor/ui

Tam liste Paketler sayfasında.

Stil dosyaları

• CDN: betikle aynı sürüm klasöründeki viveeditor.css.
• viveeditor ve çerçeve bileşenleri: bir kez import 'viveeditor/style.css'.
• Angular: node_modules/viveeditor/dist/viveeditor.css dosyasını angular.json içindeki styles listesine ekleyin.
• Paketleri kendiniz seçtiyseniz: @viveeditor/core/style.css, araç çubuğunu kullanıyorsanız @viveeditor/ui/style.css ve stil dosyası olan her eklentinin style.css dosyası: ext-code-block, ext-embed, ext-footnote, ext-image, ext-math, ext-mention, ext-search, ext-table ve ext-task-list.

import '@viveeditor/core/style.css'
import '@viveeditor/ui/style.css'
import '@viveeditor/ext-table/style.css'

Formüller için KaTeX’in kendi stil dosyası katex/dist/katex.min.css de gerekir.

Gereksinimler

• Derleme araçlarınız için Node.js 20.19 veya üstü. npm paketleri bunu engines alanında belirtir.
• Bileşen paketleri için React 18 ya da 19, Vue 3.5, Svelte 5 veya Angular 21 ya da 22.
• Formül kullanıyorsanız KaTeX 0.18.2 veya üstü. Daha eski sürümler reddedilir.
• viveeditor/sanitizer için PHP 8.4 veya üstü, viveeditor/laravel için Laravel 12 veya üstü.

Sürümü sabitleyin

Tüm npm paketleri aynı sürüm numarasıyla birlikte yayımlanır; bu yüzden viveEditor paketlerinin hepsini aynı sürümde kurun. CDN betiğinde sürümü her zaman tam yazın (viveeditor@x.y.z); ek dosyalar o sürüme gömülü parmak izleriyle denetlenir. 1.0’dan önce bir ara sürüm uyumu bozan değişiklik içerebilir; bkz. Sürüm politikası.

Sonraki adımlar

• İlk editör: textarea, mountEditor ya da Editor.create.
• Sunucuda temizleme: gönderilen HTML’i kaydetmeden önce temizleyin.