Когда мы копируем текст из Word и вставляем его в CKEditor 5, это может быть сопровождено появлением ненужного форматирования, стилей и другого "мусора", который при вставке может испортить внешний вид и функциональность редактора. Чтобы убрать этот "мусор" и сохранить только нужные данные, можно использовать несколько подходов.
1. Очистка форматирования:
- Используйте команду editor.commands.get('removeFormat').execute()
для удаления всех форматирований в выделенной области или во всем документе.
- Можно также использовать editor.model.applyTransform()
с требуемыми преобразованиями для удаления определенных элементов и атрибутов.
2. Очистка стилей:
- Используйте editor.conversion.for('downcast').remove()
для удаления нежелательных стилей при конвертировании контента.
- Можно также использовать editor.getDataFiltered()
с фильтром HTMLCleaner, который удаляет нежелательные стили и элементы.
3. Очистка специальных символов:
- Используйте editor.conversion.for('upcast').add()
для удаления специальных символов, таких как неразрывные пробелы, управляющие символы и прочие.
4. Очистка пустых элементов и атрибутов:
- Можно использовать editor.model.iterator()
и проверять каждый элемент на отсутствие содержимого или атрибутов. При нахождении пустого элемента или атрибута удалите его.
Пример кода для удаления форматирования, стилей и пустых элементов:
// Получение контента из редактора const data = editor.getData(); // Очистка форматирования editor.commands.get('removeFormat').execute(); // Очистка стилей при конвертировании контента editor.conversion.for('downcast').remove('style'); // Очистка специальных символов editor.conversion.for('upcast').add((dispatcher) => { dispatcher.on('element', (evt, data) => { data.data.attributes.forEach((attr) => { if (typeof attr.value === 'string') { attr.value = attr.value.replace(/u00a0/g, ''); } }); }); }); // Удаление пустых элементов и атрибутов const model = editor.model; const view = editor.editing.view; model.change((writer) => { const viewDocument = view.document; const viewRoot = viewDocument.getRoot(); viewDocument.on('change:isNull', (evt, item) => { // Удаление пустых элементов if (item !== viewRoot) { writer.remove(item); } }); // Удаление пустых атрибутов viewRoot.forEach((node) => { if (node.is('element')) { node.getAttributes().forEach((value, name) => { if (value === null || value === '') { node.removeAttribute(name); } }); } }); }); // Обновление контента в редакторе editor.setData(data);
Приведенный выше код демонстрирует удаление форматирования, стилей, специальных символов и пустых элементов из контента, полученного из CKEditor 5. Однако, помните, что данный код является лишь основой и может потребоваться дополнительная настройка и уточнение в зависимости от ваших конкретных требований и ситуации.