"draggable"
Bootstrap 3.0.0 Snippet by evarevirus

Post to Facebook Tweet this

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html><html lang='en' class=''> <head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/nickg413/pen/JKapJJ?limit=all&page=49&q=editor" /> <style class="cp-pen-styles">/* Initial body */ body { left: 0; margin: 0; height: 100%; position: relative; background-color: gainsboro; } img { height: 100px; width: 100px; } .text-editor { width: 32%; height: 100vh; float: left; border: 1px solid gray; display: none; background-color: #EFEFEF; } .save { width: 100%; padding: 4px 12px; margin-bottom: 0; font-size: 13px; line-height: 18px; background-color: #2386c8; color: white; } .editor { width: 100%; float: left; } .blocks { width: 32%; height: 100vh; float: left; border: 1px solid gray; position: fixed; background-color: #EFEFEF; } .blocks h3 { text-align: center; padding: 12px 12px; background-color: silver; margin: 0px 0px 10px 0px; } .blocks div { float: left; width: 31%; text-align: center; padding: 10px 10px; border: solid 2px #ccc; border-radius: 2px; margin-bottom: 10px; margin-right: 2%; box-sizing: border-box; } .blocks div.enabled:hover { background-color: gray; } .clear-template { float: right; width: 33%; padding: 4px 12px; margin-bottom: 0; font-size: 13px; line-height: 18px; background-color: #2386c8; color: white; } .save-template { float: right; width: 33%; padding: 4px 12px; margin-bottom: 0; font-size: 13px; line-height: 18px; background-color: #2386c8; color: white; } .email { width: 50%; height: 100%; float: right; overflow: scroll; } .email li { list-style-type: none; padding: 10px; margin: auto; width: 70%; height: 25%; background-color: white; float:left; } .email li button.edit { display: none; } .email li button.clone { display: none; } .email li button.delete { display: none; } .email li button.new { display: block; } .email li:hover { border: 1px dotted gray; } .email li:hover button { display: inline; }</style></head><body> <body> <div class="blocks"> <h3>Click blocks to add them:</h3> <div class="enabled" id="text"> <i class="fa fa-font fa-4x" aria-hidden="true"></i> <br>Text </div> <div class="enabled" id="image"> <i class="fa fa-camera-retro fa-4x"></i> <br>Image </div> <div class="disabled" id="split"> <i class="fa fa-columns fa-4x" aria-hidden="true"></i> <br>Split </div> <div class="enabled" id="button"> <i class="fa fa-square fa-4x" aria-hidden="true"></i> <br>Button </div> <div class="disabled" id="link-bar"> <i class="fa fa-ellipsis-h fa-4x" aria-hidden="true"></i> <br>Button/Link Bar </div> <div class="disabled" id="social-links"> <i class="fa fa-globe fa-4x" aria-hidden="true"></i> <br>Social Links </div> <div class="disabled" id="table"> <i class="fa fa-table fa-4x" aria-hidden="true"></i> <br>Table </div> <div class="disabled" id="horizontal-rule"> <i class="fa fa-minus-square-o fa-4x" aria-hidden="true"></i> <br>Horizontal Rule </div> <div class="disabled" id="spacer"> <i class="fa fa-minus-square-o fa-4x" aria-hidden="true"></i> <br>Spacer </div> <div class="disabled" id="drop-shadow"> <i class="fa fa-minus-square-o fa-4x" aria-hidden="true"></i> <br>Drop Shadow </div> </div> <div class="text-editor"> <button type="submit" class="save">Save Changes</button> <textarea class="editor">Easy! You should check out MoxieManager!</textarea> </div> <button type="reset" class="clear-template">Clear Template</button> <button type="submit" class="save-template">Save Template</button> <ul class="email" id="sortable"> <li> <button type = "button" class= "edit"><i class="fa fa-pencil-square-o fa-lg" aria-hidden="true"></i></button> <button type = "button" class= "clone"><i class="fa fa-files-o fa-lg" aria-hidden="true"></i></button> <button type = "button" class= "delete"><i class="fa fa-trash-o fa-lg" aria-hidden="true"></i></button> <p> I am a textarea.</p> </li> <li> <button type = "button" class= "edit"><i class="fa fa-pencil-square-o fa-lg" aria-hidden="true"></i></button> <button type = "button" class= "clone"><i class="fa fa-files-o fa-lg" aria-hidden="true"></i></button> <button type = "button" class= "delete"><i class="fa fa-trash-o fa-lg" aria-hidden="true"></i></button> <p> I am a second textarea.</p> </li> <li> <button type = "button" class= "edit"><i class="fa fa-pencil-square-o fa-lg" aria-hidden="true"></i></button> <button type = "button" class= "clone"><i class="fa fa-files-o fa-lg" aria-hidden="true"></i></button> <button type = "button" class= "delete"><i class="fa fa-trash-o fa-lg" aria-hidden="true"></i></button> <p> I am a third textarea.</p> </li> <li> <button type = "button" class= "edit"><i class="fa fa-pencil-square-o fa-lg" aria-hidden="true"></i></button> <button type = "button" class= "clone"><i class="fa fa-files-o fa-lg" aria-hidden="true"></i></button> <button type = "button" class= "delete"><i class="fa fa-trash-o fa-lg" aria-hidden="true"></i></button> <p> I am a fourth textarea.</p> </li> </ul> </body> <link href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="https://cdn.ckeditor.com/4.5.10/standard-all/ckeditor.js"></script> <script src="app.js"></script> <script src="//cdn.tinymce.com/4/tinymce.min.js"></script> <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script> <script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script> <script >var main = function () { var currentBlock; //fill in template from local storage if possible if(localStorage.getItem('template')) { $('.email').html(localStorage.getItem('template')); } //set up text editor $(function () { tinymce.init({ selector: "textarea", setup: function (ed) { ed.on('change keyup', function (e) { currentBlock.html(ed.getContent({format: 'html'})) }); } }); } ); //Adds drag-and-drop functionality to email editor $(function () { $("#sortable").sortable({ axis: "y", cursor: "move", containment: "#sortable", placeholder: "ui-state-highlight", tolerance: "pointer" }); }); //Adds a new text box to email editor when "Text" block is clicked $('#text').click(function() { $('.email').append('<li><button type = "button" class="edit"><i class="fa fa-pencil-square-o fa-lg" aria-hidden="true"></i>' + '</button><button type = "button" class="clone"><i class="fa fa-files-o fa-lg" aria-hidden="true"></i></button>' + '<button type = "button" class="delete"><i class="fa fa-trash-o fa-lg" aria-hidden="true"></i></button>' + '<p>I am an added textarea.</p></li>'); $('.edit').click(function () { currentBlock = $(this).closest('li').find('p'); $('.blocks').css("display", "none"); $('.text-editor').css("display", "block"); tinymce.activeEditor.setContent(currentBlock.html()); }); }); //Adds a new button to email editor when "Button" block is clicked $('#button').click(function() { $('.email').append('<li><button type = "button" class="edit"><i class="fa fa-pencil-square-o fa-lg" aria-hidden="true"></i>' + '</button><button type = "button" class="clone"><i class="fa fa-files-o fa-lg" aria-hidden="true"></i>' + '</button><button type = "button" class="delete"><i class="fa fa-trash-o fa-lg" aria-hidden="true"></i>' + '</button><div><button type="button" class="new"> I am an added button</button></div></li>'); }); //Adds a new image to email editor when "Image" block is clicked $('#image').click(function() { $('.email').append('<li><button type = "button" class="edit"><i class="fa fa-pencil-square-o fa-lg" aria-hidden="true"></i>' + '</button><button type = "button" class="clone"><i class="fa fa-files-o fa-lg" aria-hidden="true"></i>' + '</button><button type = "button" class="delete"><i class="fa fa-trash-o fa-lg" aria-hidden="true"></i>' + '</button><div><img src = "https://res.cloudinary.com/dlghidoae/image/upload/v1470408650/icon-1435687_640_mf9saj.png" /></div></li>'); }); //open text edit ui $('.edit').click(function () { currentBlock = $(this).closest('li').find('p'); $('.blocks').css("display", "none"); $('.text-editor').css("display", "block"); tinymce.activeEditor.setContent(currentBlock.html()); }); //Clones the current block in the email editor $('.clone').click(function() { currentBlock = $(this).closest('li'); currentBlock.after('<li>' + currentBlock.html() + '</li>'); }); //Deletes the current block in the email editor $('.delete').click(function() { currentBlock = $(this).closest('li'); $('.email li').eq(currentBlock.index()).remove(); }); //close text edit ui, open blocks $('.save').click(function () { $('.blocks').css("display", "block"); $('.text-editor').css("display", "none"); currentBlock.html(tinymce.activeEditor.getContent({format: 'html'})); }); //store email template to browser $('.save-template').click(function () { localStorage.setItem('template',$('.email').html()); }); //return email template to original $('.clear-template').click(function () { localStorage.removeItem('template'); location.removedByCodePen(); }); }; $(document).ready(main); //# sourceURL=pen.js </script> </body></html>

Related: See More

Material Kit React

Questions / Comments: