Как избавиться от непонятных символов при вставке текста из Word в CKEditor 5?

Как настроить CKEditor 5 для удаления ненужных стилей и тегов при вставке из Word?
  • 12 октября 2023 г. 10:08
Ответы на вопрос 2
У CKEditor 5 есть плагин под названием PasteFromOffice, который позволяет отфильтровывать непонятные символы и удалять ненужные стили и теги при вставке текста из Word.

Для использования этого плагина вам нужно выполнить следующие шаги:

1. Установите пакет плагина:

   ```bash
   npm install --save @ckeditor/ckeditor5-paste-from-office
   ```

2. Добавьте код в своем редакторе, чтобы подключить плагин:

   ```javascript
   import PasteFromOffice from '@ckeditor/ckeditor5-paste-from-office/src/pastefromoffice';

   ClassicEditor
       .create( document.querySelector( '#editor' ), {
           plugins: [ PasteFromOffice ],
           toolbar: [ 'pasteFromOffice' ]
       } )
       .then( editor => {
           console.log( 'Editor was initialized', editor );
       } )
       .catch( error => {
           console.error( error.stack );
       } );
   ```

Теперь при вставке текста из Word в CKEditor 5, плагин будет автоматически фильтровать ненужные символы, стили и теги.

Если этот плагин не подходит для ваших нужд, вы также можете вручную настроить фильтрацию текста при вставке из Word с использованием функции cleanup.html. Эта функция предоставляет возможность управлять фильтрацией HTML-кода при вставке. Вы можете удалить ненужные стили, теги и символы, используя регулярные выражения или другие методы фильтрации.

Вот пример использования cleanup.html:

```javascript
ClassicEditor
    .create( document.querySelector( '#editor' ), {
        // ...
        clipboard: {
            // Фильтрация кода при вставке из Word
            onPaste: ( event, data ) => {
                const cleanData = cleanup.html( data.dataValue, {
                    // Настраиваем фильтрацию здесь
                } );

                data.dataValue = cleanData;
            }
        }
    } )
    .then( editor => {
        console.log( 'Editor was initialized', editor );
    } )
    .catch( error => {
        console.error( error.stack );
    } );
```

Вы можете настроить функцию cleanup.html, указав дополнительные параметры. Подробную информацию о функции и ее параметрах вы можете найти в документации CKEditor 5.
// Используйте фичу по вставке содержимого из офисных программ, чтобы упростить работу с контентом. Подробнее о функционале можно прочитать здесь: https://ckeditor.com/docs/ckeditor5/latest/feature...

// Для добавления этой фичи вам нужно внести изменения в код плагинов. Ниже приведен пример кода с этими изменениями:
****
// CKEditor
ClassicEditor.create($('#data')[0], {
    htmlSupport: { allow: htmlSupport },
    removePlugins: [ 'Link', 'SourceEditing' ],
    plugins: [ PasteFromOffice],
    fontSize: { options: [ 8, 10, 12, 14, 18, 20, 24, 28, 36 ] },
})
.then(editor => {
    CKEditor = { field: 'data', data : editor };
})
.catch(error => {
    console.error(error);
});
Похожие вопросы