Menggunakan Editor TinyMCE Di WordPress [Panduan]

Walaupun mereka mungkin tidak tahu namanya, setiap orang yang menggunakan WordPress sudah biasa dengannya Editor TinyMCE. Ia adalah editor yang anda gunakan apabila anda membuat atau mengedit kandungan anda - yang dengan butang untuk membuat teks, tajuk, penjajaran teks dan sebagainya. Inilah yang akan kita lihat dalam jawatan ini, dan saya akan menunjukkan kepada anda bagaimana anda boleh menambah fungsi dan bagaimana anda boleh menggunakannya dalam plugin anda.

Editor dibina di atas sistem Javascript tanpa platform yang dipanggil TinyMCE yang digunakan dalam beberapa projek di Web. Ia mempunyai API hebat yang membolehkan WordPress anda untuk mengetik untuk membuat butang anda sendiri dan menambahnya ke lokasi lain dalam WordPress.

Menambah Butang Tersedia

WordPress menggunakan beberapa pilihan yang terdapat di TinyMCE untuk melumpuhkan butang tertentu - seperti peraturan superskrip, subskrip dan mendatar - untuk membersihkan antara muka. Mereka boleh ditambah kembali tanpa terlalu banyak kekecohan.

Langkah pertama ialah membuat plugin. Lihat codex WordPress tentang cara melakukannya. Singkatnya, anda boleh mendapatkan dengan membuat folder bernama 'my-mce-plugin' dalam folder wp-kandungan / plugin. Buat fail dengan nama yang sama, dengan pelanjutan PHP: my-mce-plugin.php.

Di dalam fail tersebut tampal yang berikut:

Sebaik sahaja selesai, anda sepatutnya dapat memilih plugin ini di WordPress dan mengaktifkannya. Semua kod dari sekarang boleh disisipkan di dalam fail ini.

Jadi, kembali ke membolehkan beberapa butang terbina dalam tetapi tersembunyi. Inilah kod yang membolehkan kita membolehkan 3 butang yang saya sebutkan:

 add_filter ('mce_buttons_2', 'my_tinymce_buttons'); fungsi my_tinymce_buttons (butang $) $ buttons [] = 'superscript'; $ buttons [] = 'subskrip'; $ butang [] = hr; kembali butang $;

Untuk mengetahui butang yang boleh ditambah dan apa yang dipanggil, lihat senarai yang terdapat dalam dokumentasi TinyMCE untuk kawalan.

Mencipta Butang Sendiri

Bagaimana pula dengan membuat butang kami sendiri dari awal? Banyak laman web menggunakan Prism untuk menyoroti kod yang menggunakan pendekatan semantik untuk menandakan segmen kod. Anda perlu membungkus kod anda di dalamnya dan

 tag, sesuatu seperti ini:
 $ variable = 'value'
 Mari buat butang yang akan buat ini untuk kami!
 Ini adalah proses tiga langkah. Anda perlu menambah butang, memuatkan fail javascript dan benar-benar menulis kandungan fail Javascript. Mari kita mulakan!
 Menambah butang dan memuat fail Javascript cukup mudah, inilah kod yang saya gunakan untuk menyelesaikannya:
  add_filter ('mce_buttons', 'pre_code_add_button'); fungsi pre_code_add_button (butang $) $ buttons [] = 'pre_code_button'; kembali butang $;  add_filter ('mce_external_plugins', 'pre_code_add_javascript'); fungsi pre_code_add_javascript ($ plugin_array) $ plugin_array ['pre_code_button'] = get_template_directory_uri (). '/tinymce-plugin.js'; kembali $ plugin_array;  
 Apabila saya melihat tutorial tentang ini saya sering melihat 2 masalah.
 Mereka tidak dapat menyebutnya nama butang yang ditambahkan dalam fungsi pre_code_add_button () mesti sama dengan kunci untuk pembolehubah $ plugin_array dalam fungsi pre_code_add_javascript (). Kita juga perlu gunakan rentetan yang sama dalam Javascript kami kemudian.
 Beberapa tutorial juga gunakan cangkerang admin_head tambahan untuk membalut semuanya. Walaupun ini akan berfungsi, ia tidak diperlukan dan kerana Codex tidak menggunakannya, ia mungkin boleh dielakkan.
 Langkah seterusnya ialah menulis beberapa Javascript untuk melaksanakan fungsi kami. Inilah yang saya gunakan untuk mendapatkannya 
 dan  tag output semua sekaligus.
  (function () tinymce.PluginManager.add ('pre_code_button', function (editor, url) editor.addButton ('pre_code_button', text: 'Prism', icon: false, onclick: function () var selected = tinyMCE.activeEditor.selection.getContent (); var content = ''+ dipilih +'
'; editor.insertContent (kandungan + "\ n"); ); ); ) (); 
 Kebanyakan dari ini ditentukan oleh bagaimana plugin TinyMCE sepatutnya dikodkan, anda boleh menemui beberapa maklumat mengenai itu dalam dokumentasi TinyMCE. Buat masa ini, semua yang anda perlu tahu ialah nama butang anda (pre_code_button) harus digunakan dalam baris 2 dan 3. Nilai "teks" dalam baris 4 akan dipaparkan jika anda tidak menggunakan ikon (kami akan melihat penambahan ikon dalam seketika).
 Kaedah onclick menentukan butang ini apabila ia diklik. Saya mahu menggunakannya untuk membungkus teks terpilih dalam struktur HTML yang dibincangkan sebelum ini.
 Teks yang dipilih boleh diambil menggunakan tinyMCE.activeEditor.selection.getContent (). Kemudian, saya membungkus elemen di sekelilingnya dan memasukkannya, menggantikan kandungan yang diserlahkan dengan elemen baru. Saya juga telah menambah barisan baru supaya saya dapat dengan mudah mula menulis selepas elemen kod.
 Jika anda ingin menggunakan ikon saya cadangkan memilih salah satu dari set Dashicons yang mengangkut dengan WordPress. Rujukan Pembangun mempunyai alat yang hebat untuk mencari ikon dan CSS / HTML / Glyph mereka. Cari simbol kod dan perhatikan unicode di bawahnya: f475.
 Kami perlu melampirkan lembaran gaya kepada plugin kami dan kemudian menambah gaya mudah untuk memaparkan ikon kami. Pertama, mari tambahkan gaya kami ke WordPress:
  add_action ('admin_enqueue_scripts', 'pre_code_styles'); fungsi pre_code_styles () wp_enqueue_style ('pre_code_button', plugins_url ('/style.css', __FILE__));  
 Kembali ke Javascript dan di sebelah ikon dalam fungsi addButton, gantikan “salah” dengan kelas yang anda mahu butang anda ada - saya gunakan pre_code_button.
 Sekarang buat fail style.css dalam direktori plugin anda dan tambahkan CSS berikut:
  i.mce-i-pre_code_button: before font-family: dashicons; kandungan: "\ f475";  
  
 Ambil perhatian bahawa butang itu akan menerima mce-i- [kelas anda di sini] kelas yang boleh anda gunakan untuk menyasarkan dan menambah gaya. Tentukan font sebagai dashicons dan kandungan menggunakan nilai unicode dari sebelumnya.
 Menggunakan TinyMCE Di tempat lain
 Plugin sering membuat textareas untuk memasukkan teks lebih lama, tidakkah ia hebat jika kita boleh menggunakan TinyMCE di sana juga? Sudah tentu kita boleh, dan ia cukup mudah. Fungsi wp_editor () membolehkan kami mengeluarkan output di mana-mana sahaja di dalam admin, berikut adalah cara ia kelihatan:
 wp_editor ($ initial_content, $ element_id, $ settings);
 Parameter pertama menetapkan kandungan awal untuk kotak. Ini boleh digunakan untuk memuatkan pilihan dari pangkalan data, contohnya. Parameter kedua menetapkan ID elemen HTML. Parameter ketiga adalah pelbagai tetapan. Untuk membaca tentang tetapan yang tepat yang boleh anda gunakan, lihat dokumentasi editor wp.
 Tetapan yang paling penting ialah textarea_name. Ini mengandungi nama atribut elemen textarea, yang membolehkan anda menyimpan data dengan mudah. Begini bagaimana editor saya kelihatan apabila digunakan dalam halaman pilihan:
 $ settings = array ('textarea_name' => 'buyer_bio');
 wp_editor (get_option ('buyer_bio'), 'buyer_bio', $ settings);
 Ini bersamaan dengan menulis kod berikut, yang akan menghasilkan teks ringkas:
 <?php get_option( 'buyer_bio' ) ?>
 Kesimpulannya
 Editor TinyMCE adalah cara yang mesra pengguna untuk membolehkan pengguna lebih fleksibel apabila memasuki kandungan. Ia membolehkan orang-orang yang tidak mahu memformat kandungan mereka untuk menaipnya dan dilakukan dengannya, dan mereka yang ingin bermain-main dengannya untuk menghabiskan banyak masa kerana mereka memerlukannya tepat.
 Mencipta butang dan fungsi baru boleh dilakukan dengan cara yang sangat modular, dan kami hanya menggaru permukaan kemungkinan. Jika anda mengetahui plugin TinyMCE yang sangat baik atau menggunakan kes yang telah banyak membantu anda, beritahu kami di dalam komen di bawah!