ការចាប់ផ្តើម

ដំឡើង បង្កើតកម្មវិធីនិពន្ធ និងបង្ហាញខ្លឹមសារដែលបានរក្សាទុក។

ជំហានទី 1

ដំឡើង និងបង្កើតកម្មវិធីនិពន្ធ

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

ការបង្ហាញខ្លឹមសារ

នៅពេលបង្ហាញ HTML ដែលបង្កើតដោយកម្មវិធីនិពន្ធ CSS និងឈ្មោះថ្នាក់ត្រូវបានទាមទារ។

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

API ស្នូល $

ឧទាហរណ៍របស់កម្មវិធីនិពន្ធបង្ហាញវត្ថុ $ មួយ — ថង់អាស្រ័យដែលមានប្រព័ន្ធរងខាងក្នុងទាំងអស់ (L1→L2→L3)។

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

ឯកសារយោង API ស្នូល $ ពេញលេញ ការសិក្សាស៊ីជម្រៅអំពីស្ថាបត្យកម្ម

សាកល្បងវាផ្ទាល់

ការនាំចូល npm ពិតប្រាកដ កម្មវិធីចងក្រងពេញលេញ — កែសម្រួលកូដ ហើយមើលលទ្ធផលភ្លាមៗ។

សួនកុមារ

<link href="https://cdn.jsdelivr.net/npm/suneditor@3.0.0/dist/css/suneditor.min.css" rel="stylesheet">  <script src="https://cdn.jsdelivr.net/npm/suneditor@3.0.0/dist/suneditor.min.js"><\/script>  <textarea id="my-editor"></textarea>  <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>

 <link href="https://cdn.jsdelivr.net/npm/suneditor@3.0.0/dist/css/suneditor-contents.min.css" rel="stylesheet">  <div class="sun-editor-editable">  </div>

API ស្នូល $

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