CLEditor и количество символов - PullRequest
Новая
       21

CLEditor и количество символов

0 голосов
/ 30 августа 2018

Сегодня я занимался настройкой 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);
});

но это не работает. все не так? или у меня есть надежда?

заранее спасибо !!

...