如何使用 jquery/javascript 限制 ckeditor textarea

Question

这是我的 ckeditor div 代码<div>    <div class="QB-PanelName"><lable>Question</lable></div>    <textarea name="QBQuestion" id="QBQuestion" rows="10" cols="80"></textarea>                  </div>这是 javascript/jquery 代码 这是用于 CKeditor http://cdn.ckeditor.com/4.13.0/basic/ckeditor.js的 cdnCKEDITOR.replace('QBQuestion');     CKEDITOR.instances.QBQuestion.on('key', function (evt) {            var kc = evt.data.keyCode;            console.log(evt);            if (kc === 32) {                    event.preventDefault();               }        });在第一个位置限制空间是行不通的。我已经更新了 jquery 代码，但 kc===32 完全不允许空间，但我的要求是第一个位置，只是我不想要空间

Answer 1

你可以这样做：

ClassicEditor

  .create(document.querySelector('#QBQuestion'))

  .then(editor => {

    editor.editing.view.document.on('keydown', function(evt, data) {

      if (data.keyCode === 32 && $(data.domTarget).text().length === 0) {

        data.stopPropagation();

        data.preventDefault();

        evt.stop();

      }

    }, { priority: 'highest' });

  })

  .catch(error => {

    console.error(error);

  });

演示

ClassicEditor

  .create(document.querySelector('#QBQuestion'))

  .then(editor => {

    editor.editing.view.document.on('keydown', function(evt, data) {

      if (data.keyCode === 32 && $(data.domTarget).text().length === 0) {

        data.stopPropagation();

        data.preventDefault();

        evt.stop();

      }

    }, { priority: 'highest' });

  })

  .catch(error => {

    console.error(error);

  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://cdn.ckeditor.com/ckeditor5/15.0.0/classic/ckeditor.js"></script>

<div>

  <div class="QB-PanelName">

    <lable>Question</lable>

  </div>

  <textarea name="QBQuestion" id="QBQuestion" rows="10" cols="80"></textarea>

</div>