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

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

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

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

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

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 редактора.

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").

function insertPlain() {
    // Вставка простого текста "Lorem ipsum" в позицию текущего курсора
    editorApi.document.insertContent('Lorem ipsum');
}

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

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

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

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-код
    );
}