CLEditor и количество символов
Сегодня я занимался настройкой CLEditor WYSIWYG Editor так, чтобы он мог работать внутри html / php формы, которую я ранее уже запрограммировал.
Раньше я спрашивал, как сосредоточиться, нажимая внешнюю кнопку ( ссылку)... теперь вопрос становится для меня более сложным, так как я действительно новичок в этом вопросе...
Я хотел бы попытаться посчитать символы текста и показать их через элемент span.
пока я добился успеха в своем намерении путем перекрестка: я копирую содержимое текста в новую текстовую область, с которой связываю событие для подсчета и отображения символов. но я думаю это будет только последний пляж!!!
Я попытался сконцентрироваться только на кадре, который составляет мой CLEditor, и на данный момент результат таков:
<textarea class="form-control" placeholder="Titolo" type="text" name="nomexf" id="nomexf" tabindex="1" maxlength="300" rows="3"></textarea>
<span id="totalChars1" class="form-control" style="background:#eaeaea">Conta caratteri</span>
<script>
$(document).ready(function() {
$("#nomexf").cleditor({
controls: // controls to add to the toolbar
"bold italic underline strikethrough subscript superscript | color highlight removeformat | bullets numbering | outdent " +
"indent | undo redo | " +
"rule link unlink | cut copy paste pastetext | print source",
colors: // colors in the color popup
"FFF FCC FC9 FF9 FFC 9F9 9FF CFF CCF FCF " +
"CCC F66 F96 FF6 FF3 6F9 3FF 6FF 99F F9F " +
"BBB F00 F90 FC6 FF0 3F3 6CC 3CF 66C C6C " +
"999 C00 F60 FC3 FC0 3C0 0CC 36F 63F C3C " +
"666 900 C60 C93 990 090 399 33F 60C 939 " +
"333 600 930 963 660 060 366 009 339 636 " +
"000 300 630 633 330 030 033 006 309 303",
useCSS: false, // use CSS to style HTML when possible (not supported in ie)
docType: // Document type contained within the editor
'<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//IT" "http://www.w3.org/TR/html4/loose.dtd">',
docCSSFile: // CSS file used to style the document contained within the editor
"",
bodyStyle: // style to assign to document body contained within the editor
"margin:4px; font:10pt Arial,Verdana; cursor:text"
});
});
</script>
и это код JS для подсчета и отображения символов до 300
counter1 = function() {
const mq = window.matchMedia( "(max-width: 350px)" );
const mq2 = window.matchMedia( "(max-width: 399px)" );
const mq3 = window.matchMedia( "(max-width: 991px)" );
var value1 = $("#nomexf").cleditor()[0].val();
if (value1.length == 0) {
$('#totalChars1').html();
return;
}
var totalChars1 = value1.length;
if (mq.matches) {
var caratteri = '<font style="font-size:10px">Caratteri: <font color=#4797d3>' + totalChars1 + '</font>/300</font>';
}
else if (mq2.matches) {
var caratteri = '<font style="font-size:10px">Caratteri inseriti: <font color=#4797d3>' + totalChars1 + '</font>/300</font>';
}
else if (mq3.matches) {
var caratteri = '<font style="font-size:10px">Caratteri inseriti: <font color=#4797d3>' + totalChars1 + '</font>/300</font>';
}
else {
var caratteri = '<font style="font-size:14px">Caratteri inseriti: <font color=#4797d3>' + totalChars1 + '</font>/300</font>';
}
$('#totalChars1').html(""+caratteri+"");
};
$("#nomexf").cleditor[0].ready(function() {
$("#nomexf").cleditor()[0].change(counter1);
$("#nomexf").cleditor()[0].keydown(counter1);
$("#nomexf").cleditor()[0].keypress(counter1);
$("#nomexf").cleditor()[0].keyup(counter1);
$("#nomexf").cleditor()[0].blur(counter1);
$("#nomexf").cleditor()[0].focus(counter1);
});
но это не работает все не так? или у меня есть надежда?
заранее спасибо!!