code editor voor iFrame.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<body>
<div class="container grid">
<form>
<h2>HTML</h2>
<textarea id="html">//cool that you test this out</textarea>
<h2>CSS</h2>
<textarea id="css"></textarea>
<h2>JavaScript</h2>
<textarea id="javascript">didn't work now..</textarea>
</form>
</div>
<div class="output grid">
<iframe></iframe>
</div>
<script>
(function() {
$('.grid').height( $(window).height() );
var contents = $('iframe').contents(),
body = contents.find('body'),
styleTag = $('<style></style>').appendTo(contents.find('head'));
$('textarea').keyup(function() {
var $this = $(this);
if ( $this.attr('id') === 'html') {
body.html( $this.val() );
} else {
// it had to be css
styleTag.text( $this.val() );
}
});
})();
</script>
</body>
<div class="container grid">
<form>
<h2>HTML</h2>
<textarea id="html">//cool that you test this out</textarea>
<h2>CSS</h2>
<textarea id="css"></textarea>
<h2>JavaScript</h2>
<textarea id="javascript">didn't work now..</textarea>
</form>
</div>
<div class="output grid">
<iframe></iframe>
</div>
<script>
(function() {
$('.grid').height( $(window).height() );
var contents = $('iframe').contents(),
body = contents.find('body'),
styleTag = $('<style></style>').appendTo(contents.find('head'));
$('textarea').keyup(function() {
var $this = $(this);
if ( $this.attr('id') === 'html') {
body.html( $this.val() );
} else {
// it had to be css
styleTag.text( $this.val() );
}
});
})();
</script>
</body>
Hallo,
Ik ben bezig met een code editor zoals die van jsfiddle of codepen, maar het toevoegen van javascript werkt niet, dit is het goed werkende script dat hier boven staat het lukt me niet om javascript toe tevoegen. Dit script heb ik van net.tutsplus.com maar kan iemand me uitleggen hoe het idee werkt van die textarea's want ik roep die nergens aan maar toch werkt het...?
Ik ben niet z'n expert in js en in dit geval jQuery...
Kan iemand me hier bij helpen?
Alvast bedankt!
Gewijzigd op 25/06/2013 16:47:55 door Keizer Webdesign
Code (php)
1
2
3
2
3
$('textarea') // koppelt iets aan alle textarea's
$('#wortel') // koppelt iets aan een HTML element met id="wortel"
$('.prei') // koppelt iets aan ALLE HTML elementen waarvan class="prei" is.
$('#wortel') // koppelt iets aan een HTML element met id="wortel"
$('.prei') // koppelt iets aan ALLE HTML elementen waarvan class="prei" is.
daarom wordt de event (gebeurtenis) keyup al aan de code gekoppeld aan alle textarea's
Code (php)
1
if ( $this.attr('id') === 'html') {
Toevoeging op 25/06/2013 20:00:38:
dit betekent: als het atribuut id de waarde 'html' heeft dan ...
Om javascript toe te voegen, moet je wat prutsen, al is het maar dat je geen </script> toevoegt waardoor je script van je hoofdpagina afsluit.
Ik heb ook jQuery toegevoegd aan de iframe.
onKeyup is nogal ... zinloos voor dat script <textarea>. Meestal zal je tijdens het typen geen werkende code kunnen hebben. Ik heb het op onBlur gezet. Ik passeer het script ook door eval(). Zo wordt de code niet gepost als er syntax errors in komen.
De javascript wordt ook in een self executing functie gestoken, zo wordt ze direct actief.
Het meeste van jouw code vind je nog terug.
Er is zeker nog werk aan, maar het werkt wel (het doet toch iets).
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
<!doctype html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
<div class="container grid">
<form>
<h2>HTML</h2>
<textarea id="html">//cool that you test this out</textarea>
<h2>CSS</h2>
<textarea id="css"></textarea>
<h2>JavaScript</h2>
<textarea id="javascript">didn't work now..</textarea>
</form>
</div>
<div class="output grid">
<iframe></iframe>
</div>
<div id="message"></div>
<script>
(function() {
// $('.grid').height( $(window).height() );
var contents = $('iframe').contents(),
body = contents.find('body'),
styleTag = $('<style></style>').appendTo(contents.find('head'));
// @see http://stackoverflow.com/questions/610995/cant-append-script-element
var jQueryTag = document.createElement( 'script' );
jQueryTag.type = 'text/javascript';
jQueryTag.id = 'javascript';
jQueryTag.src = 'http://code.jquery.com/jquery-1.9.1.js';
$(contents.find('head')).append( jQueryTag );
var scriptTag = document.createElement( 'script' );
scriptTag.type = 'text/javascript';
scriptTag.id = 'javascript';
//scriptTag.src = url;
$(contents.find('head')).append( scriptTag );
$('textarea').keyup(function() {
var $this = $(this);
switch ($this.attr('id')) {
case 'html':
body.html( $this.val() );
break;
case 'css':
styleTag.text( $this.val() );
break;
case 'javascript':
// laat ons de javascript niet op onkeyUp doen, maar op onblur; zie hier onder
break
}
});
$('textarea').blur(function() {
var $this = $(this);
switch ($this.attr('id')) {
case 'javascript':
var val = $this.val();
// eerst zien of de code geen parse errors bevat
if (eval(val.toString())) {
$(scriptTag).html( '(function(){' + val + '})();' ); // we steken dit in een felf executing function. Zo wordt dit onmiddellijk uitgevoerd
}
break;
}
});
})();
</script>
</body>
</html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
<div class="container grid">
<form>
<h2>HTML</h2>
<textarea id="html">//cool that you test this out</textarea>
<h2>CSS</h2>
<textarea id="css"></textarea>
<h2>JavaScript</h2>
<textarea id="javascript">didn't work now..</textarea>
</form>
</div>
<div class="output grid">
<iframe></iframe>
</div>
<div id="message"></div>
<script>
(function() {
// $('.grid').height( $(window).height() );
var contents = $('iframe').contents(),
body = contents.find('body'),
styleTag = $('<style></style>').appendTo(contents.find('head'));
// @see http://stackoverflow.com/questions/610995/cant-append-script-element
var jQueryTag = document.createElement( 'script' );
jQueryTag.type = 'text/javascript';
jQueryTag.id = 'javascript';
jQueryTag.src = 'http://code.jquery.com/jquery-1.9.1.js';
$(contents.find('head')).append( jQueryTag );
var scriptTag = document.createElement( 'script' );
scriptTag.type = 'text/javascript';
scriptTag.id = 'javascript';
//scriptTag.src = url;
$(contents.find('head')).append( scriptTag );
$('textarea').keyup(function() {
var $this = $(this);
switch ($this.attr('id')) {
case 'html':
body.html( $this.val() );
break;
case 'css':
styleTag.text( $this.val() );
break;
case 'javascript':
// laat ons de javascript niet op onkeyUp doen, maar op onblur; zie hier onder
break
}
});
$('textarea').blur(function() {
var $this = $(this);
switch ($this.attr('id')) {
case 'javascript':
var val = $this.val();
// eerst zien of de code geen parse errors bevat
if (eval(val.toString())) {
$(scriptTag).html( '(function(){' + val + '})();' ); // we steken dit in een felf executing function. Zo wordt dit onmiddellijk uitgevoerd
}
break;
}
});
})();
</script>
</body>
</html>
Gewijzigd op 28/06/2013 11:21:49 door Kris Peeters