Toggle navigation
Bootsnipp
Bootstrap
For
CSS Frameworks
Bootstrap
Foundation
Semantic UI
Materialize
Pure
Bulma
References
CSS Reference
Tools
Community
Page Builder
Form Builder
Button Builder
Icon Search
Dan's Tools
Diff / Merge
Color Picker
Keyword Tool
Web Fonts
.htaccess Generator
Favicon Generator
Site Speed Test
Snippets
Featured
Tags
By Bootstrap Version
4.1.1
4.0.0
3.3.0
3.2.0
3.1.0
3.0.3
3.0.1
3.0.0
2.3.2
Register
Login
"draggable"
Bootstrap 3.0.0 Snippet by
evarevirus
3.0.0
Preview
HTML
View Full Screen
Fork
Fork this
911
 
1 Fav
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
Template
Material Kit Pro
Questions / Comments:
Post
Posting Guidelines
Formatting
- Now
×
Close
Donate
BTC: 12JxYMYi6Vt3mx3hcmP3B2oyFiCSF3FhYT
ETH: 0xCD715b2E3549c54A40e6ecAaFeB82138148a6c76