如何在WP_EDITOR中选择文本视图中的内容？

时间：2016-03-16 作者：STEAMworks Learning Center

我正在尝试计算输入默认post编辑器（wp\\U编辑器）的其他文本统计数据中的单词数。

它假设写单词计数到<；div id=“字数”>位于wp\\U编辑器正下方的元框中。

我已经能够正确地选择visual editor <复制，但不复制text editor 复制。

我已经包括了下面的所有代码。所讨论的javascript包含在“Begin”和“End”注释中。

谢谢你的帮助，蒂姆

Plugin Directory Structure:

plugin-shell > plugin-shell.php
plugin-shell > assets > js > admin > wordcount.js
plugin-shell > assets > css > admin > style.css
plugin-shell > assets > css > frontend > style.css

Admin Stylesheet:

#after_editor-sortables {
    padding-top: 40px;
}
#wordcount {
    background-color: #fff;
    color: #000;
    border-color: #525252;
    border-style: solid;
    border-width: 5px;
    padding: 5px;
    width: 50px;
}

Javascript:

var i=0;
jQuery(document).ready(function($){
    setInterval(function(){
        var replacedTags = "";
        var replacedEntities = "";
        var tinymcevalue = "";

        console.log(\'Text: \' + tinymcevalue);
        console.log(\'Display: \' + $(\'textarea#content\').css(\'display\'));

        // BEGIN

        if($(\'textarea#content\').css(\'display\') == \'none\'){ 
            tinymcevalue =    $(\'#content_ifr\').contents().find(\'#tinymce\').html(); 
        } else { 
            tinymcevalue = $(\'textarea#content\').contents(); // Failed
         // tinymcevalue = $(\'textarea#content\').html();     // Failed
        }

        // END

        var regexTags = /<[^>]+>/g;
        var regexEntities = /&lt;[\\s\\S]+?&gt;/gi;
        if (tinymcevalue !== "") {    
            replacedTags = tinymcevalue.replace(regexTags , "");
            replacedEntities = replacedTags.replace(regexEntities , "");
        }

        var wordscount = replacedEntities.split(" ");

        $("#wordcount").text(wordscount.length);
    }, 5000)
});

Plugin Shell:

<?php

/*
   Plugin Name: PluginShell
   Plugin URI: http://www.pluginshell.com/
   Description: Aenean Vestibulum Risus Commodo Ullamcorper
   Author: PluginShell
   Author URI: http://www.pluginshell.com/
   Version: 0.0.0
*/

mb_internal_encoding("UTF-8");
class Plugin_Shell {
   /**
    *
    * CONSTRUCTOR
    * Adds all actions and filters to the class
    *
    * @since 0.0.0
    *
    **/ 
    function __construct() {
        //Actions
        add_action( \'init\',                  array( &$this, \'plugin_shell_register_post_type\'       ) );
        add_action( \'admin_init\',            array( &$this, \'plugin_shell_register_and_build_fields\') );
        add_action( \'wp_enqueue_scripts\',    array( &$this, \'plugin_shell_enqueue_style\'            ) );
        add_action( \'admin_enqueue_scripts\', array( &$this, \'plugin_shell_enqueue_wordcount_js\'     ) );
        add_action( \'admin_enqueue_scripts\', array( &$this, \'plugin_shell_enqueue_options_style\'    ) );
        add_action( \'admin_menu\',            array( &$this, \'plugin_shell_add_meta_boxes\'           ) );
        add_action( \'admin_menu\',            array( &$this, \'plugin_shell_options_page\'             ) );
        add_action( \'add_meta_boxes\',        array( &$this, \'plugin_shell_add_contextable_meta_box\' ) );
        add_action( \'save_post\',             array( &$this, \'plugin_shell_meta_box_save\' ), 1, 2      );
        add_action( \'edit_form_after_editor\',array( &$this, \'add_after_editor_meta_boxes\'           ) );
        add_action( \'edit_form_after_title\', array( &$this, \'add_after_title_meta_boxes\'            ) );

    }

   /**
    *
    * PHP4 CONSTRUCTOR
    * Calls __construct to create class
    *
    * @since 0.0.0
    *
    **/ 
    function plugin_shell() {
        $this->__construct();
    }

   /**
    *
    * LOAD JS ONTO THE ADMIN PAGE
    *
    * @since 0.0.0
    *
    **/ 
    function plugin_shell_enqueue_wordcount_js() {
        //die(\'BEGIN: plugin_shell_enqueue_wordcount_js\');
        wp_register_script( \'plugin-shell-wordcount-js\',  plugin_dir_url( __FILE__ ) . \'assets/js/admin/wordcount.js\' );
        //die(\'MIDDLE: plugin_shell_enqueue_wordcount_js\');
        wp_enqueue_script( \'plugin-shell-wordcount-js\' ); 
        //die(\'END: plugin_shell_enqueue_wordcount_js\');
    }

   /**
    *
    * LOAD CSS INTO THE WEBSITE\'S FRONT END
    *
    * @since 0.0.0
    *
    **/ 
    function plugin_shell_enqueue_style() {
        wp_register_style( \'plugin-shell-style\',  plugin_dir_url( __FILE__ ) . \'assets/css/frontend/style.css\' );
        wp_enqueue_style( \'plugin-shell-style\' ); 
    }

   /**
    *
    * LOAD CSS INTO THE ADMIN PAGE
    *
    * @since 0.0.0
    *
    **/ 
    function plugin_shell_enqueue_options_style() {
        wp_register_style( \'plugin-shell-options-style\',  plugin_dir_url( __FILE__ ) . \'assets/css/admin/style.css\' );
        wp_enqueue_style( \'plugin-shell-options-style\' ); 
    }

   /**
    * Register meta box context location: after_editor
    *
    * @return null
    **/
    function add_after_editor_meta_boxes() {
        global $post, $wp_meta_boxes;
        # Output the `after_editor` meta boxes:
        do_meta_boxes( get_current_screen(), \'after_editor\', $post );
    }

   /**
    * Register meta box context location: after_title
    *
    * @return null
    **/
    function add_after_title_meta_boxes() {
        global $post, $wp_meta_boxes;
        # Output the `after_title` meta boxes:
        do_meta_boxes( get_current_screen(), \'after_title\', $post );
    }

   /**
    *
    * REGISTER CUSTOM POST TYPE: plugin_shell
    *
    * @since 0.0.0
    *
    **/
    function plugin_shell_register_post_type() {
        $options = get_option(\'plugin_shell_options\');

        register_post_type( \'plugin_shell\',
            array(
                \'labels\' => array(
                    \'name\' => __( \'Plugin Shell\' ),
                    \'singular_name\' => __( \'term\' ),
                    \'add_new\' => __( \'Add New\' ),
                    \'add_new_item\' => __( \'Add New Term\' ),
                    \'edit\' => __( \'Edit\' ),
                    \'edit_item\' => __( \'Edit Term\' ),
                    \'new_item\' => __( \'New Term\' ),
                    \'view\' => __( \'View Term\' ),
                    \'view_item\' => __( \'View Term\' ),
                    \'search_items\' => __( \'Search Term\' ),
                    \'not_found\' => __( \'No Terms found\' ),
                    \'not_found_in_trash\' => __( \'No Terms found in Trash\' )
                ),
                \'public\' => true,
                \'query_var\' => true,
                \'show_in_menu\' => true,
                \'show_ui\' => true,
                \'menu_icon\' => \'dashicons-book-alt\',
                \'supports\' => array( \'title\', \'editor\' ),
                \'rewrite\' => array( \'slug\' => $options[\'plugin_shell_slug_url_setting\'] ? get_post($options[\'plugin_shell_slug_url_setting\'])->post_name : \'plugin-shell\', \'with_front\' => false )
            )
        );
    }

/*********************************************************
    BEGIN: CONTEXTABLE META BOX
 *********************************************************/

   /**
    *
    * CALLS ALL OF THE FUNCTIONS RESPONSIBLE FOR RENDERING THE CONTEXTABLE PLUGIN SHELL META BOX
    *
    * @since 0.0.0
    *
    **/
    function plugin_shell_add_contextable_meta_box() {
        $this->_plugin_shell_add_contextable();
    }

   /**
    *
    * RENDERS THE META BOX 
    * Responsible for allowing the user to enter the plugin shell term.
    *
    * @since 0.0.0
    *
    **/
    function _plugin_shell_add_contextable() {
        add_meta_box( 
            \'contextable-meta-box\', 
            __( \'Extended Context Meta Box\', \'pluginshell-textdomain\' ), 
            array( &$this, \'_display_contextable_meta_box\' ), 
            \'plugin_shell\', // CHANGE TO DESIRED post-type
            \'after_editor\', // CHANGE THIS TO \'after_editor\' || \'after_title\' || OR OTHER VALID CONTEXT LOCATION
            \'default\' 
        );
    }

   /**
    * 
    * DISPLAYS THE CONTENTS OF THE PLUGIN SHELL TERM META BOX
    *
    * @since 0.0.0
    *
    **/ 
    function _display_contextable_meta_box() {

        printf( \'<div id="wordcount"></div><br />&nbsp;<br />\' );
    }

/*********************************************************
    END: CONTEXTABLE META BOX
 *********************************************************/

   /**
    * 
    * CALLS ALL OF THE FUNCTIONS RESPONSIBLE FOR RENDERING THE PLUGIN SHELL META BOX
    *
    * @since 0.0.0
    *
    **/
    function plugin_shell_add_meta_boxes() {
        $this->_plugin_shell_add_meta_box();
    }

   /**
    *
    * RENDERS THE META BOX 
    * Responsible for allowing the user to enter the plugin shell term.
    *
    * @since 0.0.0
    *
    **/
    function _plugin_shell_add_meta_box() {
        add_meta_box( \'plugin_shell\', __(\'Plugin Shell Extra Meta Box\', \'pluginshell-textdomain\'), array( &$this, \'_plugin_shell_definiton_meta_box\' ), \'plugin_shell\', \'normal\', \'high\' );
    }

   /**
    * 
    * DISPLAYS THE CONTENTS OF THE PLUGIN SHELL TERM META BOX
    *
    * @since 0.0.0
    *
    **/ 
    function _plugin_shell_definiton_meta_box() {
        ?>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Nullam id dolor id nibh ultricies vehicula ut id elit. Donec id elit non mi porta gravida at eget metus.</p>

<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Nullam quis risus eget urna mollis ornare vel eu leo. Vestibulum id ligula porta felis euismod semper. Curabitur blandit tempus porttitor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>

<p>Vestibulum id ligula porta felis euismod semper. Cras mattis consectetur purus sit amet fermentum. Vestibulum id ligula porta felis euismod semper. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
<?php
    }

   /**
    * 
    * SAVES PLUGIN SHELL TERM
    *
    * @since 0.0.0
    *
    **/
    function plugin_shell_meta_box_save( $post_id, $post ) {
        $key = \'_plugin_shell_term\';

        //  verify the nonce
        if ( !isset($_POST[\'_plugin_shell_nonce\']) || !wp_verify_nonce( $_POST[\'_plugin_shell_nonce\'], plugin_basename(__FILE__) ) )
            return;

        //  don\'t try to save the data under autosave, ajax, or future post.
        if ( defined(\'DOING_AUTOSAVE\') && DOING_AUTOSAVE ) return;
        if ( defined(\'DOING_AJAX\') && DOING_AJAX ) return;
        if ( defined(\'DOING_CRON\') && DOING_CRON ) return;

        //  is the user allowed to edit the URL?
        if ( ! current_user_can( \'edit_posts\' ) || $post->post_type != \'plugin_shell\' )
            return;

        $value = isset( $_POST[$key] ) ? $_POST[$key] : \'\';

        if ( $value ) {
            //  save/update
            $my_post = array();
            update_post_meta($post->ID, $key, $value);
        } else {
            //  delete if blank
            delete_post_meta($post->ID, $key);
        }

    }

   /**
    *
    * ADMIN MENU AND
    * SETTING FEILDS
    *
    **/

   /**
    * 
    * BUILD THE SETTINGS OPTIONS PAGE
    *
    * @since 0.0.0
    *
    **/
    function _plugin_shell_build_options_page() { 
        ?>
        <div id="plugin-shell-options-wrap">
            <div class="icon32" id="icon-tools"> <br /> </div>
            <form method="post" action="options.php" enctype="multipart/form-data">
                <?php settings_fields(\'plugin_shell_option_group\'); ?>
                <?php do_settings_sections(__FILE__); ?>
                <p class="submit">
                    <input name="Submit" type="submit" class="button-primary" value="<?php esc_attr_e(\'Save Changes\'); ?>" />
                </p>
            </form>
            <p><hr></p>
            <p>* After editing the Slug the Permalinks Settings must be saved again.</p>
        </div>
        <?php 
    }

   /**
    * 
    * REGISTER SETTINGS AND FIELDS FOR OPTIONS PAGE
    *
    * @since 0.0.0
    *
    **/
    function plugin_shell_register_and_build_fields() {
        register_setting(\'plugin_shell_option_group\', \'plugin_shell_option_mainpage\', \'plugin_shell_validate_setting\');
        add_settings_section(\'plugin_shell_settings_general\', \'Plugin Shell General Settings\', array( &$this, \'_plugin_shell_settings_fields\'), __FILE__);
    }

   /**
    * 
    * RENDER THE SLUG SELECTION SETTINGS FIELD
    *
    * @since 0.9.2
    *
    **/
    function _plugin_shell_settings_fields() {
        add_settings_field(\'slug\', \'Mainpage:\', array( &$this, \'_plugin_shell_slug_url_setting\'), __FILE__, \'plugin_shell_settings_general\');
    } 

   /**
    * 
    * SANITIZE OPTIONS
    *
    * @since 0.0.0
    *
    **/
    function plugin_shell_validate_setting($plugin_shell_options) {
        return $plugin_shell_options;
    }


   /**
    * 
    * GET DROPDOWN OF ALL PAGES FOR SLUG SETTING OPTION
    *
    * @since 0.0.0
    *
    **/
    function _plugin_shell_slug_url_setting() {
        $options = get_option(\'plugin_shell_options\');
        wp_dropdown_pages(array(\'name\' => \'theme_options[plugin_shell_slug_url_setting]\', \'selected\' => $options[\'plugin_shell_slug_url_setting\'] ));
    }

   /**
    * 
    * ADD THE OPTIONS PAGE
    *
    * @since 0.0.0
    *
    **/
    function plugin_shell_options_page() { 
        add_options_page(\'Plugin Shell\', \'Plugin Shell\', \'administrator\', __FILE__, array( &$this, \'_plugin_shell_build_options_page\' ) );
    }
};

/**
 * 
 * INSTANTIATE CLASS plugin_shell
 *
 * @since 0.0.0
 *
 **/
$PluginShell = new plugin_shell;

?>

1 个回复
最合适的回答,由SO网友:bueltge 整理而成

TinyMCE编辑器在其API中有函数来获取编辑器的内容。要获取所选内容的所有内容，请使用以下来源：

tinyMCE.activeEditor.selection.getContent();

自4.3版以来，WordPress对编辑器进行了大量更改。始终使用API 4在文档页面中查找正确的函数。Here for documentation 关于在编辑器中获取内容。API的所有有用功能都可以在下面的链接中找到。

使用所有内容tinymce.activeEditor.selection.getNode().

对于在WordPress环境中的使用，也可以使用jQuery，这是核心的一部分。例如，创建tinymce的实例并添加源代码。

jQuery( document ).ready( function( $ ) {

    tinymce.PluginManager.add( \'Your_Namespace\', function( editor ) {

                if ( typeof(
                        tinymce.activeEditor.selection.getContent()
                    ) != \'undefined\' ) {
                    marked = true;
                }

                if ( marked == true ) {
                    var content       = tinymce.activeEditor.selection.getContent(),
                        start_content = tinymce.activeEditor.selection.getStart().nodeName,
                        all           = tinymce.activeEditor.selection.getNode()
                }

                // Debug in Console
                console.log(all);

    } );
} );

标签： php   plugin-development   jquery   metabox   javascript   小码农  

相关推荐

显示作者姓名PHP(自制插件)

我有一个需要帮助的问题，因为我自己找不到解决办法。我接管了一个网站，之前有人在那里创建了一个自制插件。。使用默认插件“Contact Form 7”，用户可以在页面上创建帖子。（）https://gyazo.com/c8b20adecacd90fb9bfe72ad2138a980 )关于自行创建的插件“Contact Form 7 extender”，帖子是通过PHP代码在后台生成的(https://gyazo.com/115a6c7c9afafd2970b66fd421ca76a3)其工作原理如下：如果