CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user7461846
user7461846

Reputation:

How to create a WYSIWYG like jsfiddle

I'm trying to create my own jsfiddle funcionality.

Three textboxes with some codes, but have no idea how to make (and remake) files with their contents.

Or, is there another way to play the code, without creating files ?

$('.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.log('clicked');
});
</textarea>
<br><br>
<button>CLICK</button>

Upvotes: 0

Views: 121

Answers (2)

ewwink
ewwink

Reputation: 19154

create iframe and write the content to the iframe. jsFiddle Demo, not working here because not allowed to aceess 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.log('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>

Upvotes: 1

KolaCaine
KolaCaine

Reputation: 2187

Below, you can find a very simple example that you want.

For render html into your view, you can juste get the value from your textarea and paste in into your content that when you want to do

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>

Upvotes: 0

Related Questions