更改“添加媒体”按钮的行为

时间:2017-12-12 作者:MathF

我正在尝试修改某个插件,使其更加用户友好。该插件允许您嵌入pdf,问题是您每次都必须手动添加短代码。

所以我只想对“添加媒体”按钮做一个小小的行为更改,如果它将媒体识别为pdf,它将自动用快照代码包装媒体文件url

或者如何添加一个按钮,该按钮可以用该短代码包装选定的文本(如果这样做更简单的话)

1 个回复
SO网友:MathF

Js文件

(function() {
        tinymce.PluginManager.add( \'custom_class\', function( editor, url ) {
            // Add Button to Visual Editor Toolbar
            editor.addButton(\'custom_class\', {
                title: \'Insert PDF Tag\',
                cmd: \'custom_class\',
                image: url + \'/icon.png\',
            });

            // Add Command when Button Clicked
            editor.addCommand(\'custom_class\', function() {

                var text = editor.selection.getNode();                      
                if ( text.length === 0 ) {
                    alert( \'Please select some text.\' );
                    return;
                }
                // Insert selected text back into editor, wrapping it in an anchor tag
                editor.execCommand(\'mceReplaceContent\', false, \'[jupdf-viewer file="\' + text + \'"]\');
            });

            // Enable/disable the button on the node change event
            editor.onNodeChange.add(function( editor ) {
                // Get selected text, and assume we\'ll disable our button
                var selection = editor.selection.getContent();
                var disable = true;

                // If we have some text selected, don\'t disable the button
                if ( selection ) {
                    disable = false;
                }
                // Define whether our button should be enabled or disabled
                editor.controlManager.setDisabled( \'custom_class\', disable );
            });
        });
    })();
Php文件

<?php
/**
 * Plugin Name: TinyMCE Custom Class
 * Plugin URI: http://sitepoint.com
 * Version: 1.0
 * Author: Tim Carr
 * Author URI: http://www.n7studios.co.uk
 * Description: TinyMCE Plugin to wrap selected text in a custom CSS class, within the Visual Editor
 * License: GPL2
 */

class TinyMCE_Custom_Class {

    /**
    * Constructor. Called when the plugin is initialised.
    */
    function __construct() {

        if ( is_admin() ) {
            add_action( \'init\', array( &$this, \'setup_tinymce_plugin\' ) );
            add_action( \'admin_enqueue_scripts\', array( &$this, \'admin_scripts_css\' ) );
            add_action( \'admin_print_footer_scripts\', array( &$this, \'admin_footer_scripts\' ) );
        }

    }

    /**
    * Check if the current user can edit Posts or Pages, and is using the Visual Editor
    * If so, add some filters so we can register our plugin
    */
    function setup_tinymce_plugin() {

        // Check if the logged in WordPress User can edit Posts or Pages
        // If not, don\'t register our TinyMCE plugin
        if ( ! current_user_can( \'edit_posts\' ) && ! current_user_can( \'edit_pages\' ) ) {
            return;
        }

        // Check if the logged in WordPress User has the Visual Editor enabled
        // If not, don\'t register our TinyMCE plugin
        if ( get_user_option( \'rich_editing\' ) !== \'true\' ) {
            return;
        }

        // Setup some filters
        add_filter( \'mce_external_plugins\', array( &$this, \'add_tinymce_plugin\' ) );
        add_filter( \'mce_buttons\', array( &$this, \'add_tinymce_toolbar_button\' ) );

    }

    /**
     * Adds a TinyMCE plugin compatible JS file to the TinyMCE / Visual Editor instance
     *
     * @param array $plugin_array Array of registered TinyMCE Plugins
     * @return array Modified array of registered TinyMCE Plugins
     */
    function add_tinymce_plugin( $plugin_array ) {

        $plugin_array[\'custom_class\'] = plugin_dir_url( __FILE__ ) . \'tinymce-custom-class.js\';
        return $plugin_array;

    }

    /**
     * Adds a button to the TinyMCE / Visual Editor which the user can click
     * to insert a custom CSS class.
     *
     * @param array $buttons Array of registered TinyMCE Buttons
     * @return array Modified array of registered TinyMCE Buttons
     */
    function add_tinymce_toolbar_button( $buttons ) {

        array_push( $buttons, \'custom_class\' );
        return $buttons;

    }

    /**
    * Enqueues CSS for TinyMCE Dashicons
    */
    function admin_scripts_css() {

        wp_enqueue_style( \'tinymce-custom-class\', plugins_url( \'tinymce-custom-class.css\', __FILE__ ) );

    }

    /**
    * Adds the Custom Class button to the Quicktags (Text) toolbar of the content editor
    */
    function admin_footer_scripts() {

    // Check the Quicktags script is in use
    if ( ! wp_script_is( \'quicktags\' ) ) {
        return;
    }
    ?>
    <script type="text/javascript">
        QTags.addButton( \'custom_class\', \'Wrap text with PDF tag\', insert_custom_class );
        function insert_custom_class() {
            // Ask the user to enter a CSS class
            var text = "";
            if(window.getSelection)
                text = window.getSelection().toString();
            if(text === ""){
                alert ("please select some text");
                return;
            }           
            text = text.replace(\'<a href="\',\'\');
            text = text.substring(0, text.indexOf(\'">\'));
            // Insert
            QTags.insertContent(\'[jupdf-viewer file="\' + text + \'"]\');
        }
    </script>
    <?php

    }

}

$tinymce_custom_class = new TinyMCE_Custom_Class;
?>

结束