Question

出于开发目的，我需要知道用户输入的字符总数。

WordPress使用TinyMCE，使用下面的逻辑，如果我使用文本编辑器进行编辑，我可以在控制台中获取字符数。但它不适用于Visual Editor。为什么？如何计算在Visual Editor中输入的字符？

jQuery(function ($) {
    $("html").load().on("keyup", function () {
var content = document.getElementById("content").value.length;
    });
});

Answer 1

在互联网上搜索时，我遇到了相同的代码，这些代码计算了WordPress中TinyMCE的可视化编辑器中的字符数。链接到原始post是

add_action( 'admin_print_footer_scripts', 'check_textarea_length' );

function check_textarea_length() {  ?>

    <script type="text/javascript">

    var visual_editor_char_limit = 50;

    var html_editor_char_limit = 50;

    var char_limit_warning="Reduce word count!";

    // jQuery ready fires too early, use window.onload instead

    window.onload = function () {

            // are we using visual editor?

            var visual = (typeof tinyMCE != "undefined") && tinyMCE.activeEditor && !tinyMCE.activeEditor.isHidden()?true:false;

            if(visual){

                    jQuery('.mce-statusbar').append('<span class="word-count-message">'+ char_limit_warning +'</span>');



                    tinyMCE.activeEditor.on('keyup', function(ed,e) {

                            // Strip HTML tags, WordPress shortcodes and white space

                            editor_content = this.getContent().replace(/(<[a-zA-Z\/][^<>]*>|\[([^\]]+)\])|(\s+)/ig,'');



                            // debug:

                            console.log("tinymce editor current #chars: "+editor_content.length);



                            if ( editor_content.length > visual_editor_char_limit ) {



                                    jQuery('#content_ifr').addClass('toomanychars');



                                    // stop any more character input

                                    e.returnValue = false;

                                    e.cancelBubble = true;



                                    // debug:

                                    //console.log(" stop writing! ");



                                    return false;



                            } else {
                                    jQuery('#content_ifr').removeClass('toomanychars');

                            }

                    });

            }

            // do we have html editor?

            if(jQuery("#content").length){

                    jQuery("#content").keyup(function(){

                            // debug:

                             console.log("html editor current #chars : " + jQuery(this).val().length );

                            if(jQuery(this).val().length >  html_editor_char_limit){

                                    jQuery(this).val(jQuery(this).val().substr(0,  html_editor_char_limit));

                                    console.log(char_limit_warning);

                            }

                    });

            }

    }
    </script>
    <style type="text/css">

            .wp_themeSkin .word-count-message { font-size:1.1em; display:none; float:right; color:#fff; font-weight:bold; margin-top:2px; }
            .wp_themeSkin .toomanychars .mce-statusbar { background:red; }

            .wp_themeSkin .toomanychars .word-count-message { display:block; }

    </style>

    <?php

}

Answer 2

我不知道你计算TinyMCE字符的主要目的是什么，无论如何正常的管理脚本文件都不适用于此。因为你需要使用tinymce插件变量来做一些事情。

首先将此代码添加到functions.php中以初始化tinymce插件过滤器。

function tinymce_init() {
    // Hook to tinymce plugins filter
    add_filter( 'mce_external_plugins', 'tinymce_plugin' );
}
add_filter('init', 'tinymce_init');

function tinymce_plugin($init) {
    // We create a new plugin... linked to a js file.
    // Mine was created from a plugin... but you can change this to link to a file in your plugin
    $init['my_event'] = get_template_directory_uri() . '/js/myscript.js';
    return $init;
}

然后在wp_editor事件后的keyup添加获取内容长度。只需添加myscript.js

即可

jQuery(document).ready(function($) {
    // Create 'keyup_event' tinymce plugin
    tinymce.PluginManager.add('my_event', function(editor, url) {
        // Create keyup event
        editor.on('keyup', function(e) {
            var theContent = tinyMCE.activeEditor.getContent();
            // alert( theContent.length );
            console.log( theContent.length );
        });
    });
});

希望你有意义！

如何计算WordPress Visual Editor中的字符数

2 个答案: