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

Я работаю над созданием редактора для редакции газеты моей школы, чтобы иметь возможность перейти на страницу, в которой есть места для ввода информации (например, img url, заголовки, титры), и он выведет HTML-код, который уже стилизован.Создание формы JS, которая выводит полезный HTML

Так они печатают в форме в области заголовка: «Название»

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

и было бы вывести что-то вроде этого:

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

(div1 С тех пор, так как это первая один вы поставите и может добавить еще позже)

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

спасибо.

EDIT: Мы не можем создать Wordpress из-за контрактов с внешними компаниями.

источник

2016-10-20 Bradley Jones

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

Настроить Wordpress возможно. – Brian

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

Это зависит от того, хотите ли вы самостоятельно реализовать решение или использовать то, что уже есть. Этот тип функциональности уже встроен в такие платформы, как Wordpress и SquareSpace, из окна редактора WYSIWYG (что вы видите, что вы получаете) - похоже на поле вопроса Stackoverflow.

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

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>

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

Alex

источник

2016-10-20 23:02:15

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

ответ

Смежные вопросы