Работа с содержимым документа

Используя надстройки и API, можно оперативно получать необходимые данные из документов и помещать их в требуемое местоположение.

Пример получения текста из текущего выделения

Рассмотрим сценарий, при котором требуется осуществить выбор определенного участка текста и визуализировать его содержимое в диалоговом окне.

Для этого удобно воспользоваться методами API редактора.

// Подключение к редактору
export default {
    // Начальная инициализация надстройки
    onInit() {
        async function getSelectionAsText() {
            try {
                // Получаем текст текущего выделения
                const text = await editorApi.document.selection.getSelectionAsText('plain/text');
                
                // Открываем модальное окно с извлечённым текстом
                editorApi.ui.modals.showModal({
                    id: 'demo-plugin:modal.about',
                    title: 'Текст выделения',
                    content: `<p>${text}</p>` // Передача текста в модальном окне
                });
            } catch(error) {
                console.error("Ошибка при получении выделения:", error);
            }
        }
    },
};

Пример получения текста в html-формате из текущего выделения

Иногда бывает полезно получить не только сам текст, но и его оформление в виде HTML-кода. Такой подход удобен, если нужно сохранить стили и разметку исходного текста.

Рассмотрим пример, как это делается с помощью API редактора.

// Подключение к редактору
export default {
    // Начальная инициализация надстройки
    onInit() {
        async function getSelectionAsHtml() {
            try {
                // Извлекаем выделенный текст в формате HTML
                const html = await editorApi.document.selection.getSelectionAsText('html');
            
                // Показываем модальное окно с HTML-разметкой
                editorApi.ui.modals.showModal({
                    id: 'demo-plugin:modal.about',
                    title: 'HTML-текст выделения',
                    content: html,
                    contentType: 'html', // Используем HTML для отображения
                });
            } catch (error) {
                console.error("Ошибка при получении HTML-выделения:", error);
            }
        }
    },
};

Пример вставки текста в документ

Часто возникают ситуации, когда нужно автоматически вставлять текст в нужное место документа.

Следующий пример демонстрирует простую реализацию вставки обычного текста ("lorem ipsum").

// Подключение к редактору
export default {
    // Начальная инициализация надстройки
    onInit() {
        function insertPlain() {
            // Вставка простого текста "Lorem ipsum" в позицию текущего курсора
            editorApi.document.insertContent('Lorem ipsum');
        }
    },
};

Пример вставки текста в html-формате в документ

Иногда требуется вставить не просто обычный текст, а текст с определенным стилем оформления, используя HTML-разметку. В таком случае API редактора позволяет вставлять сразу готовый HTML-код в нужный участок документа.

Рассмотрим следующий пример, который вставляет форматированную запись с заголовком и описанием:

// Подключение к редактору
export default {
    // Начальная инициализация надстройки
    onInit() {
        function insertHtml() {
            editorApi.document.insertContent(
                '<dl style="font-family: Roboto; font-size: 18px;">' +
                '<dt style="color: #234567; font-size: 2em; font-weight: 700;">Demo-Plugin says:</dt>' +
                '<dd style="padding: 0px 1em; background-color: #c5d47dff;"><b>Hello World,</b>&nbsp;Lorem ipsum</dd>' +
                '</dl>',
                'html', // Определяем, что вставляется HTML-код
            );
        }
    },
};