有没有办法在 wp_editor 函数中应用字符限制？答案

【问题标题】：Is there a way to apply characters limit inside wp_editor function?有没有办法在 wp_editor 函数中应用字符限制？
【发布时间】：2012-09-21 13:00:17
【问题描述】：

我正在尝试找出如何在前端提交表单的资源框中组合此代码，但我需要将其限制为一定数量的字符。

<?php wp_editor( get_option('resource'), 'resource', array('textarea_name' => 'resource', 'class'=>'requiredField', 'textarea_rows'=>'6','id'=>'resource' ,'onkeyup'=>'countChar(this)','media_buttons' => false)  );?><?php if(isset($_POST['resource'])) { if(function_exists('stripslashes')) { echo stripslashes($_POST['resource']); } else { echo $_POST['resource']; } } ?>

此代码检查该字段是否为空：

<?php if(isset($_POST['resource'])) { if(function_exists('stripslashes')) { echo stripslashes($_POST['resource']); } else { echo $_POST['resource']; } } ?>

如何在 wp_editor 函数中进行检查？我需要这个来允许和简化我的资源框中的 html 给用户...

这是我在里面使用的 javascript 函数 ('onkeyup'=>'countChar(this)') 但它不起作用。

我在这儿摔倒了吗？

【问题讨论】：

在 tinymce 论坛上 - tinymce.com/forum/viewtopic.php?pid=42404#p42404
谢谢，但我不清楚我的需求。我需要它只在我提交表单上的两个 wp_editor 的一个实例中工作......对不起！而且我也想知道如何在上面的代码中进行这项工作，因为 javascript 调用不起作用......
请看看我的回答，如果它成功了就接受它，或者如果您有任何问题，请告诉我。我刚刚对其进行了编辑以允许它检查编辑器的 ID，因此字符限制将仅应用于您希望限制的编辑器。

标签： javascript wordpress tinymce frontend

【解决方案1】：

首先，您需要更正 wp_editor 的实现。你的代码应该是这样的：

<?php wp_editor( get_option('resource'), 'resource', array('textarea_name' => 'resource', 'editor_class'=>'requiredField', 'textarea_rows'=>'6', 'media_buttons' => false)  );?>

请注意，the wp_editor function 不接受 javascript 方法的参数，并且有一个 'editor_class' 参数，但它本身没有 'class'。

接下来，您需要将 keyup 事件（或 keydown 事件）绑定到 TinyMCE 编辑器。这需要在编辑器初始化时完成。 This other Q&A 帮助我为您找到了解决方案。您需要在您的 functions.php 文件中添加类似于以下内容的内容：

add_filter( 'tiny_mce_before_init', 'wpse24113_tiny_mce_before_init' );
function wpse24113_tiny_mce_before_init( $initArray )
    {
        $initArray['setup'] = <<<JS
                [function(ed) {
                ed.onKeyDown.add(function(ed, e) {
                   if(tinyMCE.activeEditor.editorId=='resource') || (tinyMCE.activeEditor.editorId=='the_other_editor_id_you_want_to_limit') {
                        countChar(tinyMCE.activeEditor.getContent());
                     }
                });
            }][0]
            JS;
    return $initArray;
    }

这将更改 TinyMCE 初始化以为您添加事件。当事件被触发（按键被按下）时，该函数将检查活动编辑器的 ID，以查看它是否是您希望限制其字符数的编辑器之一。然后它会抓取编辑器的内容并将其传递给您的 countChar 函数。

【讨论】：

我还没试过，但这值得评论：这是一个很好的解释和答案！谢谢！

【解决方案2】：

我根据自己的需要稍微修改了 Bryan Gentry 的解决方案，它运行良好。如果您需要类似的功能，这是我的代码。

add_filter( 'tiny_mce_before_init', 'wpse24113_tiny_mce_before_init' );
function wpse24113_tiny_mce_before_init( $initArray )
{
    $initArray['setup'] = <<<JS
[function(ed) {
    ed.onKeyDown.add(function(ed, e) {
        if(tinyMCE.activeEditor.editorId=='content-id') {
            var content = tinyMCE.activeEditor.getContent();
            var max = 300;
            var len = content.length;
            if (len >= max) {
              $('#charNum').html('<span class="text-error">You've got more then '+max+' characters!</span>');
            } else {
             var charCount = max - len;
             $('#charNum').html(charCount + ' characters left');
            }
         }
    });

}][0]
JS;
    return $initArray;
}

【讨论】：