Как создать пользовательскую кнопку для визуального редактора, которая добавляет 4 неразрывных пробела? (плагин или простой код)

TL;DR, код внизу.

Хорошо, это должно сработать для вас, но это бета-версия. Это работает для меня, но я не проводил никакого тщательного тестирования. Во-первых, он не выводит четыре последовательных объекта  ; он заикается   [space]   [space], но, по крайней мере, он сохраняет их как есть при переключении между визуальным и текстовым режимами. Он работает только в визуальном режиме, у меня не было времени, чтобы понять, как заставить его работать в текстовом режиме.

Это входит два файла, назовите их так, как считаете нужным. Я использовал очень образное имя: 4 пространства.:) Кнопка TinyMCE находится в верхнем правом ряду редактора. Он покажет все, что показывает ваш браузер для несуществующих изображений. Это легко изменить в 4spaces.js , строка 8:

image   : url + '/' + 'YOUR_IMAGE_HERE.png'

Измените `YOUR_IMAGE_HERE.png" на файл изображения относительно двух файлов или используйте абсолютный URI, например:

image   : '/path/to/image/YOUR_IMAGE_HERE.png'

Или

image   : 'http://example.com/path/to/image/YOUR_IMAGE_HERE.png'

Я прокомментировал и/или оставил некоторые существующие комментарии по всему PHP, комментарии JavaScript скудны. Вы увидите в разделе заголовка PHP, откуда взят PHP-код, и вид , где возник JavaScript.

Два примечательных кредита, оба перечислены в заголовке PHP: этот WordPress.SE Ответ, который предоставил код, который останавливает TinyMCE (или WordPress, не уверен, какой) от удаления пробелов, и ссылку, приведенную в предыдущем ответе @Alexey, которая, хотя и не критична, помогла мне наткнитесь на решение JS.

Я не смог заставить код в этой ссылке работать, но в конце концов вернулся к ней и нашел самородок, который собрал все это вместе (с некоторыми изменениями, чтобы быть уверенным).

Я думаю, что это примерно все подводит итог. Вот код:

4spaces.php

<?php
/* Plugin Name: 4Spaces
 * Version: 0.1.0
 * Author: AK Ted
 * Author URI: http://akted.com
 * License: GPLv2 or later
 *
 *
 * PHP code adapted & refined from the following two sources:
 * WordPress Codex - http://codex.wordpress.org/TinyMCE_Custom_Buttons#Loading_a_TinyMCE__Plugin
 *
 * WordPress Answers (Stack Exchange) - https://wordpress.stackexchange.com/questions/54398/how-can-i-stop-tinymce-from-converting-my-html-entities-to-characters#answer-54480
 *
 *
 * The JavaScript arose from a lot of trial-and-error, with code [beat into submission...er, I mean] inspired by both of the following sources:
 * tinymce wiki - http://www.tinymce.com/wiki.php/Creating_a_plugin
 * &
 * brett terpstra - http://brettterpstra.com/2010/04/17/adding-a-tinymce-button/
 *
 */

new akt_4spaces();

class akt_4spaces {
    function __construct() {
        add_action('admin_init', array($this, 'init'));
    } // function __construct

    // callback for init
    // sets all the hooks only if user has capability & rich_editing is true 
    function init() {
        // Don't bother doing this stuff if the current user lacks permissions
        if ( ! current_user_can('edit_posts') && ! current_user_can('edit_pages') ) {
            return;
        }

       // Add only in Rich Editor mode
       if ( get_user_option('rich_editing') == 'true') {
            add_filter('mce_buttons', array($this, 'add_button'));
            add_filter('mce_external_plugins', array($this, 'add_tinymce_plugin'));
            add_filter('tiny_mce_before_init', array($this, 'preserve_entities'));
       }
    } // function init


    // callback for mce_buttons filter
    // adds button to TinyMCE
    function add_button($buttons) {
        array_push($buttons, 'separator', 'four_spaces');
        return $buttons;
    } // function add_button

    // callback for mce_external_plugins filter
    // attaches the JavaScript file to TinyMCE
    function add_tinymce_plugin($plugin_array) {
        $plugin_array['four_spaces'] = plugins_url('/', __FILE__) . '4spaces.js';
        return $plugin_array;
    } // function add_tinymce_plugin


    // callback for tiny_mce_before_init
    // stops TinyMCE (WordPress?) from automatically converting &nbsp; entities
    function preserve_entities( $initArray ) {
        // The odd entries are the entity *number*, the even entries are the entity *name*. If the entity has no name,
        // use the number, prefixed with a hash (for example, the service mark is "8480,#8480").
        $initArray['entities'] = '160,nbsp,' . $initArray['entities'];
        return $initArray;
    } // function preserve_entities

} // class akt_4spaces

4spaces.js

(function() {

    tinymce.create('tinymce.plugins.four_spaces', {
        init : function(ed, url) {
            // Register four_spaces button
            ed.addButton('four_spaces', {
                title   : '4Spaces',
                image   : url + '/' + 'YOUR_IMAGE_HERE.png',
                onclick : function() {
                    ed.execCommand(
                        "mceInsertContent",
                        false,
                        "    "
                    );
                }
            });
        }
    });

    // Register plugin
    tinymce.PluginManager.add('four_spaces', tinymce.plugins.four_spaces);

})();

Редактировать: Я забыл упомянуть, для тех, кто не знает, поместите оба этих файла в каталог под /wp-content/plugins/ (путь по умолчанию). Это должно выглядеть что-то вроде /wp-контент/плагины/4 пространства/ или каким бы именем вы ни решили его назвать, затем активируйте его в Admin.

P.S. - Я относительно новичок в ООП, поэтому приветствую любую критику, советы и т.д. от любого, кто просматривает этот ответ.