Menggunakan Editor TinyMCE di WordPress [Panduan]

Meskipun mereka mungkin tidak tahu namanya, semua orang yang menggunakan WordPress terbiasa dengan Editor TinyMCE. Ini adalah editor yang Anda gunakan ketika Anda membuat atau mengedit konten Anda - editor dengan tombol untuk membuat teks tebal, judul, perataan teks dan sebagainya. Itulah yang akan kita lihat di posting ini, dan saya akan menunjukkan kepada Anda bagaimana Anda dapat menambahkan fungsionalitas dan bagaimana Anda bisa menggunakannya di plugin Anda.

Editor dibangun di atas sistem Javascript bebas platform yang disebut TinyMCE yang digunakan dalam sejumlah proyek di Web. Ini memiliki API yang hebat dimana WordPress memungkinkan Anda untuk memanfaatkan untuk membuat tombol Anda sendiri dan menambahkannya ke lokasi lain di dalam WordPress.

Menambahkan Tombol yang Tersedia

WordPress menggunakan beberapa opsi yang tersedia di TinyMCE untuk menonaktifkan tombol tertentu - seperti superskrip, subskrip, dan aturan horisontal - untuk membersihkan antarmuka. Mereka dapat ditambahkan kembali tanpa terlalu banyak repot.

Langkah pertama adalah membuat plugin. Lihatlah kodeks WordPress tentang cara melakukannya. Singkatnya, Anda dapat bertahan dengan membuat folder bernama 'my-mce-plugin' di folder wp-content / plugins. Buat file dengan nama yang sama, dengan ekstensi PHP: my-mce-plugin.php.

Di dalam file itu tempel berikut ini:

  Setelah selesai, Anda harus dapat memilih plugin ini di WordPress dan mengaktifkannya. Semua kode mulai sekarang dapat disisipkan di dalam file ini.
 Jadi, kembali ke mengaktifkan beberapa tombol bawaan tetapi tersembunyi. Inilah kode yang memungkinkan kita untuk mengaktifkan 3 tombol yang saya sebutkan:
  add_filter ('mce_buttons_2', 'my_tinymce_buttons'); function my_tinymce_buttons ($ buttons) $ buttons [] = 'superscript'; $ buttons [] = 'subskrip'; $ buttons [] = jam; mengembalikan $ tombol;  
  
 Untuk mengetahui tombol mana yang dapat ditambahkan dan apa namanya, lihat daftar yang ditemukan dalam dokumentasi TinyMCE untuk kontrol.
 Membuat Tombol Kita Sendiri
 Bagaimana dengan membuat tombol kita sendiri dari awal? Banyak situs web menggunakan Prism untuk menyoroti kode yang menggunakan pendekatan yang sangat semantik untuk menandai segmen kode. Anda harus membungkus kode Anda di dalamnya  dan 
 tag, sesuatu seperti ini:
 $ variable = 'value'
 Mari kita buat tombol yang akan melakukan ini untuk kita!
 Ini adalah proses tiga langkah. Anda perlu menambahkan tombol, memuat file javascript dan benar-benar menulis konten file Javascript. Mari kita mulai!
 Menambahkan tombol dan memuat file Javascript cukup mudah, inilah kode yang saya gunakan untuk menyelesaikannya:
  add_filter ('mce_buttons', 'pre_code_add_button'); function pre_code_add_button ($ buttons) $ buttons [] = 'pre_code_button'; mengembalikan $ tombol;  add_filter ('mce_external_plugins', 'pre_code_add_javascript'); function pre_code_add_javascript ($ plugin_array) $ plugin_array ['pre_code_button'] = get_template_directory_uri (). '/tinymce-plugin.js'; kembalikan $ plugin_array;  
 Ketika saya melihat tutorial tentang ini, saya sering melihat 2 masalah.
 Mereka lalai menyebutkan hal itu nama tombol yang ditambahkan pada fungsi pre_code_add_button () harus sama dengan kunci untuk variabel $ plugin_array di fungsi pre_code_add_javascript (). Kita juga perlu melakukannya gunakan string yang sama di Javascript kami kemudian.
 Beberapa tutorial juga gunakan kait admin_head tambahan untuk menyelesaikan semuanya. Meskipun ini akan berfungsi, itu tidak diperlukan dan karena Codex tidak menggunakannya, mungkin harus dihindari.
 Langkah selanjutnya adalah menulis beberapa Javascript untuk mengimplementasikan fungsionalitas kami. Inilah yang saya gunakan untuk mendapatkan 
 dan  tag output sekaligus.
  (function () tinymce.PluginManager.add ('pre_code_button', function (editor, url) editor.addButton ('pre_code_button', teks: 'Prism', ikon: false, onclick: function () var terpilih = tinyMCE.activeEditor.selection.getContent (); var content = ''+ terpilih +'
'; editor.insertContent (konten + "\ n"); ); ); ) (); 
 Sebagian besar ini ditentukan oleh bagaimana plugin TinyMCE seharusnya dikodekan, Anda dapat menemukan beberapa informasi tentang itu dalam dokumentasi TinyMCE. Untuk saat ini, yang perlu Anda ketahui hanyalah itu nama tombol Anda (pre_code_button) harus digunakan pada baris 2 dan 3. Nilai "teks" pada baris 4 akan ditampilkan jika Anda tidak menggunakan ikon (kami akan lihat menambahkan ikon sebentar lagi).
 Metode onclick menentukan apa yang dilakukan tombol ini ketika diklik. Saya ingin menggunakannya untuk membungkus teks yang dipilih dalam struktur HTML yang dibahas sebelumnya.
 Teks yang dipilih dapat diambil menggunakan tinyMCE.activeEditor.selection.getContent (). Lalu, saya membungkus elemen di sekitarnya dan memasukkannya, mengganti konten yang disorot dengan elemen baru. Saya juga menambahkan baris baru sehingga saya dapat dengan mudah mulai menulis setelah elemen kode.
 Jika Anda ingin menggunakan ikon, saya sarankan memilih salah satu dari Dashicons yang dikirimkan dengan WordPress. Referensi Pengembang memiliki alat yang hebat untuk menemukan ikon dan CSS / HTML / Glyph mereka. Temukan simbol kode dan catat unicode di bawahnya: f475.
 Kita harus melampirkan stylesheet ke plugin kita dan kemudian menambahkan style sederhana untuk menampilkan ikon kita. Pertama, mari tambahkan gaya kami ke WordPress:
  add_action ('admin_enqueue_scripts', 'pre_code_styles'); function pre_code_styles () wp_enqueue_style ('pre_code_button', plugins_url ('/style.css', __FILE__));  
 Kembali ke Javascript dan di sebelah ikon di fungsi addButton, ganti “Salah” dengan kelas Anda ingin memiliki tombol Anda - saya gunakan pre_code_button.
 Sekarang buat file style.css di direktori plugin Anda dan tambahkan CSS berikut:
  i.mce-i-pre_code_button: before font-family: dashicons; konten: "\ f475";  
  
 Perhatikan bahwa tombol akan menerima mce-i- [kelas Anda di sini] kelas yang dapat Anda gunakan untuk menargetkan dan menambahkan gaya. Tentukan font sebagai dasbor dan konten menggunakan nilai unicode dari sebelumnya.
 Menggunakan TinyMCE Di tempat lain
 Plugin sering membuat textareas untuk memasukkan teks yang lebih panjang, bukankah lebih bagus jika kita bisa menggunakan TinyMCE di sana juga? Tentu saja kita bisa, dan itu sangat mudah. Fungsi wp_editor () memungkinkan kita untuk output di mana saja di admin, berikut tampilannya:
 wp_editor ($ initial_content, $ element_id, $ settings);
 Parameter pertama mengatur konten awal untuk kotak. Ini dapat digunakan untuk memuat opsi dari database, misalnya. Parameter kedua menetapkan ID elemen HTML. Parameter ketiga adalah array pengaturan. Untuk membaca tentang pengaturan persis yang dapat Anda gunakan, lihat dokumentasi editor wp.
 Pengaturan yang paling penting adalah textarea_name. Ini mengisi atribut nama elemen textarea, memungkinkan Anda untuk menyimpan data dengan mudah. Beginilah tampilan editor saya ketika digunakan di halaman opsi:
 $ settings = array ('textarea_name' => 'buyer_bio');
 wp_editor (get_option ('buyer_bio'), 'buyer_bio', $ settings);
 Ini sama dengan menulis kode berikut, yang akan menghasilkan teks sederhana:
 <?php get_option( 'buyer_bio' ) ?>
 Kesimpulan
 Editor TinyMCE adalah cara yang ramah pengguna yang memungkinkan pengguna lebih fleksibel saat memasukkan konten. Hal ini memungkinkan mereka yang tidak ingin memformat konten mereka untuk mengetik dan menyelesaikannya, dan mereka yang ingin bermain-main dengannya menghabiskan waktu sebanyak yang mereka butuhkan untuk mendapatkannya dengan tepat.
 Membuat tombol dan fungsionalitas baru dapat dilakukan dengan cara yang sangat modular, dan kami baru saja menggores permukaan kemungkinan. Jika Anda mengetahui plugin TinyMCE yang sangat bagus atau kasus penggunaan yang telah banyak membantu Anda, beri tahu kami di komentar di bawah!