Выполнить html, css, js написанные в textarea
1,00
р.
Как можно сделать простой скрипт?
Например: три колонки где можно вводить код, html, css, js и четвертая колонка, где выводится результат.
Для тестирования html, css, js, подобно тому, что есть на сайтах codepen.io/pen и jsfiddle.net?
Ответ
В целом реализация не требует никакой серверной части. С сервера стоит только загружать предварительный контент в нужные элементы, а также сохранять их при необходимости. В остальном в сервере необходимости нет.
Уже была рекомендация использовать iFrame.
Вот мой пример, который делал когда-то для своих задач http://jsfiddle.net/r1o8n298/1/
HTML:
JS:
var widgetTpl = "<!DOCTYPE html>" + "" + "" + "" + "Widget" + "<\/head>" + "" + "<\/body>" + "<\/html>" var outputFrame = document.querySelector("#output") var outputDoc = outputFrame.contentDocument
var htmlEditor = document.querySelector("#html") var cssEditor = document.querySelector("#css") var jsEditor = document.querySelector("#js") var editors = [htmlEditor, cssEditor, jsEditor]
var prepareSource = function () { var src = widgetTpl var htmlStr = htmlEditor.value var cssStr = "" + cssEditor.value + "<\tyle>" var jsStr = "" + jsEditor.value + "<\cript>"
src = src.replace("<\/head>", cssStr + "<\/head>") src = src.replace("<\/head>", jsStr + "<\/head>") src = src.replace("<\/body>", htmlStr + "<\/body>") return src }
var render = function (source) { outputDoc.open() outputDoc.write(source) outputDoc.close() } var lastCode = prepareSource() render(lastCode) editors.forEach(function (editor) { editor.addEventListener("keyup", function () { var source = prepareSource() if (lastCode !== source) { render(source) lastCode = source } }) })
Например: три колонки где можно вводить код, html, css, js и четвертая колонка, где выводится результат.
Для тестирования html, css, js, подобно тому, что есть на сайтах codepen.io/pen и jsfiddle.net?
Ответ
В целом реализация не требует никакой серверной части. С сервера стоит только загружать предварительный контент в нужные элементы, а также сохранять их при необходимости. В остальном в сервере необходимости нет.
Уже была рекомендация использовать iFrame.
Вот мой пример, который делал когда-то для своих задач http://jsfiddle.net/r1o8n298/1/
HTML:
HTML
CSS
JavaScript
JS:
var widgetTpl = "<!DOCTYPE html>" + "" + "" + "" + "Widget" + "<\/head>" + "" + "<\/body>" + "<\/html>" var outputFrame = document.querySelector("#output") var outputDoc = outputFrame.contentDocument
var htmlEditor = document.querySelector("#html") var cssEditor = document.querySelector("#css") var jsEditor = document.querySelector("#js") var editors = [htmlEditor, cssEditor, jsEditor]
var prepareSource = function () { var src = widgetTpl var htmlStr = htmlEditor.value var cssStr = "" + cssEditor.value + "<\tyle>" var jsStr = "" + jsEditor.value + "<\cript>"
src = src.replace("<\/head>", cssStr + "<\/head>") src = src.replace("<\/head>", jsStr + "<\/head>") src = src.replace("<\/body>", htmlStr + "<\/body>") return src }
var render = function (source) { outputDoc.open() outputDoc.write(source) outputDoc.close() } var lastCode = prepareSource() render(lastCode) editors.forEach(function (editor) { editor.addEventListener("keyup", function () { var source = prepareSource() if (lastCode !== source) { render(source) lastCode = source } }) })
