Jadikan Editor HTML WYSIWYG Berfungsi untuk Anda

Adakah anda menggunakan editor HTML WYSIWYG dalam projek anda? Alat mesra pengguna ini telah menjadi semakin popular di kalangan pembangun web dan pencipta kandungan, menawarkan antara muka intuitif untuk mencipta kandungan web tanpa menyelidiki kod HTML mentah. Walaupun editor ini hebat di luar kotak, potensi sebenar mereka sering dibuka melalui penyesuaian.

Pengambilan Utama

• Anda boleh menambah ciri baharu pada editor HTML WYSIWYG

• Butang tersuai membantu pengguna memformat kandungan dengan mudah

• Menukar rupa editor boleh sepadan dengan gaya tapak anda

Mengapa Tukar Editor HTML WYSIWYG?

Menukar editor HTML WYSIWYG membolehkan anda:

1. Tambahkan ciri yang diperlukan oleh projek anda

2. Memudahkan pengguna untuk menggunakan

3. Teruskan pemformatan yang sama di seluruh tapak anda

Sekarang, mari lihat bagaimana kita boleh melakukan ini dengan contoh sebenar.

Menambahkan Butang Serlahkan Berguna

Selalunya, kami ingin menonjolkan beberapa teks. Mari tambah butang yang melakukan ini dengan cepat. Mula-mula, kami perlu menambah editor pada halaman kami:

<link href="https://cdn.jsdelivr.net/npm/froala-editor@latest/css/froala_editor.pkgd.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/froala-editor@latest/js/froala_editor.pkgd.min.js"></script>

Kemudian, kami boleh menambah butang baharu kami:

// Make a new icon
FroalaEditor.DefineIcon('highlight', {NAME: 'star'});

// Create a new button
FroalaEditor.RegisterCommand('highlight', {
  title: 'Highlight',
  icon: 'highlight',
  focus: true,
  undo: true,
  refreshAfterCallback: true,
  callback: function () {
    this.html.insert('<span class="custom-highlight">' + this.selection.text() + '</span>');
  }
});

// Start the editor with our new button
new FroalaEditor('#editor', {
  toolbarButtons: ['bold', 'italic', 'underline', '|', 'highlight']
});

Kod ini melakukan beberapa perkara:

1. Ia menjadikan ikon baharu untuk butang kami

2. Ia memberitahu editor apa yang perlu dilakukan apabila seseorang mengklik butang

3. Ia menambahkan butang baharu kami pada bar alat

Untuk menjadikan teks yang diserlahkan kelihatan bagus, kami menambah beberapa gaya:

.fr-view .custom-highlight {
  background-color: yellow;
  padding: 2px;
  border-radius: 2px;
}

Menjadikan Editor Kelihatan Baik

Anda juga boleh menukar rupa editor. Berikut ialah cara mudah untuk melakukannya:

new FroalaEditor('#editor', {
  toolbarButtons: ['bold', 'italic', 'underline', '|', 'highlight'],
  toolbarButtonsSM: ['bold', 'italic', 'underline', '-', 'highlight'],
  placeholderText: 'Type here...',
  charCounterCount: false,
  toolbarSticky: false,
  theme: 'royal'
});

Perubahan ini melakukan beberapa perkara:

• Ia menyediakan butang untuk saiz skrin yang berbeza

• Ia menambahkan beberapa teks untuk menunjukkan tempat untuk menaip

• Ia mematikan kaunter aksara

• Ia menjadikan bar alat bergerak dengan halaman

• Ia menggunakan tema pra-dibuat

Petua untuk Menukar Editor HTML WYSIWYG

Apabila anda menukar editor ini, ingat petua ini:

1. Mulakan Kecil: Buat perubahan kecil dahulu sebelum mencuba yang besar.

2. Gunakan Apa yang Ada: Gunakan alatan terbina dalam editor apabila anda boleh.

3. Uji Banyak: Pastikan perubahan anda berfungsi dalam penyemak imbas yang berbeza.

4. Fikirkan Tentang Kepantasan: Perubahan besar mungkin melambatkan keadaan, jadi uji dengan banyak kandungan.

5. Kekal Kemas Kini: Semak ciri baharu yang mungkin membantu anda.

Menggunakan Editor yang Diubah dalam Rangka Kerja Berbeza

Anda boleh menggunakan editor yang diubah ini dalam banyak rangka kerja web. Begini cara anda boleh menggunakan editor kami yang telah ditukar dalam React:

import React, { useEffect, useRef } from 'react';
import FroalaEditor from 'react-froala-wysiwyg';

const MyEditor = () => {
  const editorRef = useRef(null);

  useEffect(() => {
    if (editorRef.current) {
      FroalaEditor.DefineIcon('highlight', {NAME: 'star'});
      FroalaEditor.RegisterCommand('highlight', {
        title: 'Highlight',
        icon: 'highlight',
        focus: true,
        undo: true,
        refreshAfterCallback: true,
        callback: function () {
          this.html.insert('<span class="custom-highlight">' + this.selection.text() + '</span>');
        }
      });
    }
  }, []);

  const config = {
    toolbarButtons: ['bold', 'italic', 'underline', '|', 'highlight'],
    placeholderText: 'Type here...'
  };

  return <froalaeditor tag="textarea" config="{config}" ref="{editorRef}"></froalaeditor>;
};

export default MyEditor;

Komponen React ini membungkus editor kami yang telah diubah, menjadikannya mudah untuk digunakan dalam apl React anda.

Membungkus

Editor HTML WYSIWYG ialah alat yang hebat untuk membuat kandungan. Lebih-lebih lagi, apabila anda menukarnya untuk memenuhi keperluan anda, ia menjadi lebih baik. Dengan menambahkan butang baharu, menukar rupa ia dan memasangkannya ke dalam projek anda, anda boleh membuat alat penyuntingan yang sempurna.

Ingat, matlamatnya adalah untuk menjadikan editor berfungsi tepat untuk anda. Dengan beberapa perubahan yang bijak, anda boleh menukar editor yang baik menjadi editor yang hebat yang sesuai dengan kerja anda dengan lancar.

Jadi, teruskan dan cuba! Tukar editor HTML WYSIWYG anda dan lihat sejauh mana ia boleh menjadi lebih baik untuk pengguna anda.

Ini siaran pada mulanya diterbitkan di blog Froala.

Atas ialah kandungan terperinci Jadikan Editor HTML WYSIWYG Berfungsi untuk Anda. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!