Menambah fungsi tersuai ke editor visual WordPress

Takeaways Key

Editor Visual WordPress, yang dikuasakan oleh Kawalan Editor Tinymce, boleh disesuaikan untuk menambah fungsi yang unik, seperti membuat dan mendaftarkan plugin Tinymce tersuai yang membungkus teks yang dipilih dalam kelas CSS.
Untuk menambah fungsi tersuai, anda perlu membuat plugin Tinymce di laman web WordPress anda, mendaftarkan tindakan dan penapis tinymce, dan gunakan penapis tinymce (mce_external_plugins dan mce_buttons) untuk memuatkan plugin tinymce luaran dan tambah/mengeluarkan butang Tinymce ke Tinymce .
Fungsi tersuai juga boleh ditambah dengan membuat plugin JavaScript yang memberitahu Tinymce bagaimana untuk mengeluarkan butang dan apa yang perlu dilakukan apabila ia diklik. Ini melibatkan penggunaan kelas Pengurus Plugin TinyMce untuk menambah plugin ke Tinymce, mendaftarkan butang menggunakan fungsi AddButton, dan mendaftarkan arahan menggunakan fungsi AddCommand.
Adalah mungkin untuk menyesuaikan editor visual WordPress tanpa pengekodan dengan menggunakan plugin. Beberapa plugin popular untuk tujuan ini termasuk Tinymce Advanced, WP Edit, dan Ultimate Tinymce.

Editor Kandungan adalah bahagian utama WordPress. Ia membolehkan pengguna membuat dan menguruskan kandungan, galeri dan video mereka, dalam

visual wysiwyg (apa yang anda lihat adalah apa yang anda dapat). ia juga dilengkapi dengan text

paparan, yang membolehkan pengguna memasukkan atau meminda HTML dalam kandungan mereka. Editor Visual WordPress dikuasakan oleh Kawalan Editor Tinymce, yang memberikan pandangan WYSIWYG, serta butang pemformatan yang anda lihat:

Terima kasih kepada cangkuk penapis TinyMce API dan WordPress, kita boleh menambah fungsi kita sendiri kepada editor visual WordPress. Khususnya, kami akan melihat cara membuat dan mendaftarkan plugin Tinymce tersuai yang membungkus teks yang dipilih dalam kelas CSS.

Membuat Plugin Tinymce

Di laman web WordPress anda, buat folder WP-Content/Plugins/Tinymce-Custom-Class.

Kami akan menyimpan fail plugin kami di sini, jadi seterusnya membuat fail yang dipanggil Tinymce-Custom-class.php, menggunakan kod berikut:

Ini memberikan WordPress beberapa maklumat mengenai plugin kami, dan menetapkan pembinaan kami, di mana kami akan mendaftarkan tindakan dan penapis Tinymce kami.

<span>/**
</span><span> * Plugin Name: TinyMCE Custom Class
</span><span> * Plugin URI: https://www.sitepoint.com
</span><span> * Version: 1.0
</span><span> * Author: Tim Carr
</span><span> * Author URI: http://www.n7studios.co.uk
</span><span> * Description: TinyMCE Plugin to wrap selected text in a custom CSS class, within the Visual Editor
</span><span> * License: GPL2
</span><span> */
</span>
<span>class TinyMCE_Custom_Class {
</span>
    <span>/**
</span><span>    * Constructor. Called when the plugin is initialised.
</span><span>    */
</span>    <span>function __construct() {
</span>
    <span>}
</span>
<span>}
</span>
<span>$tinymce_custom_class = new TinyMCE_Custom_Class;</span>

WordPress Tinymce Filters

Tinymce menyediakan dua penapis utama untuk mendaftarkan elemen pada bar alat editor visual:

mce_external_plugins: digunakan untuk memuatkan plugin tinymce luaran (https://codex.wordpress.org/plugin_api/filter_reference/mce_external_plugins) 3

• Sebelum kita memanggil penapis ini, kita mahu periksa kita berada di skrin pentadbiran WordPress. Tambahkan kod berikut ke __Construct:

<span>/**
</span><span> * Plugin Name: TinyMCE Custom Class
</span><span> * Plugin URI: https://www.sitepoint.com
</span><span> * Version: 1.0
</span><span> * Author: Tim Carr
</span><span> * Author URI: http://www.n7studios.co.uk
</span><span> * Description: TinyMCE Plugin to wrap selected text in a custom CSS class, within the Visual Editor
</span><span> * License: GPL2
</span><span> */
</span>
<span>class TinyMCE_Custom_Class {
</span>
    <span>/**
</span><span>    * Constructor. Called when the plugin is initialised.
</span><span>    */
</span>    <span>function __construct() {
</span>
    <span>}
</span>
<span>}
</span>
<span>$tinymce_custom_class = new TinyMCE_Custom_Class;</span>

Seterusnya, tambahkan fungsi persediaan_tinymce_plugin untuk melakukan beberapa pemeriksaan selanjutnya:

<span>if ( is_admin() ) {
</span>	<span>add_action( 'init', array( &$this, 'setup_tinymce_plugin' ) );
</span><span>}</span>

Pemeriksaan ini jika pengguna semasa dalam pengguna WordPress boleh mengedit siaran atau halaman. Jika mereka tidak dapat, tidak ada gunanya mendaftarkan plugin Tinymce kami untuk pengguna itu, kerana mereka tidak akan pernah melihat editor visual.

Kami kemudian periksa sama ada pengguna menggunakan editor visual, kerana beberapa pengguna WordPress mematikan ini melalui pengguna> profil anda . Sekali lagi, jika pengguna tidak menggunakan editor visual, kami kembali (keluar) fungsi, kerana kami tidak perlu melakukan apa -apa lagi.

Jika pemeriksaan di atas lulus, dua penapis WordPress Tinymce didaftarkan - mce_external_plugins dan mce_buttons.

Penapis Pertama - MCE_EXTERNAL_PLUGINS - membolehkan kami mendaftarkan fail plugin TinyMce JavaScript yang akan berinteraksi dengan editor visual. Mari tambahkan panggilan fungsi untuk penapis ini, di dalam kelas kami:

<span>/**
</span><span>* Check if the current user can edit Posts or Pages, and is using the Visual Editor
</span><span>* If so, add some filters so we can register our plugin
</span><span>*/
</span><span>function setup_tinymce_plugin() {
</span>
    <span>// Check if the logged in WordPress User can edit Posts or Pages
</span>    <span>// If not, don't register our TinyMCE plugin
</span>    <span>if ( ! current_user_can( 'edit_posts' ) && ! current_user_can( 'edit_pages' ) ) {
</span>        <span>return;
</span>    <span>}
</span>
    <span>// Check if the logged in WordPress User has the Visual Editor enabled
</span>    <span>// If not, don't register our TinyMCE plugin
</span>    <span>if ( get_user_option( 'rich_editing' ) !== 'true' ) {
</span>        <span>return;
</span>    <span>}
</span>
    <span>// Setup some filters
</span>    <span>add_filter( 'mce_external_plugins', array( &$this, 'add_tinymce_plugin' ) );
</span>    <span>add_filter( 'mce_buttons', array( &$this, 'add_tinymce_toolbar_button' ) );
</span>
<span>}</span>

di sini, kami mendaftarkan fail JavaScript dalam $ plugin_array, yang mengandungi semua plugin Tinymce JavaScript.

Penapis Kedua - MCE_BUTTONS - memberitahu Tinymce bahawa kami ingin mendaftarkan butang dalam editor visual. Sekali lagi, mari tambahkan panggilan fungsi untuk penapis ini, di dalam kelas kami:

<span>/**
</span><span> * Adds a TinyMCE plugin compatible JS file to the TinyMCE / Visual Editor instance
</span><span> *
</span><span> * <span>@param <span>array</span> $plugin_array Array of registered TinyMCE Plugins
</span></span><span> * <span>@return <span>array</span> Modified array of registered TinyMCE Plugins
</span></span><span> */
</span><span>function add_tinymce_plugin( $plugin_array ) {
</span>
    <span>$plugin_array['custom_class'] = plugin_dir_url( __FILE__ ) . 'tinymce-custom-class.js';
</span>    <span>return $plugin_array;
</span>
<span>}</span>

ini mendaftarkan nama programatik untuk butang tinymce kami (custom_class).

Membuat plugin JavaScript

Apabila kami memanggil mce_external_plugins, kami merujuk fail JavaScript. Sekarang kita perlu membuat fail itu, dan menambah beberapa kod JavaScript kepadanya. Ini akan memberitahu Tinymce bagaimana untuk mengeluarkan butang, dan apa yang perlu dilakukan apabila ia diklik.

Buat fail baru dalam folder plugin yang dipanggil tinymce-custom-class.js, memasukkan kod berikut:

<span>/**
</span><span> * Adds a button to the TinyMCE / Visual Editor which the user can click
</span><span> * to insert a custom CSS class.
</span><span> *
</span><span> * <span>@param <span>array</span> $buttons Array of registered TinyMCE Buttons
</span></span><span> * <span>@return <span>array</span> Modified array of registered TinyMCE Buttons
</span></span><span> */
</span><span>function add_tinymce_toolbar_button( $buttons ) {
</span>
    <span>array_push( $buttons, 'custom_class' );
</span>    <span>return $buttons;
</span>
<span>}</span>

Fungsi JavaScript ini melakukan beberapa tindakan:

• Ia memanggil kelas Pengurus Plugin Tinymce, yang boleh kita gunakan untuk melakukan beberapa tindakan berkaitan plugin Tinymce. Khususnya, kami menambah plugin kami ke Tinymce menggunakan fungsi Tambah.
• Dalam rutin ADD, kami mempunyai akses kepada editor visual melalui contoh editor. Kami mendaftarkan butang kami menggunakan fungsi AddButton, yang terdiri daripada tajuk, arahan dan imej ikon.
• Akhirnya, kami mendaftarkan arahan menggunakan fungsi AddCommand, yang menunjukkan amaran memberitahu kami apabila butang kami diklik.

kita juga perlu memasukkan imej icon.png dalam folder plugin kami - ini adalah imej ikon yang akan digunakan untuk butang:

simpan kod anda, dan aktifkan plugin anda dalam Plugin Pentadbiran WordPress>

Seterusnya, buat atau edit halaman atau pos, dan anda semoga anda dapat melihat butang anda dengan ikon:

Klik butang, dan anda akan melihat butang diklik! Alert:

menentukan arahan untuk menjalankan

mari menggantikan amaran dengan cepat, meminta pengguna untuk nama kelas CSS yang mereka mahu membungkus teks yang dipilih dalam editor visual:

<span>/**
</span><span> * Plugin Name: TinyMCE Custom Class
</span><span> * Plugin URI: https://www.sitepoint.com
</span><span> * Version: 1.0
</span><span> * Author: Tim Carr
</span><span> * Author URI: http://www.n7studios.co.uk
</span><span> * Description: TinyMCE Plugin to wrap selected text in a custom CSS class, within the Visual Editor
</span><span> * License: GPL2
</span><span> */
</span>
<span>class TinyMCE_Custom_Class {
</span>
    <span>/**
</span><span>    * Constructor. Called when the plugin is initialised.
</span><span>    */
</span>    <span>function __construct() {
</span>
    <span>}
</span>
<span>}
</span>
<span>$tinymce_custom_class = new TinyMCE_Custom_Class;</span>

Perintah ini melakukan beberapa pemeriksaan kewarasan, untuk memastikan pengguna memilih beberapa teks, memasukkan nama kelas CSS dan tidak membatalkan proses.

Jika cek itu lulus, kami kemudian menjalankan fungsi ExecCommand editor, untuk menggantikan teks yang dipilih, dengan teks yang dipilih dibungkus dalam tag span yang termasuk kelas CSS yang dimasukkan.

Jika semuanya berfungsi, beralih ke paparan 'teks', dan anda akan melihat teks yang anda pilih kini dibalut dengan tag span:

Kesimpulan

Kami telah mencipta plugin WordPress untuk menambah butang ke editor visual TinyMce. Dalam proses ini, kami telah meneroka penggunaan penapis WordPress untuk integrasi dengan Tinymce, serta kod JavaScript yang diperlukan untuk menambah butang dan melakukan tindakan apabila diklik.

Untuk memuat turun kod sumber lengkap, lawati repositori github atau pautan muat turun fail zip langsung.

Dalam artikel seterusnya, kami akan meliputi beberapa langkah yang lebih maju yang boleh kami ambil untuk menyesuaikan plugin Tinymce kami lagi.

Soalan Lazim (Soalan Lazim) Mengenai Menambah Fungsi Kustom ke Editor Visual WordPress

Bagaimana saya boleh menambah butang tersuai ke editor visual WordPress?

Menambah butang tersuai ke editor visual WordPress boleh dicapai dengan menggunakan API Tinymce. API ini membolehkan anda menambah butang baru ke bar alat dan menentukan fungsi mereka. Anda boleh membuat fail plugin baru dalam direktori plugin pemasangan WordPress anda, dan gunakan penapis 'MCE_BUTTONS' untuk menambah butang anda. Kemudian, anda boleh menggunakan penapis 'mce_external_plugins' untuk memuatkan fail javascript plugin anda, yang akan menentukan fungsi butang. Sesuaikan Editor Visual WordPress tanpa pengekodan dengan menggunakan plugin. Terdapat beberapa plugin yang membolehkan anda menambah, membuang, atau menyusun semula butang pada bar alat, menukar penampilan editor, dan menambah gaya dan format tersuai. Beberapa plugin popular untuk tujuan ini termasuk Tinymce Advanced, WP Edit, dan Ultimate Tinymce. Editor dengan menggunakan penapis 'TINY_MCE_BEFORE_INIT'. Penapis ini membolehkan anda mengubah suai array Tetapan Tinymce, yang termasuk pilihan 'Style_Formats'. Anda boleh menambah gaya tersuai anda ke pilihan ini sebagai pelbagai tatasusunan, masing -masing menentukan gaya. Setiap gaya harus termasuk 'tajuk', 'blok', 'kelas', dan 'pembungkus' harta.

Apa itu Tinymce dan bagaimana ia berkaitan dengan editor visual WordPress? Ia adalah perisian asas yang menguasai editor visual WordPress. Dengan memahami dan menggunakan API Tinymce, anda boleh menambah fungsi tersuai ke editor visual WordPress.

Bagaimana saya boleh menambah font tersuai ke editor visual WordPress? kepada editor visual WordPress dengan menggunakan penapis 'MCE_CSS'. Penapis ini membolehkan anda menambah fail CSS tambahan kepada editor. Anda boleh membuat fail CSS yang mengimport font tersuai anda dan mentakrifkan kelas yang menggunakannya, dan kemudian tambahkan fail ini ke editor menggunakan penapis 'mce_css'. ? Walau bagaimanapun, disebabkan saiz skrin yang lebih kecil, beberapa butang bar alat boleh disembunyikan dalam dropdown 'tenggelam dapur'.

Bagaimana saya boleh menambah format tersuai ke editor visual WordPress?

Format tersuai ke editor visual WordPress dengan menggunakan penapis 'TINY_MCE_BEFORE_INIT' dan pilihan 'Style_Formats'. Anda boleh menentukan format tersuai anda sebagai pelbagai tatasusunan, masing -masing menentukan format. Setiap format harus memasukkan 'tajuk', 'inline', 'kelas', dan 'pembungkus' harta.

Bagaimana saya boleh melumpuhkan editor visual WordPress? Editor dengan pergi ke pengguna> profil anda di kawasan admin WordPress dan memeriksa 'Lumpuhkan editor visual semasa menulis'. Anda boleh menggunakan shortcode dalam editor visual WordPress. Cukup masukkan kod shortcode dalam editor dan ia akan diproses apabila jawatan dipaparkan. Editor Visual dengan menggunakan butang 'Jadual' pada bar alat. Jika butang ini tidak dapat dilihat, anda mungkin perlu memasang plugin seperti Tinymce maju untuk menambahkannya.

Atas ialah kandungan terperinci Menambah fungsi tersuai ke editor visual WordPress. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!