Как настроить CKEditor 5 для удаления ненужных стилей и тегов при вставке из Word?
У 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);
});