Предварительно отформатированный текст в HTML. Как вставить текст из редактора?

предварительно отформатированный текст в html. как вставить текст из редактора?

Проблематика обычного текста

Мы привыкли работать с текстовыми редакторами, такими как Microsoft Word. Они далеки от составления HTML-документов, так как созданы для других целей. В них можно задавать разнообразное форматирование[1] обычному тексту. Проблема возникает когда вы, написав что-то в редакторе и задав форматирование (жирность, цвет, размер шрифта и т.д), пытаетесь скопировать это в HTML-разметку. Вставленный таким образом обычный текст не сохранит своей стилизации.

Пример, приведенный ниже, представляет собой кусок программного кода. Если мы просто скопируем его и поместим в элемент <p> (абзац), браузер отобразит всё в одну строчку. Несколько пробелов, идущих друг за другом, будут преобразованы в один, а табуляции и переводы строк удалены.

//Пример программного кода
function testFunction($firstParam, $secondParam) {
    echo 'Привет мир!';
}

Важно
Одними лишь средствами HTML невозможно сохранить всё форматирование обычного текста, скопированного из редактора. Для этого применяется дополнительная программная обработка, которая автоматически преобразует стили редактора в HTML-элементы и правила CSS.

Вставка отформатированного текста

Для добавления предварительно отформатированного текста в HTML существует элемент <pre>. Строки, вставленные между открывающим тегом <pre> и закрывающим тегом </pre>, будут отображены моноширным шрифтом. Как и было сказано выше, текст сохранит только переводы строк, табуляции, любое количество пробелов идущих друг за другом, а остальное форматирование будет утрачено. Также нужно отметить, что HTML-элементы, присутствующие в тексте, будут обработаны браузером как обычно.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Вставка отформатированного текста</title>
    </head>
    <body>
        <pre>
            Столицы мира

            <b>Лондон</b>    Великобритания
            <b>Париж</b>    Франция
            <b>Москва</b>    Россия
        </pre>
    </body>
</html>
Пример отображения отформатированного текста вставленного в элемент <pre>
Рис. 1. Отображение предварительно отформатированного
текста

Термины, использованные в статье

  1. Форматирование текста — способ изменения текста и его начертания с целью улучшить восприятие каких-либо его участков. К примеру, заголовок может быть выделен жирным и иметь размер шрифта гораздо больший, чем у основного содержания.

Последние публикации