Просмотр просмотра отформатированного HTML-формы ввода с рельсами
-
14-11-2019 - |
Вопрос
Я хочу, чтобы особенность предварительного просмотра некоторых текста с тегами HTML, а затем сохранение текста в базе данных.Я знаю, что это не хорошая идея, чтобы разрешить HTML в базе данных, для соображений безопасности XSS.Какие способы достичь этого?
Я хочу, чтобы функция, подобная тому, которое у нас есть в Stackoverflow, где мы можем отформатировать наши SourceCodes.Спасибо.
Решение
Создать JavaScript Event Liversiver для формы на вашей HTML-странице Отказ Отправьте ввод через ajax к приложению Rails , где отображается вход (например, тем же помощником, который будет позже представлять вывод из базы данных).
Используйте язык разметки, как RedCloth / Textile , чтобы избежать XSS. Также легче набирать / понимать для ваших пользователей!
Создайте прослушиватель событий JavaScript и напишите содержимое формы / ввода в другой div.
JavaScript, который вам понадобится, зависит от того, какая библиотека, которую вы используете (например, прототип или jQuery).
<Сильный> Пример:
Предположим, у вас есть форма с текстовой, генеракодицетагкодом и областью предварительного просмотра с <textarea id="text"></textarea>
, и вы используете прототип:
document.observe("dom:loaded", function() {
new Form.Element.Observer('text', 0.25,
function () {
$('preview').update($F('text'));
}
);
}
.
Это проверит текстура каждые 250 мс для изменений и скопируйте свой ввод в предварительный просмотр div.
На самом деле, вам просто нужен код внутри функции, называемую с <div id="preview"></div>
(начиная с document.observe
. Генеракодицетагкод будет вызывать этот код после того, как браузер закончил построение DOM-дерева.
Другие советы
Вы также можете рассмотреть возможность использования чего-то вроде текстильной или уценки, которые являются способами достижения HTML-разметки с простой текстом.