javascript - bugged HTML code editor -
$(document).ready(function() { var btn = $('.gen'); btn.on('click', function() { var areatxt = $('.textarea').val(); var div = $('.result'); div.html(areatxt); }); });
.result { border: 1px solid red; width: 300px; height: 150px; } .textarea { width: 300px; height: 150px; }
<!doctype> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <title>untitled document</title> </head> <body> <textarea class="textarea"></textarea> <input type="button" class="gen" value="generate"> <div class="result"></div> </body> </html>
i've created simple html code editor. problem when add style classes or divs affect code editor.
i want editor of w3school. show result in iframe code in textarea affect result area.
check fiddle here
just did few tweaking. added dummy attribute 'textarea' , set value attribute. loop through element , check attribute, if found reset styles applied.
$(document).ready(function() { var btn = $('.gen'); btn.on('click', function() { var areatxt = $('.textarea').val(); var div = $('.result'); div.html(areatxt); //code addtion $("textarea").each(function(){ var attr = $(this).attr('dataref'); if (typeof attr !== typeof undefined && attr !== false && attr == 'source') { $(this).attr('style', 'background-color: #eee !important'); } }) }); });
in case, looping 'textareas' , check if has 'dataref' attribute , value equals source. if reset style. know tedious work on elements in similar manner, without using iframe can work around.
my 2 cents
Comments
Post a Comment