Как создать WYSIWYG, например jsfiddle

Я пытаюсь создать свою собственную функциональность jsfiddle.

Три текстовых поля с некоторыми кодами, но понятия не имею, как создавать (и переделывать) файлы с их содержимым.

Или есть другой способ воспроизвести код без создания файлов?

$('.button').on('click', function(){
// create demo.css, demo.html and demo.js   
// open a new tab and play all the code
});

<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<textarea class='txthtml'>
<div class='parent'>
<div class='title'>lorem 01</div>
<div class='title'>lorem 02</div>
<div class='title'>lorem 03</div>
</div>
</textarea>

<textarea class='txtcss'>
.parent{
background:gold;
}

.title{
margin:5px 0;
backgorund:lightgreen;
}
</textarea>

<textarea class='txtjs'>
$('.title').on('click', function(){
console.info('clicked');
});
</textarea>
<br><br>
<button>CLICK</button>

вы можете создать функцию, которая прикрепляется к модальным элементам. Уточните, пожалуйста, ваш вопрос.

— 01.12.2018 21:21

используйте технику iframe и вставьте код в iframe

— 01.12.2018 21:28

@TemaniAfif iframe тоже нужны файлы

— 01.12.2018 21:29

нет, они этого не делают ... вы можете использовать контент как данные ... вот веб-сайт, который я создал с помощью этой техники: css-challenges.com ... Я использовал только CSS / HTML, но вы можете добавить JS

— 01.12.2018 21:32

javascript jquery html css

01.12.2018 21:00

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

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

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Ниже вы можете найти очень простой пример, который вам нужен.

Для рендеринга html в вашем представлении вы можете просто получить value со своего textarea и вставить в свой контент, который, когда вы хотите сделать

const code = document.querySelector('.code');
const btn = document.querySelector('.btn');
const render = document.querySelector('.render');

btn.addEventListener('click', () => {
	const getHTML = code.value;
  
  render.innerHTML = getHTML;
})

.code {
  width: 200px;
  height: 200px;
}

<textarea class = "code"></textarea>
<button class = "btn">go</button>

<div class = "render"></div>

01.12.2018 22:49

создать iframe и записать содержимое в iframe. jsFiddle Demo, здесь не работает, потому что не разрешено использовать iframe.

$('button').on('click', function() {
  var addJquery = $('#addJqury').is(':checked')
  var html = $('.txthtml').val(),
    css = $('.txtcss').val(),
    js = $('.txtjs').val(),
    output = '<style>' + css + '</style>' +
    html +
    '<script>' + js + '</script>';
  if (addJquery)
    output = '<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>' + output;

  var iframe = window.results.document;
  
  iframe.write(output);
  iframe.close();
});

textarea{min-height:80px;min-width:200px}
iframe{width:100%;height:100%;display:block}

<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<textarea class = "txthtml">
<div class='parent'>
<div class='title'>lorem 01</div>
<div class='title'>lorem 02</div>
<div class='title'>lorem 03</div>
</div>
</textarea>

<textarea class='txtcss'>
.parent{
background:gold;
}

.title{
margin:5px 0;
backgorund:lightgreen;
}
</textarea>

<textarea class='txtjs'>
$('.title').on('click', function(){
console.info('clicked: ' + $(this).html());
});
</textarea><br>
<input type = "checkbox" id = "addJqury" checked> Add Jquery?
<br><br>
<button>CLICK</button>
<hr>Results:
<hr>
<iframe name = "results" src = "about:blank"></iframe>

02.12.2018 08:41

Другие вопросы по теме

MVC: JQuery перейти к действию только с идентификатором первой строки

Функция jQuery для запуска на всех элементах с одинаковыми классами или идентификаторами, которые начинаются с одинакового имени

Удалить элемент в том же атрибуте с JQuery

Как мне бежать после замены url

Добавьте одно из двух изображений в один диапазон с помощью оператора if

Второй datePicker не может выбрать дату меньше, чем первый datePicker

Должен открываться только один дополнительный контейнер / jquery

Запустить функцию вставки PHP из javascript

Проблема ограничения масонграммы плагина jquery

Общая функция jQuery для условной неопределенной переменной

Как создать WYSIWYG, например jsfiddle

Ответы 2

Другие вопросы по теме

Похожие вопросы