Блог

Главная - Вопросы по программированию - Создание JS-формы, которая выводит полезный HTML

Создание JS-формы, которая выводит полезный HTML

#javascript #html #output

#javascript #HTML #вывод

Вопрос:

Я работаю над созданием способа, с помощью которого редакторы моей школьной газеты могли бы переходить на страницу, на которой были бы места для ввода информации (ie. img URL, заголовки, подписи), и это привело бы к выводу HTML-кода, который уже стилизован.

Таким образом, они вводят в форму в области заголовка: «Title»

И в области абзаца: «Это тест»

и это привело бы к чему-то вроде этого:

 <div class="div1">
    <span>Title</span>
    <p>This is a test</p>
</div>

(div1, поскольку, поскольку это первый, который вы разместили и могли бы добавить позже)

Я пытался найти что-то подобное, и я знаю, что это возможно, я просто не знаю, с чего начать с этого или что бы я даже поискал в Google. Любая помощь была бы высоко оценена.

Спасибо.

РЕДАКТИРОВАТЬ: Мы не можем настроить WordPress из-за контрактов с внешними компаниями.

Комментарии:

1. Слишком широкое… вы можете использовать что угодно из кода ручной работы, шаблонов, React. JS или даже CMS для достижения этого. Генерация HTML на стороне клиента или сервера. Так много неопределенных переменных…

2. Вероятно, настроил wordpress.

3. Сделайте себе одолжение и не пытайтесь создавать редактор с нуля. Результаты Google WYSIWYG editor будут включать CKEditor и TinyMCE и т.д. Когда вы действительно напишете JS достаточно хорошо, вы сможете создать его с нуля и поймете, что оно того все равно не стоит.

Ответ №1:

Это зависит от того, хотите ли вы реализовать решение самостоятельно или использовать то, что уже есть. Этот тип функциональности уже встроен в такие платформы, как WordPress и SquareSpace, «из коробки» с помощью редактора WYSIWYG (что вы видите, то и получаете) — аналогично окну вопросов Stackoverflow.

Если вы хотите реализовать пользовательское решение, я бы рекомендовал изучить языки markdown. Например, вот одна библиотека javascript markdown под названием Remarkable:

https://github.com/jonschlinkert/remarkable.

Этот фрагмент кода взят непосредственно из их github README

 var Remarkable = require('remarkable');
var md = new Remarkable();

console.log(md.render('# Remarkable rulezz!'));
// => <h1>Remarkable rulezz!</h1>

Как вы можете видеть, текст markdown передается функции визуализации, и он преобразуется в html.

Алекс