javascript - New line spacing not working in jquery preview -
on form can click preview button , shows me out putted view.
because use replace(/</g, "<").replace(/>/g, ">")
replaces 1 around br , unable view new lines. not want replace ones around br.
question: how possible not touch less < , greater > around br tag in side pre?
codepen code view
codepen full view
script
$( document ).ready(function() { $('#preview-question').on('click', function (e) { $('.preview').html($('#question').val().replace(/\n/g, "<br />")); var str = $('.preview pre').html(); $('.preview pre').html(str.replace(/</g, "<").replace(/>/g, ">")); $('pre').each(function(i, block) { hljs.highlightblock(block); }); }); });
html
<form class="form-horizontal"> <div class="container"> <div class="row"> <div class="panel panel-default"> <div class="panel-heading"> <h1 class="panel-title">create new question</h1> </div> <div class="panel-body"> <div class="form-group"> <label class="col-lg-2">title</label> <div class="col-lg-10"> <input type="text" name="title" class="form-control" placeholder="title" /> </div> </div> <div class="form-group"> <label class="col-lg-2">question</label> <div class="col-lg-10"> <textarea name="question" id="question" class="form-control" rows="10"> testing question editor <pre> <div class="test"> </div> </pre> </textarea> </div> </div> <div class="form-group"> <label class="col-lg-2"></label> <div class="col-lg-10"> <div class="preview"></div> </div> </div> </div> <div class="panel-footer"> <div class="btn-group text-center"> <button type="submit" class="btn btn-primary">submit</button> <button type="button" id="preview-question" class="btn btn-default">preview</button> <a href="" class="btn btn-danger" role="button">cancel</a> </div> </div> </div> </div> </div> </form>
Comments
Post a Comment