Skip to content

Instantly share code, notes, and snippets.

@mtvbrianking

mtvbrianking/tinymce_demo.html

Created September 28, 2016 06:57
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save mtvbrianking/0b889a9864e88889fb306e692cf7d806 to your computer and use it in GitHub Desktop.
Save mtvbrianking/0b889a9864e88889fb306e692cf7d806 to your computer and use it in GitHub Desktop.
Download ZIP
Live edit and preview using TinyMCE editor
Raw
tinymce_demo.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Live Edit & Preview</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<style type="text/css">
.panel {
margin-top: 25px;
}
.panel-body {
padding: 0;
}
.glyphicon {
font-size: 20px;
}
#editor, #preview {
padding: 15px;
}
#editor-wrap, #editor, #preview {
width: 100%;
height: 300px;
}
#editor {
border: 0;
}
#editor-wrap {
display: none;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-offset-2 col-md-8">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title pull-left">Lorem Ipsum</h3>
<i class="glyphicon glyphicon-edit pull-right" id="edit-preview"></i>
<div class="clearfix"></div>
</div>
<div class="panel-body">
<div id="editor-wrap"><textarea id="editor"></textarea></div>
<div id="preview">
<h1>Lorem Ipsum</h1>
<h4>"Neque porro quisquam est dolor sit amet, consectetur..."</h4>
<h5>"There is no one who loves pain itself, who seeks after it and wants to have it, simply because it is pain..."</h5>
<hr>
<p style="text-align: justify;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eros lorem, egestas quis fermentum id, hendrerit sit amet massa. In ornare efficitur tellus et rutrum. Donec varius pretium risus, a tempus nibh malesuada sit amet. Pellentesque finibus cursus libero, vitae sollicitudin nunc ultrices eu. Nulla facilisi. Vestibulum at blandit nulla. Aenean ut dapibus lectus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc at posuere nisl. Nulla tincidunt odio magna, et blandit magna dignissim nec.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script src="//cdn.tinymce.com/4/tinymce.min.js"></script>
<script type="text/javascript">
tinymce.init({
selector: '#editor',
height: 300,
width: "100%",
plugins: [
'advlist autolink lists link image charmap print preview anchor',
'searchreplace visualblocks code fullscreen',
'insertdatetime media table contextmenu paste code'
],
toolbar: 'insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image'
});
$("#edit-preview").on("click", function(){
if ($('#editor-wrap').css('display') == "none") {
tinyMCE.get("editor").setContent($('#preview').html());
}else{
$('#preview').html(tinyMCE.get("editor").getContent());
}
$('#editor-wrap,#preview').toggle();
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment