it-swarm-id.com

Menambahkan kelas CSS ke wysiwyg

Saya menggunakan wysiwyg dengan ckeditor, dan saya bertanya-tanya bagaimana saya akan menambahkan gaya css sehingga pengguna dapat, misalnya, mengapung gambar ke kiri atau membuat perubahan serupa lainnya ...?

Terima kasih!

7
Jane

Ckeditor menggunakan ckeditor.styles.js file untuk menentukan gaya yang tersedia di drop-down Styles. Dokumentasi dalam file itu menyatakan:

'Styles' button is not enabled by default in DrupalFull and DrupalFiltered toolbars.

Jika Anda melihat file, itu harus cukup lurus ke depan untuk memodifikasinya menggunakan contoh yang diberikan.

ckeditor.styles.js file dapat disalin ke direktori yang dapat diakses dengan Drupal dan dimodifikasi untuk memasukkan gaya Anda. Kemudian Anda harus mengonfigurasi profil CKeditor Anda untuk menunjuk ke file baru, termasuk CSS yang berlaku.

6
nmc

Alih-alih menghubungkan ke ckeditor.styles.js, kita dapat langsung melakukannya di halaman konfigurasi Format.

Format WYSIWYG memberi Anda pilihan untuk gaya Anda sendiri dan kami dapat menulis css sederhana berdasarkan format tersebut.

Langkah-langkah untuk menambahkan Gaya

  • Login di situs sebagai Admin.
  • Arahkan ke halaman Konfigurasi format. (Konfigurasi "Penulisan konten" Profil Wysiwyg)

    enter image description here

  • Edit salah satu format.

    enter image description here

  • Buka fieldset CSS .

    enter image description here

  • Di bawah kelas CSS textarea, buat gaya yang ingin Anda buat. Formatnya harus

Nama Gaya = html_element.class_name

Contoh yang sama adalah

Judul Halaman Statis = div.static_page_title (Jadi nama gaya is Judul Halaman Statis , yang bila diterapkan akan membungkus teks dalam div menambahkan static_page_title sebagai kelas elemen div .)

Langkah-langkah untuk menggunakannya

  • Coba buat konten dan gunakan Format di mana Anda telah menambahkan Style.
  • Di bawah Gaya Anda akan melihat pengaturan Gaya yang telah Anda buat. enter image description here
  • Cukup tulis tes dan pilih gaya. Setelah Anda melakukannya markup akan terlihat seperti

    <div class="static_page_title">Testing</div>

  • Jadi kita cukup menulis css untuk static_page_title kelas dan semuanya akan berfungsi seperti yang diharapkan.

Semoga jawaban saya akan membantu

1
Nitesh Sethia