Question

我被困在自动保存功能的一个相当简单的方面，这就是操作的当前状态，如概述页面https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/saving-data.html#demo所示。但看起来他们实际上并没有在任何地方引用它（以下示例）。

我的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>

Answer 1

您绝对正确。他们向我们展示了一个性感的状态更新程序，但没有为我们提供代码。这是我通过查看页面源从演示页面中提取的内容。根据您的要求，这应该为您提供状态更新。如果您有任何问题，请告诉我。

HTML：

<div id="snippet-autosave">
    <textarea name="content" id="CKeditor_Notes">            
        Sample text
    </textarea>
</div>
<!-- This will show the save status -->
<div id="snippet-autosave-header">
    <div id="snippet-autosave-status" class="">
         <div id="snippet-autosave-status_label">Status:</div>
              <div id="snippet-autosave-status_spinner">
                   <span id="snippet-autosave-status_spinner-label"></span>
                   <span id="snippet-autosave-status_spinner-loader"></span>
               </div>
          </div>
     </div>

CSS：

<style>
    #snippet-autosave-header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--ck-color-toolbar-background);
    border: 1px solid var(--ck-color-toolbar-border);
    padding: 10px;
    border-radius: var(--ck-border-radius);
    /*margin-top: -1.5em;*/
    margin-bottom: 1.5em;
    border-top: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

#snippet-autosave-status_spinner {
    display: flex;
    align-items: center;
    position: relative;
}

#snippet-autosave-status_spinner-label {
    position: relative;
}

    #snippet-autosave-status_spinner-label::after {
        content: 'Saved!';
        color: green;
        display: inline-block;
        margin-right: var(--ck-spacing-medium);
    }

/* During "Saving" display spinner and change content of label. */
#snippet-autosave-status.busy #snippet-autosave-status_spinner-label::after {
    content: 'Saving...';
    color: red;
}

#snippet-autosave-status.busy #snippet-autosave-status_spinner-loader {
    display: block;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border-top: 3px solid hsl(0, 0%, 70%);
    border-right: 2px solid transparent;
    animation: autosave-status-spinner 1s linear infinite;
}

#snippet-autosave-status,
#snippet-autosave-server {
    display: flex;
    align-items: center;
}

#snippet-autosave-server_label,
#snippet-autosave-status_label {
    font-weight: bold;
    margin-right: var(--ck-spacing-medium);
}

#snippet-autosave + .ck.ck-editor .ck-editor__editable {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}

#snippet-autosave-lag {
    padding: 4px;
}

#snippet-autosave-console {
    max-height: 300px;
    overflow: auto;
    white-space: normal;
    background: #2b2c26;
    transition: background-color 500ms;
}

    #snippet-autosave-console.updated {
        background: green;
    }

@keyframes autosave-status-spinner {
    to {
        transform: rotate( 360deg );
    }
}
</style>

其余的只是像在演示页面here上一样初始化编辑器。

              ClassicEditor
                    .create(document.querySelector('#CKeditor_Notes'), {
                        autosave: {
                            save(editor) {
                                return saveData(editor.getData());
                            }
                        }
                    })
                        .then(editor => {
                            window.editor = editor;

                            displayStatus(editor);
                        })
                        .catch(err => {
                            console.error(err.stack);
                        });

            // Save the data to Server Side DB.
            function saveData(data) {
                return new Promise(resolve => {
                    setTimeout(() => {
                        console.log('Saved', data);

                        SaveDataToDB(data)

                        resolve();
                    });
                });
            }

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

                pendingActions.on('change:hasAny', (evt, propertyName, newValue) => {
                    if (newValue) {
                        statusIndicator.classList.add('busy');
                    } else {
                        statusIndicator.classList.remove('busy');
                    }
                });
            }

CKEditor 5中的自动保存状态

1 个答案: