Отображение необработанного текста в HTML как текстовый редактор - PullRequest
Новая
       1

Отображение необработанного текста в HTML как текстовый редактор

2 голосов
/ 21 марта 2012

У меня есть текстовая строка UTF8, которую я хотел бы отобразить в виде div (или всего <body>) на веб-странице в соответствии со следующими правилами:

  • Все символы должныбудет отображаться буквально, как в текстовом редакторе с поддержкой юникода.

  • Пробелы не следует игнорировать.Таблицы должны отступать от некоторого количества пробелов (например, 4 или 8).LF должны вызывать разрыв строки.

  • Текст должен автоматически переноситься словами (как это было бы для обычного абзаца <p>, или как в текстовом редакторе с включенной переносом слов).) по мере изменения ширины содержащего div текстового файла.

Ясно, что мне нужно выполнить некоторые шаги предварительной обработки текстовой строки, прежде чем вставить ее в веб-страницу (возможно, мне нужнозаменить определенные символы именованными объектами &foo;. Возможно, мне нужно окружить текстовый файл определенным тегом (например, <pre> и т. д.).

Точно, какие шаги предварительной обработки мне нужно выполнить для достижениявыше.Если есть несколько наборов шагов, которые достигают вышеуказанного, ответьте, пожалуйста, с самым коротким / самым простым.

Ответы [ 2 ]

3 голосов
/ 21 марта 2012

(1) и (3) на самом деле довольно просты, если вы обслуживаете свой документ как UTF-8 и у вас все в порядке с поддержкой IE> = 8. Тогда это: 

<body style="white-space: pre-wrap">
  (Your String here, '<' and '&' encoded to '&lt;' and '&amp;' respectively)
</body>

The пробел Свойство CSS здесь является ключевым.

Для (2) вам потребуется либо этап предварительной обработки (а-ля s/\t/ /g), либо подождите, пока все браузеры не поддержат вкладка размер .

2 голосов
/ 21 марта 2012

Очень простой способ сделать это без какой-либо предварительной обработки - это обернуть его в <textarea>.

HTML: 

<textarea readonly class="code">
 <!DOCTYPE html>
   <html>
     <head>
       <meta charset=utf-8 />
       <title>My Code</title>
     </head>
     <body>
       My Content
     </body>
   </html>
</textarea>

CSS: 

 .code {
    border:1px solid;
    width:500px;
    height:200px;
    overflow:auto;
    outline:none;
    resize:none;
  }

Однако, это несколько не семантически, поскольку textarea предназначен для редактирования. Если вам все равно, это хорошее решение - в противном случае я рекомендую Boldewyn's answer

http://jsbin.com/oxifek/edit#html,live

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...