Első lépések

Telepítse, hozza létre a szerkesztőt, és jelenítse meg a mentett tartalmat.

1. lépés

Szerkesztő telepítése és létrehozása

HTMLlanguage

<!-- 1. Include CSS -->
<link href="https://cdn.jsdelivr.net/npm/suneditor@3.0.0/dist/css/suneditor.min.css" rel="stylesheet">
<!-- 2. Include JS -->
<script src="https://cdn.jsdelivr.net/npm/suneditor@3.0.0/dist/suneditor.min.js"><\/script>

<!-- 3. Create Textarea -->
<textarea id="my-editor"></textarea>

<!-- 4. Create Editor -->
<script>
  const editor = SUNEDITOR.create("my-editor", {
    plugins: SUNEDITOR.plugins,
    value: "<p>Hello SunEditor</p>",
    buttonList: [
      ["undo", "redo"],
      "|",
      ["bold", "italic", "underline"],
      "|",
      ["list", "link", "image"]
    ]
  });
<\/script>

2. lépés

Tartalommegjelenítés

A szerkesztő által generált HTML megjelenítésekor CSS és osztálynevek szükségesek.

HTMLlanguage

<!-- 1. SunEditor contents CSS required -->
<link href="https://cdn.jsdelivr.net/npm/suneditor@3.0.0/dist/css/suneditor-contents.min.css" rel="stylesheet">

<!-- 2. sun-editor-editable Wrap with class -->
<div class="sun-editor-editable">
  <!-- HTML from editor.getContents() -->
</div>

3. lépés

$ Core API

A szerkesztőpéldány elérhetővé tesz egy $ objektumot — egy függőségi zsákot, amely az összes belső alrendszert (L1→L2→L3) tartalmazza.

const editor = SunEditor.create('textarea', { /* options */ });

// $ — dependency bag (all internals)
editor.$.selection  // Selection handler
editor.$.format     // Block formatting
editor.$.history    // Undo/Redo stack
// ... and more

Teljes $ Core API referencia Építészeti mélymerülés

Próbáld ki élőben

Valódi npm importálások, teljes csomagoló — szerkessz kódot, és azonnal lásd az eredményt.

Játszótér