Skip to content
This repository
Browse code

RTE first pass, general updates.

  • Loading branch information...
commit e317c1a458bc5cad97e317778f6c0fc3e30f8dd4 1 parent 6acd500
joshuagatcke authored
2  blank.html
@@ -15,7 +15,7 @@
15 15
16 16 <!--
17 17
18   - ADD YOU HTML ELEMENTS HERE
  18 + ADD YOUR HTML ELEMENTS HERE
19 19
20 20 Example: 2 Columns
21 21 -->
BIN  css/img/rte/link.png
BIN  css/img/rte/link_break.png
BIN  css/img/rte/picture_empty.png
BIN  css/img/rte/text_align_center.png
BIN  css/img/rte/text_align_left.png
BIN  css/img/rte/text_align_right.png
BIN  css/img/rte/text_bold.png
BIN  css/img/rte/text_italic.png
BIN  css/img/rte/text_list_bullets.png
BIN  css/img/rte/text_list_numbers.png
BIN  css/img/rte/text_strikethrough.png
BIN  css/img/rte/text_subscript.png
BIN  css/img/rte/text_superscript.png
5 css/kickstart.css
@@ -163,7 +163,8 @@ margin:0 0 20px 0;
163 163 PRE & CODE
164 164 -----------------------------------*/
165 165 code{
166   -font-family: monospace;
  166 +font-family: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace;
  167 +font-size:0.9em;
167 168 border:1px solid lightblue;
168 169 padding:3px;
169 170 -moz-border-radius:3px;
@@ -188,6 +189,8 @@ box-shadow:inset 0px 0px 7px rgba(0,0,0,0.2);
188 189 padding:10px;
189 190 margin:0 0 20px 0;
190 191 border:1px solid #ddd;
  192 +font-family: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace;
  193 +font-size:0.9em;
191 194 }
192 195
193 196 /*---------------------------------
3  elements.html
@@ -1790,6 +1790,9 @@ <h3 id="forms">Forms</h3>
1790 1790 <label for="textarea1">TextArea</label>
1791 1791 <textarea id="textarea1" placeholder="Placeholder Text"></textarea>
1792 1792
  1793 + <label for="rte1">Rich Text Editor</label>
  1794 + <textarea id="rte1" class="rte">Test Content</textarea>
  1795 +
1793 1796 <button type="submit">Submit</button>
1794 1797 </form>
1795 1798 </div><div class="clear"></div>
91 js/kickstart.js
@@ -3,7 +3,7 @@
3 3 kickstart.js
4 4 */
5 5
6   -$(document).ready(function(){
  6 +jQuery(document).ready(function($){
7 7
8 8 /*---------------------------------
9 9 MENU Dropdowns
@@ -138,6 +138,88 @@ $(document).ready(function(){
138 138 });
139 139
140 140 /*---------------------------------
  141 + Rich Text Editor
  142 + -----------------------------------*/
  143 + $('.rte').each(function(index){
  144 + var newID = $(this).attr('id')+index;
  145 + $(this).hide();
  146 + $(this).wrap('<div id="'+newID+'" class="rte-wrap editmode"></div>');
  147 +
  148 + // toolbar
  149 + var wrap = $(this).parents('.rte-wrap');
  150 + var rhtml = wrap.find('textarea.rte');
  151 + var toolbar = '<div class="rte-toolbar clearfix">\
  152 + <ul>\
  153 + <li><select class="inline">\
  154 + <option value="&lt;p&gt;">P</option>\
  155 + <option value="&lt;h1&gt;">H1</option>\
  156 + <option value="&lt;h2&gt;">H2</option>\
  157 + <option value="&lt;h3&gt;">H3</option>\
  158 + <option value="&lt;h4&gt;">H4</option>\
  159 + <option value="&lt;h5&gt;">H5</option>\
  160 + <option value="&lt;h6&gt;">H6</option>\
  161 + <option value="&lt;blockquote&gt;">blockquote</option>\
  162 + <option value="&lt;pre&gt;">pre</option>\
  163 + </select></li>\
  164 + <li><a href="#" title="Bold" class="tooltip rte-bold" data-command="bold"></a></li>\
  165 + <li><a href="#" title="Italic" class="tooltip rte-italic" data-command="italic"></a></li>\
  166 + <li><a href="#" title="Unordered List" class="tooltip rte-ul" data-command="insertunorderedlist"></a></li>\
  167 + <li><a href="#" title="Numbered List" class="tooltip rte-ol" data-command="insertorderedlist"></a></li>\
  168 + <li><a href="#" title="Image" class="tooltip rte-img" data-command="insertimage" data-prompt="Image Url?"></a></li>\
  169 + <li><a href="#" title="Link" class="tooltip rte-link" data-command="createLink" data-prompt="Url?"></a></li>\
  170 + <li><a href="#" title="unLink" class="tooltip rte-unlink" data-command="unlink"></a></li>\
  171 + <li><a href="#" title="Align Left" class="tooltip rte-justifyleft" data-command="justifyleft"></a></li>\
  172 + <li><a href="#" title="Align Center" class="tooltip rte-justifycenter" data-command="justifycenter"></a></li>\
  173 + <li><a href="#" title="Align Right" class="tooltip rte-justifyright" data-command="justifyright"></a></li>\
  174 + <li><a href="#" title="Subscript" class="tooltip rte-sub" data-command="subscript" data-value="&lt;sup&gt;"></a></li>\
  175 + <li><a href="#" title="Superscript" class="tooltip rte-sup" data-command="superscript" data-value="&lt;sup&gt;"></a></li>\
  176 + <li class="html-toggle"><a href="">HTML</a></li>\
  177 + </ul></div>';
  178 +
  179 + // editor
  180 + var editor = '<div class="rte-editor" style="height:'+rhtml.innerHeight()+'px" contenteditable="true"></div>';
  181 + wrap.prepend(toolbar+editor);
  182 + wrap.find('.rte-editor').html(rhtml.val());
  183 + });
  184 +
  185 + // buttons
  186 + $('.rte-wrap .rte-toolbar a').live('click',function(e){
  187 + e.preventDefault();
  188 + var rte = $(this).parents('.rte-wrap');
  189 + var toolbar = rte.find('.rte-toolbar');
  190 + var editor = rte.find('.rte-editor');
  191 + var rhtml = rte.find('textarea.rte');
  192 + var bool = false;
  193 + var value = $(this).attr('data-value');
  194 + var command = $(this).attr('data-command');
  195 + var rprompt = $(this).attr('data-prompt');
  196 +
  197 + if(rprompt){
  198 + value = prompt(rprompt);
  199 + }
  200 +
  201 + // html toggle
  202 + if($(this).parent().hasClass('html-toggle')) {
  203 + if(rhtml.is(':hidden')) { rhtml.val(editor.html()); rte.removeClass('editmode'); }
  204 + else{ editor.html(rhtml.val()); rte.addClass('editmode'); }
  205 + editor.toggle();
  206 + rhtml.toggle();
  207 + }
  208 +
  209 + // do the action
  210 + document.execCommand(command, bool, value);
  211 + });
  212 +
  213 + // select
  214 + $('.rte-wrap .rte-toolbar select').live('change', function(e){
  215 + var bool = false;
  216 + var value = $(this).val();
  217 +
  218 + // do the action
  219 + document.execCommand('formatblock', bool, value);
  220 + });
  221 +
  222 + /*---------------------------------
141 223 Fancybox Lightbox
142 224 -----------------------------------*/
143 225 $('.gallery').each(function(i){
@@ -246,7 +328,7 @@ $(document).ready(function(){
246 328
247 329 // tooltip
248 330 $(this).attr('title','')
249   - .tipTip({defaultPosition: tpos, content: content, keepAlive: keepAlive, activation: action});
  331 + .tipTip({defaultPosition: tpos, content: content, keepAlive: keepAlive, activation: action, delay: 1000});
250 332 });
251 333
252 334 /*---------------------------------
@@ -309,8 +391,13 @@ $(document).ready(function(){
309 391 var div = document.createElement('div'); div.className="inner";
310 392 while (o.firstChild) div.appendChild(o.firstChild);
311 393 o.appendChild(div);
  394 +<<<<<<< HEAD
312 395 }
313 396 );
  397 +=======
  398 + }
  399 + );
  400 +>>>>>>> RTE first pass, general updates.
314 401 $('pre').addClass('prettyprint');prettyPrint();
315 402
316 403 });

0 comments on commit e317c1a

Please sign in to comment.
Something went wrong with that request. Please try again.