如何计算 WordPress 可视化编辑器中的字符数

Question

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

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

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

Answer 1

我不知道你从 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;
}

然后在 keyup 事件之后添加从 wp_editor 获取内容长度。只需添加 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 );
        });
    });
});

希望它对你有意义！

Answer 2

在互联网上搜索时，我遇到了相同的代码，该代码在 WordPress 的 TinyMCE 可视化编辑器中计算字符数。 Link原来的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

}

如何计算 WordPress 可视化编辑器中的字符数

How Count Chracters in WordPress Visual Editor

wordpress

jquery

tinymce