如何使用 jquery/javascript 在 ckeditor textarea 中首先限制 position 的空間

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/basicckeditor/4.13.0/basicckeditor/

CKEDITOR.replace('QBQuestion');

     CKEDITOR.instances.QBQuestion.on('key', function (evt) {
            var kc = evt.data.keyCode;
            console.log(evt);
            if (kc === 32) {
                    event.preventDefault();
               }
        });

在第一個 position 中限制空間不起作用。 我已經更新了 jquery 代碼，但 kc===32 完全不允許空間，但我的要求是在第一個 position 只有我不想要空間

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>