Теория, лежащая в основе разработки функции предварительного просмотра редактора HTML - PullRequest
Новая
       9

Теория, лежащая в основе разработки функции предварительного просмотра редактора HTML

2 голосов
/ 29 октября 2009

Может ли кто-нибудь описать и на высоком уровне (с подробностями курса), как можно разработать функцию предварительного просмотра html-редактора?

(как на этом сайте)

Что ты должен делать на самом деле?

1 Ответ

5 голосов
/ 29 октября 2009

Что ж, очень просто можно назначить входные данные пользователя для HTML-кода div. Используя jQuery, это будет выглядеть примерно так: 

<textarea id="userInput"></textarea><br>
<div id="previewDiv"></div>

<script>
$(document).ready(function(){
   // Whenever the user input changes, update the preview
   $("#userInput").change(function(){
      $("#previewDiv").html($("#userInput").val());
   }
}
</script>

Если вы не используете jQuery, вы можете исследовать свойство innerHTML, которое вы можете назначить для предварительного просмотра.

Обратите внимание, что вы можете захотеть сделать некоторую фильтрацию ввода пользователя; показ произвольного HTML-кода с вашего сайта позволил бы XSS (межсайтовый скриптинг) для вашего домена. Обратите внимание, что написание эффективного фильтра может быть очень трудным, и хороший (например, тот, который используется в stackoverflow) почти наверняка будет основан на белом списке.

...