React için SunEditor

Install

Bu bileşen ayrıca SunEditor motoruna da ihtiyaç duyar (eş bağımlılık, 3.4.1 veya üzeri).

npm install suneditor @suneditor/suneditor-react

Usage

import SunEditor from '@suneditor/suneditor-react';
import 'suneditor/css/editor';
import 'suneditor/css/contents';

export default function App() {
  return (
    <SunEditor
      options={(se) => ({
        plugins: [se.plugins.link, se.plugins.image, se.plugins.table],
        buttonList: [
          ['undo', 'redo'],
          ['bold', 'italic', 'underline'],
          ['table', 'link', 'image'],
        ],
        height: '400px',
      })}
    />
  );
}

options, suneditor.create()'e olduğu gibi aktarılır; bu nedenle her seçenek, eklenti, düğme, olay ve dil, motorun kendine özgü özellikleridir.
Bu README dosyası yalnızca React bileşeninin eklediklerini kapsar; seçeneklerin kendileri için SunEditor dokümantasyon veya suneditor paketine bakın.

options, tembelce yüklenen suneditor modülünü (se.plugins, se.langs, se.interfaces, ...) alır.
Next.js'deki bu formu tercih edin: istemci bileşeninde suneditor'ı statik olarak içe aktarmak, sunucu tarafı oluşturmayı bozar çünkü motor içe aktarma sırasında window'e dokunur.
Sunucu tarafında render işlemi yapmadığınızda veya motor içe aktarımı gerektirmeyen seçenekler için de düz bir nesne kullanılabilir.
Dil paketleri düz nesnelerdir ve her zaman statik olarak içe aktarılabilirler: import ko from 'suneditor/langs/ko'.

Kontrollü değer

const [html, setHtml] = useState('<p>Hello</p>');

<SunEditor value={html} onChange={setHtml} options={...} />

value değerini son onChange sonucundan farklı bir değerle değiştirmek, düzenleyici içeriğini değiştirir. Kontrolsüz bir düzenleyici için value ifadesini atlayın ve ihtiyaç duyduğunuzda içeriği örnekten okuyun.

Örnek erişimi

const ref = useRef<SunEditorInstance | null>(null);

<SunEditor ref={ref} options={...} />

ref.current?.$.html.get();
ref.current?.$.html.set('<p>new</p>');
ref.current?.resetOptions({ height: '600px' });

ref, suneditor.create() tarafından döndürülen nesnedir, bu nedenle motorun tüm API'si kullanılabilir durumdadır.

Events

İşleyici fonksiyonlarını options.events üzerinden geçirin. Her render işleminde yeniden senkronize edildikleri için React durumu üzerinden güvenli bir şekilde kapatılabilirler.

<SunEditor
	options={(se) => ({
		plugins: [se.plugins.image],
		events: {
			onSave: async () => { await save(html); return true; },
			onImageUploadBefore: ({ info, handler }) => { ... },
		},
	})}
/>

Başka bir öğedeki araç çubuğu veya durum çubuğu

DOM öğesi alan motor seçenekleri, ref'lerle çalışır çünkü options fonksiyonu mount işleminden sonra çalışır:

const toolbarRef = useRef<HTMLDivElement>(null);

<div ref={toolbarRef} />
<SunEditor options={(se) => ({ plugins: [se.plugins.link], toolbar_container: toolbarRef.current })} />

Multi-root

Birden fazla düzenlenebilir alana sahip tek bir motor örneği (araç çubuğu, eklentiler, olaylar, tema). Her alan için <SunEditorGroup> içine bir <SunEditorRoot> yerleştirin; aralarına herhangi bir başka JSX kodu yerleştirilebilir. Grup kendi başına hiçbir öğe oluşturmaz.

const toolbarRef = useRef<HTMLDivElement>(null);

<SunEditorGroup options={(se) => ({ plugins: [se.plugins.link], toolbar_container: toolbarRef.current })}>
  <div ref={toolbarRef} />
  <h2>Title</h2>
  <SunEditorRoot name='header' value={header} onChange={setHeader} options={{ height: '80px' }} />
  <SunEditorRoot name='body' value={body} onChange={setBody} readOnly={locked} />
</SunEditorGroup>;

• name, rootKey (ref.current.changeFrameContext('body'), html.get({ rootKey: 'body' })) motorudur.
• Her kökün kendine ait value / onChange, readOnly, disabled ve çerçevesi options (height, placeholder, iframe, ...) vardır.
• Motorun paylaşılan araç çubuğu için toolbar_container'a ihtiyacı vardır, aksi takdirde mode, inline veya balloon olmalıdır.
• Grup monte edildiğinde kökler toplanır. Motor daha sonra kök ekleyemez veya kaldıramaz, bu nedenle farklı köklerle yeniden oluşturmak için grubun key değerini değiştirin.

Props

events ve theme dışındaki seçenekler, düzenleyici oluşturulurken uygulanır. Bunları daha sonra değiştirmek için farklı bir key ile yeniden takın veya ref.current.resetOptions()'i arayın.

Types

import type {
  SunEditorProps,
  SunEditorGroupProps,
  SunEditorRootProps,
  SunEditorInstance,
  SunEditorOptions,
  SunEditorFrameOptions,
  SunEditorEvents,
} from '@suneditor/suneditor-react';

Tüm motor tipleri suneditor/types'dan itibaren de mevcuttur.

Next.js notlar

• Bu bileşen bir istemci modülüdür (yapı çıktısında "use client" bulunur) ve motoru yalnızca tarayıcıda yükler, bu nedenle doğrudan bir sunucu bileşeninden işlenebilir.
• İstemci bileşenlerindeki statik içe aktarmalarda suneditor'ı kullanmayın. se.plugins'ye ulaşmak için options={(se) => ...} formunu kullanın.
• CSS içe aktarmaları (suneditor/css/editor, suneditor/css/contents, suneditor/src/themes/*.css) hem App Router hem de Pages Router'te çalışır.