API tools faq
paste
Advertisement
Guest User

Content Editor Javascript/HTML5

a guest
Oct 30th, 2012
521
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 10.96 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html><head><title>Content Inline Editor Test</title>
  3. <style>
  4.  
  5. body {
  6.   font-family: tahoma, arial;
  7.   font-size: 9pt;
  8.   background-color: #121212;
  9.   color: #ffffff;
  10. }
  11.  
  12. span, div {
  13.   background-color: #ffffff;
  14.   color: #000000;
  15.   margin: 10px;
  16. }
  17.  
  18. #editBar {
  19.   height: 26px;
  20.   margin-bottom: 0px;
  21.   padding: 3px;
  22.   -moz-border-radius: 5px;
  23.   border-radius: 5px;
  24.   background: -moz-linear-gradient(top,  rgba(117,117,117,0.65) 0%, rgba(117,117,117,0) 100%); /* FF3.6+ */
  25.   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(117,117,117,0.65)), color-stop(100%,rgba(117,117,117,0))); /* Chrome,Safari4+ */
  26.   background: -webkit-linear-gradient(top,  rgba(117,117,117,0.65) 0%,rgba(117,117,117,0) 100%); /* Chrome10+,Safari5.1+ */
  27.   background: -o-linear-gradient(top,  rgba(117,117,117,0.65) 0%,rgba(117,117,117,0) 100%); /* Opera 11.10+ */
  28.   background: -ms-linear-gradient(top,  rgba(117,117,117,0.65) 0%,rgba(117,117,117,0) 100%); /* IE10+ */
  29.   background: linear-gradient(to bottom,  rgba(117,117,117,0.65) 0%,rgba(117,117,117,0) 100%); /* W3C */
  30.   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6757575', endColorstr='#00757575',GradientType=0 ); /* IE6-9 */
  31. }
  32.  
  33. button.edButton, span.edButton {
  34.   height: 24px;
  35.   font-weight: normal;
  36.   background: none;
  37.   display: inline-block;
  38.   float: left;
  39.   cursor: pointer;
  40.   text-align: center;
  41.   padding: 0px 10px;
  42.   margin: 0px 1px;
  43.   border: none;
  44.   -moz-border-radius: 3px;
  45.   border-radius: 3px;
  46.   color: #ffffff;
  47. }
  48.  
  49. span.edSeparator {
  50.   height: 24px;
  51.   width: 0px;
  52.   display: inline-block;
  53.   float: left;
  54.   border-left: solid 1px black;
  55.   background: none;
  56.   padding: 0px;
  57.   margin: 0px 5px;
  58. }
  59.  
  60. button.edButton:hover, span.edButton:hover {
  61.   background: rgb(191,210,85); /* Old browsers */
  62.   background: -moz-linear-gradient(top,  rgba(191,210,85,1) 0%, rgba(142,185,42,1) 50%, rgba(114,170,0,1) 51%, rgba(158,203,45,1) 100%); /* FF3.6+ */
  63.   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(191,210,85,1)), color-stop(50%,rgba(142,185,42,1)), color-stop(51%,rgba(114,170,0,1)), color-stop(100%,rgba(158,203,45,1))); /* Chrome,Safari4+ */
  64.   background: -webkit-linear-gradient(top,  rgba(191,210,85,1) 0%,rgba(142,185,42,1) 50%,rgba(114,170,0,1) 51%,rgba(158,203,45,1) 100%); /* Chrome10+,Safari5.1+ */
  65.   background: -o-linear-gradient(top,  rgba(191,210,85,1) 0%,rgba(142,185,42,1) 50%,rgba(114,170,0,1) 51%,rgba(158,203,45,1) 100%); /* Opera 11.10+ */
  66.   background: -ms-linear-gradient(top,  rgba(191,210,85,1) 0%,rgba(142,185,42,1) 50%,rgba(114,170,0,1) 51%,rgba(158,203,45,1) 100%); /* IE10+ */
  67.   background: linear-gradient(to bottom,  rgba(191,210,85,1) 0%,rgba(142,185,42,1) 50%,rgba(114,170,0,1) 51%,rgba(158,203,45,1) 100%); /* W3C */
  68.   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bfd255', endColorstr='#9ecb2d',GradientType=0 ); /* IE6-9 */
  69.   color: #000000;
  70. }
  71.  
  72. button.edButton[disabled], button.edButton:hover[disabled] {
  73.   background: none;
  74.   cursor: default;
  75.   color: #666666;
  76. }
  77.  
  78. [contenteditable] {
  79.   background-color: #ffffcc;
  80. }
  81.  
  82. [contenteditable]:focus {
  83.   background: none;
  84.   border: solid #ffcccc 1px;
  85. }
  86.  
  87. #wrapper {
  88.   border: solid gray 1px;
  89.   border-top: none;
  90.   min-height: 400px;
  91.   margin-top: 0px;
  92.   padding-top: 10px;
  93. }
  94.  
  95. #title {
  96.   font-weight: bold;
  97. }
  98.  
  99. </style><script>
  100.  
  101. var Debug;
  102. var editField;
  103.  
  104. function InitPage() {
  105.   Debug=document.getElementById('editorDebug');
  106.   disableAdvanced();
  107. }
  108.  
  109. function setEditField(field, limit) {
  110.   if (limit) disableAdvanced();
  111.   else enableAdvanced();
  112.  
  113.   editField = document.getElementById(field);
  114. }
  115.  
  116. function disableAdvanced() {
  117.   document.getElementById('edBtnFont1').disabled=true;
  118.   document.getElementById('edBtnFont2').disabled=true;
  119.   document.getElementById('edBtnFont3').disabled=true;
  120.   document.getElementById('edBtnFont4').disabled=true;
  121.  
  122.   document.getElementById('edBtnP').disabled=true;
  123.  
  124.   document.getElementById('edBtnHead1').disabled=true;
  125.   document.getElementById('edBtnHead2').disabled=true;
  126.   document.getElementById('edBtnHead3').disabled=true;
  127.   document.getElementById('edBtnHead4').disabled=true;
  128.   document.getElementById('edBtnHead5').disabled=true;
  129.   document.getElementById('edBtnHead6').disabled=true;
  130. }
  131.  
  132. function enableAdvanced() {
  133.   document.getElementById('edBtnFont1').disabled=false;
  134.   document.getElementById('edBtnFont2').disabled=false;
  135.   document.getElementById('edBtnFont3').disabled=false;
  136.   document.getElementById('edBtnFont4').disabled=false;
  137.  
  138.   document.getElementById('edBtnP').disabled=false;
  139.  
  140.   document.getElementById('edBtnHead1').disabled=false;
  141.   document.getElementById('edBtnHead2').disabled=false;
  142.   document.getElementById('edBtnHead3').disabled=false;
  143.   document.getElementById('edBtnHead4').disabled=false;
  144.   document.getElementById('edBtnHead5').disabled=false;
  145.   document.getElementById('edBtnHead6').disabled=false;
  146. }
  147.  
  148. function getSelHTML() {
  149.   var sel='';
  150.   if(window.getSelection) sel=window.getSelection();
  151.   else if (document.getSelection) sel=document.getSelection();
  152.   else if (document.selection && document.selection.createRange) return (editField.selection.createRange()).htmlText;
  153.  
  154.   if(sel!='') {
  155.     var html='';
  156.     for (var i=0; i<sel.rangeCount; i++) {
  157.      var nNd=document.createElement('span');
  158.      var w=sel.getRangeAt(i);
  159.      var prevInnerHTML=editField.innerHTML;
  160.      w.surroundContents(nNd);
  161.      html+=nNd.innerHTML;
  162.      editField.innerHTML=prevInnerHTML;
  163.    }
  164.    return html;
  165.  }
  166.  return null;
  167. }
  168.  
  169. function insertTag(tag) {
  170.  var sel='';
  171.  if(window.getSelection) sel=window.getSelection();
  172.  else if (document.getSelection) sel=document.getSelection();
  173.  
  174.  if(sel!='') {
  175.    var html='';
  176.    for (var i=0; i<sel.rangeCount; i++) {
  177.      var nNd=document.createElement(tag);
  178.      var w=sel.getRangeAt(i);
  179.      w.surroundContents(nNd);
  180.      html+=nNd.innerHTML;
  181.    }
  182.    return html;
  183.  }
  184.  return null;
  185. }
  186.  
  187. function insertAttr(tag, attr) {
  188.  Debug.innerHTML=tag+' | '+attr;
  189.  var sel='';
  190.  if(window.getSelection) sel=window.getSelection();
  191.  else if (document.getSelection) sel=document.getSelection();
  192.  
  193.  if(sel!='') {
  194.    var html='';
  195.    for (var i=0; i<sel.rangeCount; i++) {
  196.      var nNd=document.createElement(tag);
  197.      var w=sel.getRangeAt(i);
  198.      w.surroundContents(nNd);
  199.      html+=nNd.innerHTML;
  200.    }
  201.    return html;
  202.  }
  203.  return null;
  204. }
  205.  
  206. function editFnHead(size) {
  207.  insertTag('h'+size);
  208. }
  209.  
  210. function editFnFont(size) {
  211.  insertAttr('font', 'size="'+size+'"');
  212. }
  213.  
  214. </script></head><body>
  215.  
  216.   <div id="editBar">
  217.     <button class="edButton" id="edBtnBold" onClick="insertTag('b');"><b>B</b></button>
  218.     <button class="edButton" id="edBtnItal" onClick="insertTag('i');"><i>I</i></button>
  219.     <button class="edButton" id="edBtnUline" onClick="insertTag('u');"><u>U</u></button>
  220.    
  221.     <span class="edSeparator"></span>
  222.    
  223.     <button class="edButton" id="edBtnFont1" onClick="editFnFont(1)"><font size="1">Size1</font></button>
  224.     <button class="edButton" id="edBtnFont2" onClick="editFnFont(2)"><font size="2">Size2</font></button>
  225.     <button class="edButton" id="edBtnFont3" onClick="editFnFont(3)"><font size="3">Size3</font></button>
  226.     <button class="edButton" id="edBtnFont4" onClick="editFnFont(4)"><font size="4">Size4</font></button>
  227.    
  228.     <button class="edButton" id="edBtnP" onClick="insertTag('p');">p</button>
  229.     <button class="edButton" id="edBtnHead1" onClick="editFnHead(1)"><font size="5"><b>H1</b></font></button>
  230.     <button class="edButton" id="edBtnHead2" onClick="editFnHead(2)"><font size="4"><b>H2</b></font></button>
  231.     <button class="edButton" id="edBtnHead3" onClick="editFnHead(3)"><font size="3"><b>H3</b></font></button>
  232.     <button class="edButton" id="edBtnHead4" onClick="editFnHead(4)"><font size="2"><b>H4</b></font></button>
  233.     <button class="edButton" id="edBtnHead5" onClick="editFnHead(5)"><font size="1"><b>H5</b></font></button>
  234.     <button class="edButton" id="edBtnHead6" onClick="editFnHead(6)"><font size="0"><b>H6</b></font></button>
  235.    
  236.     <span class="edSeparator"></span>
  237.    
  238.     <span class="edButton">Button</span>
  239.    
  240.     <span class="edSeparator"></span>
  241.    
  242.     <span class="edButton" id="editorDebug">Debug Info</span>
  243.   </div>
  244.  
  245.   <div id="wrapper">
  246.  
  247.     <span id="title" onFocus="setEditField('title', true)" contenteditable>Sample Title Text Here</span>
  248.    
  249.     <div id="field1" onFocus="setEditField('field1', false)" contenteditable>
  250.       I have tried multiple editors, specifically TinyMCE and Raptor, with mixed results.
  251.       I liked how TinyMCE functioned, but wanted to take advantage of contenteditable HTML5 elements.
  252.       TinyMCE relies heavily on textareas, and we don't want that.
  253.       Raptor had issues dealing with multiple editable regions on a screen.
  254.       How about getting back to the basics?
  255.       Introducing the temporarily generically named Content Inline Editor!
  256.     </div>
  257.    
  258.     <div id="field2" onFocus="setEditField('field2', false)" contenteditable>
  259.       Currently I'm working on the ability to insert at a specific location in the code as opposed to only using <i>surroundContents()</i>.
  260.       I have set up a function called <i>insertAttr()</i> where the tag with attribute should be built and added, but cannot figure out how to get it to function properly.
  261.       I know it's wrong now using <i>surroundContents()</i>, which will never work for this feature, but I cannot find what actually works here so I used the <i>insertTag()</i> function as a placeholder and left the debug output on- <i>document.getElementById('debug')</i> AKA <i>var Debug</i>.
  262.       Of course in implementation this will be commented out.
  263.       <i>surroundContents()</i> is nice, but limits tags to those without attributes, fine for bold, italic, paragraphs, but we want fonts and colors!
  264.       I'll keep digging, but if anyone cares to send a code patch to [email removed from pastebin by user] I could be on the way to adding more features sooner.
  265.       Keep in mind I'm going to limit the number of features in a sense- this is <strong>LIGHT</strong>weight....
  266.       see what I did there?
  267.     </div>
  268.    
  269.     <div id="field3" onFocus="setEditField('field3', false)" contenteditable>
  270.       New features will include lists, images, object embeds, and possibly a few others.
  271.       Font size will eventually go into a dropdown, and a color selector popup will be added for foreground &amp; background.
  272.       Lastly, I need to implement removal of inserted tags!
  273.       After I think of a name and it's closer to completion this will be LGPL'd or something of the sort (this was developed on my employer's time so they need to retain rights to use it commercially, but use will be free and you won't have to include those annoying "I stole code from here notices") and posted on SourceForge for all.
  274.     </div>
  275.  
  276.   </div>
  277.  
  278.   <script>
  279.     window.onLoad=InitPage();
  280.   </script>
  281.  
  282. </body></html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!