Question

我有文本编辑器quilljs

我想将其内容复制到INPUT字段，而用户输入内容。

From＆＃34; editor-container＆＃34;到＆＃34; testMsg＆＃34;

HTML

  <div id="editor-container"></div>
   <input type="text" name="testMsg" id="testMsg">

JS

$('#replyBox').submit(function() {
    var value = $('#editor-container');
    var input = $('#testMsg');
    // value.val() // get the value first
    input.val(value.val());     
});

Answer 1

通常，如果您想要具有镜像输入效果，则需要在form control（例如input或<input>）上注册<textarea>事件。将其值赋给“ghost”表单控件的值。

quills插件不使用它使用contenteditable属性生成div.ql-editor的表单控件。

div没有value，因此您必须将其内容定位为文字或HTML。
input事件适用于接受文字的表单控件，因此需要使用keyboard事件。

BTW submit事件是表单数据发送到服务器的时间。处理表单控件时，input和change等事件在您不发送到服务器时更合适。有关使用jQuery的表单事件的更多信息，请参阅 this section 。

演示

#text {
  font: inherit;
  display: block;
  width: 99%;
  margin-top: 10px
}

<!DOCTYPE html>
<html>

<head>
  <link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
</head>

<body>


  <fieldset>
    <div id='editor'></div>
    <input id='text'>
  </fieldset>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>
  <script>
    var quill = new Quill('#editor', {
      theme: 'snow'
    });
    $('.ql-editor').on('keyup', function() {
      $('#text').val($(this).text());
    });
  </script>
</body>

</html>

在键入时，jquery将文本从一个输入复制到另一个输入

1 个答案:

演示