Question

今天，我一直在配置 CLEditor所见即所得编辑器，以便它可以在我之前已经编程的html / php表单中使用。

我以前曾经问过如何通过单击外部按钮（link）来进行对焦...现在这个问题对我来说变得更加复杂，因为我确实是这方面的初学者...

我想尝试计算文本的字符并通过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>

这是用于计数和显示直到300个字符的js代码

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);
});

但是它不起作用。一切都错了吗？还是我有希望？

先谢谢您！

CLEditor和计数字符

0 个答案: