Автосохранение статуса в CKEditor 5 - PullRequest
0 голосов
/ 05 июля 2019

Я застрял на довольно простом аспекте функции автосохранения, и это текущее состояние действия, как показано на странице обзора: https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/saving-data.html#demo. Но, похоже, они на самом деле нигде не ссылаются на него (пример ниже).

enter image description here

Мой HTML просто:

<textarea class="form-control" name="notes" id="notes">{!! $shipmentShortage->notes !!}</textarea>

Мой скрипт создания находится ниже, функция автосохранения работает просто отлично, но статус просто отсутствует:

<script>
ClassicEditor
    .create( document.querySelector( '#notes' ), {
        toolbar: [ 'heading', '|', 'bold', 'italic', 'link', 'bulletedList', 'numberedList', 'blockQuote', 'undo', 'redo' ],
        image: {
            toolbar: [ 'imageStyle:full', 'imageStyle:side', '|', 'imageTextAlternative' ],
        },
        autosave: {
            save( editor ) {
              console.log(editor.getData());
                // The saveData() function must return a promise
                // which should be resolved when the data is successfully saved.
                return saveData( editor.getData() );
            }
        }
    } );
    // Save the data to a fake HTTP server (emulated here with a setTimeout()).
function saveData( data ) {
    return new Promise( resolve => {
        setTimeout( () => {
            console.log( 'Saved', data );
            $.ajax({
              url: '/osd/shortages/update',
              type: 'POST',
              headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
              },
              data: {
                'shortage_id':'{{$shipmentShortage->id}}',
                'notes': data,
              },
              dataType: 'json',
              success: function (response) {
                console.log('saved');
              }
            });

            resolve();
        }, 5000 );
    } );
}
// Update the "Status: Saving..." info.
function displayStatus( editor ) {
    const pendingActions = editor.plugins.get( 'PendingActions' );
    const statusIndicator = document.querySelector( '#editor-status' );

    pendingActions.on( 'change:hasAny', ( evt, propertyName, newValue ) => {
        if ( newValue ) {
            statusIndicator.classList.add( 'busy' );
        } else {
            statusIndicator.classList.remove( 'busy' );
        }
    } );
}
  </script>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...