如何在ASP.NET中修改CKEditor的“Auto Save”提示信息

Hey there! Changing that default "Auto Save" prompt to something like "Saving your draft" is totally straightforward—just follow these steps based on which CKEditor version you're using:

CKEditor 5 #

CKEditor 5's AutoSave plugin gives you a couple of easy ways to tweak the notification text:

Method 1: Configure Directly in Initialization #

When setting up your editor, you can define custom messages for pending, success, and error states right in the autosave config:

ClassicEditor
    .create(document.querySelector('#editor'), {
        autosave: {
            // Your existing save logic here
            save: (editor) => {
                return fetch('/your-save-endpoint', {
                    method: 'POST',
                    body: editor.getData()
                });
            },
            // Customize the "saving in progress" message
            pendingNotification: {
                message: 'Saving your draft...'
            },
            // Optional: Custom success message
            successNotification: {
                message: 'Draft saved successfully!'
            },
            // Optional: Custom error message
            errorNotification: {
                message: 'Oops, failed to save your draft.'
            }
        }
    })
    .catch(error => {
        console.error(error);
    });

Method 2: Override Localization Strings #

If you prefer managing text through localization (great for multi-language setups), you can override the default translation keys:

import { ClassicEditor } from '@ckeditor/ckeditor5-editor-classic';
import { AutoSave } from '@ckeditor/ckeditor5-autosave';
import { Locale } from '@ckeditor/ckeditor5-utils';

// Create a custom locale with your modified text
const customLocale = new Locale({
    translations: {
        'en': {
            'autosave': {
                'pending': 'Saving your draft...',
                'success': 'Draft saved!',
                'error': 'Save failed.'
            }
        }
    }
});

ClassicEditor
    .create(document.querySelector('#editor'), {
        locale: customLocale,
        plugins: [AutoSave],
        autosave: {
            save: (editor) => { /* Your save logic */ }
        }
    });

CKEditor 4 #

For CKEditor 4, the process depends on which AutoSave plugin you're using (most are community-maintained, but the setup is similar):

Configure During Initialization #

Most AutoSave plugins let you pass custom messages in the editor config:

CKEDITOR.replace('editor', {
    extraPlugins: 'autosave',
    autosave: {
        message: 'Saving your draft...', // The "saving" prompt
        saveSuccessMessage: 'Draft saved successfully!',
        saveErrorMessage: 'Could not save your draft.'
    }
});

Override Language Strings Directly #

If your plugin doesn't support config messages, you can override the default language strings directly:

// Replace 'en' with your editor's language if needed
CKEDITOR.lang['en'].autosave.message = 'Saving your draft...';
CKEDITOR.lang['en'].autosave.saveSuccessMessage = 'Draft saved!';

Quick Note #

Make sure the AutoSave plugin is properly loaded (either included in your build or added as an extra plugin) before trying to tweak these settings. If you run into issues, double-check the specific version's documentation for exact config names—small differences can exist between plugin versions.

内容的提问来源于stack exchange，提问作者Irfan