Как ограничить пространство в первой позиции в текстовом поле ckeditor, используя jquery / javascript

Question

Это мой код div ckeditor

<div>
    <div class="QB-PanelName"><lable>Question</lable></div>
    <textarea name="QBQuestion" id="QBQuestion" rows="10" cols="80"></textarea>                 
 </div>

, и это код javascript / jquery. Это cdn, используемый для CKeditor http://cdn.ckeditor.com/4.13.0/basic/ckeditor.js

CKEDITOR.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>