我正在使用带有wp\\U编辑器的前端内置(文章目录插件)tinymce<不管我怎么做,我都无法让单词计数器自动工作。。
我可以使用jquery单词计数器在HTML选项卡中很好地计算单词,但在wysisyg选项卡中却不能,因为它是一个iframe。。。
我有了一些新的白发来处理这个问题,非常感谢您的输入/帮助,甚至是gr8对解决方案的引用。
Here is the code i currently have (relevant part of the page) including
the jquery counter which i would rather not use and would rather use wordpress
or to be precise tinymce build in plugin / ability to count words as if inside the dashboard.
<script type="text/javascript">
$(document).ready(function() {
$("[class^=\'count[\']").each(function() {
var elClass = $(this).attr(\'class\');
var minwords = 0;
var maxWords = 0;
var countControl = elClass.substring((elClass.indexOf(\'[\'))+1, elClass.lastIndexOf(\']\')).split(\',\');
if(countControl.length > 1) {
minwords = countControl[0];
maxWords = countControl[1];
} else {
maxWords = countControl[0];
}
$(this).after(\'<div class="wordcount"><strong>0</strong> Words</div>\');
if(minwords > 0) {
$(this).siblings(\'.wordcount\').addClass(\'errorwords\');
}
$(this).bind(\'keyup click blur focus change paste\', function() {
var numWords = jQuery.trim($(this).val()).split(\' \').length;
if($(this).val() === \'\') {
numWords = 0;
}
$(this).siblings(\'.wordcount\').children(\'strong\').text(numWords);
if(numWords < minwords || (numWords > maxWords && maxWords != 0)) {
$(this).siblings(\'.wordcount\').addClass(\'errorwords\');
} else {
$(this).siblings(\'.wordcount\').removeClass(\'errorwords\');
}
});
});
});
</script>
<?php
wp_print_scripts(\'quicktags\');
require_once(ABSPATH . \'/wp-admin/includes/post.php\');
function richedit() { return true; }
add_filter(\'user_can_richedit\', \'richedit\');
//wp_tiny_mce( false, array( \'height\' => \'370\' ) );
if ($options[\'default_editor\'] == \'html\') {
add_filter( \'wp_default_editor\', create_function(\'\', \'return "html";\') );
} else {
add_filter( \'wp_default_editor\', create_function(\'\', \'return "tinymce";\') );
}
wp_editor($_POST[\'post\'], \'minword\' , array(\'textarea_name\' => \'minword\', \'editor_class\' => \'count[50,0]\'));
} else {
echo \'<style type="text/css">#quicktags {display:none}</style>\';
wp_editor($_POST[\'post\'], \'minword\' , array(\'textarea_name\' => \'minword\', \'editor_class\' => \'count[50,0]\'));
}
?>
。
REVISED TO BETTER EXPLAIN @bueltge AND OTHER\'S MY PROBLEM...
我已经在线上传了一个临时版本,以便向您展示问题所在。
该网站是希伯来文的,因此您需要使用演示用户/密码组合登录,即:temp/temp
Url:HERE
然后单击最后一个按钮,表示从左侧开始的第一个
您将看到编辑器。尝试写入时,chars计数器不会更改,但如果单击HTML选项卡,则会看到chars计数器正在工作。。
So.. How can i get the counter to count when in wysisyg mode?
本例使用了buelge建议的代码,该代码对id进行了微小的更改-下面是我修改的前两行
var comment_input = $( \'#articleSubmit textarea\' );
var submit_button = $( \'#articleSubmit #submit\' );
SO网友:ungestaltbar
因为评论的字符限制(讽刺:):
您可以尝试使用tinymce对象来获取内容,而不是通过类或什么来选择textarea。在你的情况下,这是tinyMCE。编辑。minword。获取内容。这将返回内容的长度。。不确定,但不管是在视觉模式还是html模式下。。。但即使重要,也要针对视觉模式使用(重复我自己)tinymce。编辑。minword。获取内容。要检查编辑器处于哪种模式,可以使用以下内容:
// get the container
container = $(\'.wp-editor-wrap\');
// check for current state
if ( $(container) ).hasClass(\'html-active\') )
{ ..html mode stuff.. }
else
{ visual mode stuff }
其中html模式的东西/视觉模式的东西只是指切换键控功能的选择器。
编辑:确认。getContent不关心当前状态也可以查看此线程:How to get the input of a TinyMCE editor when using on the front-end?
所以使用tinyMCE即可。编辑##编辑器id##。获取当前使用的编辑器的长度。
EDIT:
没有测试,不能保证没有错误
<script type="text/javascript">
$(document).ready(function() {
$("[class^=\'count[\']").each(function() {
var elClass = $(this).attr(\'class\');
// new line, editor id
var elId = $(this).attr(\'id\');
var minwords = 0;
var maxWords = 0;
var countControl = elClass.substring((elClass.indexOf(\'[\'))+1, elClass.lastIndexOf(\']\')).split(\',\');
if(countControl.length > 1) {
minwords = countControl[0];
maxWords = countControl[1];
} else {
maxWords = countControl[0];
}
$(this).after(\'<div class="wordcount"><strong>0</strong> Words</div>\');
if(minwords > 0) {
$(this).siblings(\'.wordcount\').addClass(\'errorwords\');
}
$(this).bind(\'keyup click blur focus change paste\', function() {
// new line, reference element ID
var content = get_tinymce_content(elId);
// changed line
var numWords = jQuery.trim(content).split(\' \').length;
if($(this).val() === \'\') {
numWords = 0;
}
$(this).siblings(\'.wordcount\').children(\'strong\').text(numWords);
if(numWords < minwords || (numWords > maxWords && maxWords != 0)) {
$(this).siblings(\'.wordcount\').addClass(\'errorwords\');
} else {
$(this).siblings(\'.wordcount\').removeClass(\'errorwords\');
}
});
});
});
function get_tinymce_content(elId){
if (jQuery("#"+elId+"-wrap").hasClass("tmce-active")){
return tinyMCE.editors.elId.getContent();
}else{
return jQuery(\'#\'+elId).val();
}
}
</script>