Created
September 28, 2016 06:57
-
-
Save mtvbrianking/0b889a9864e88889fb306e692cf7d806 to your computer and use it in GitHub Desktop.
Live edit and preview using TinyMCE editor
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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