1 // ----------------------------------------------------------------------------
2 // markItUp! Universal MarkUp Engine, JQuery plugin
4 // Dual licensed under the MIT and GPL licenses.
5 // ----------------------------------------------------------------------------
6 // Copyright (C) 2007-2010 Jay Salvat
7 // http://markitup.jaysalvat.com/
8 // ----------------------------------------------------------------------------
9 // Permission is hereby granted, free of charge, to any person obtaining a copy
10 // of this software and associated documentation files (the "Software"), to deal
11 // in the Software without restriction, including without limitation the rights
12 // to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
13 // copies of the Software, and to permit persons to whom the Software is
14 // furnished to do so, subject to the following conditions:
16 // The above copyright notice and this permission notice shall be included in
17 // all copies or substantial portions of the Software.
19 // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
20 // IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
21 // FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
22 // AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
23 // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
24 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
26 // ----------------------------------------------------------------------------
28 $.fn
.markItUp = function(settings
, extraSettings
) {
29 var options
, ctrlKey
, shiftKey
, altKey
;
30 ctrlKey
= shiftKey
= altKey
= false;
35 previewInWindow
: '', // 'width=800, height=600, resizable=yes, scrollbars=yes'
36 previewAutoRefresh
: true,
37 previewPosition
: 'after',
38 previewTemplatePath
: '~/templates/preview.html',
39 previewParserPath
: '',
40 previewParserVar
: 'data',
48 markupSet
: [ { /* set */ } ]
50 $.extend(options
, settings
, extraSettings
);
52 // compute markItUp! path
54 $('script').each(function(a
, tag
) {
55 miuScript
= $(tag
).get(0).src
.match(/(.*)jquery\.markitup(\.pack)?\.js$/);
56 if (miuScript
!== null) {
57 options
.root
= miuScript
[1];
62 return this.each(function() {
63 var $$, textarea
, levels
, scrollPosition
, caretPosition
, caretOffset
,
64 clicked
, hash
, header
, footer
, previewWindow
, template
, iFrame
, abort
;
69 scrollPosition
= caretPosition
= 0;
72 options
.previewParserPath
= localize(options
.previewParserPath
);
73 options
.previewTemplatePath
= localize(options
.previewTemplatePath
);
75 // apply the computed path to ~/
76 function localize(data
, inText
) {
78 return data
.replace(/("|')~\//g, "$1"+options
.root
);
80 return data
.replace(/^~\//, options
.root
);
83 // init and build editor
85 id
= ''; nameSpace
= '';
87 id
= 'id="'+options
.id
+'"';
88 } else if ($$.attr("id")) {
89 id
= 'id="markItUp'+($$.attr("id").substr(0, 1).toUpperCase())+($$.attr("id").substr(1))+'"';
92 if (options
.nameSpace
) {
93 nameSpace
= 'class="'+options
.nameSpace
+'"';
95 $$.wrap('<div '+nameSpace
+'></div>');
96 $$.wrap('<div '+id
+' class="markItUp"></div>');
97 $$.wrap('<div class="markItUpContainer"></div>');
98 $$.addClass("markItUpEditor");
100 // add the header before the textarea
101 header
= $('<div class="markItUpHeader"></div>').insertBefore($$);
102 $(dropMenus(options
.markupSet
)).appendTo(header
);
104 // add the footer after the textarea
105 footer
= $('<div class="markItUpFooter"></div>').insertAfter($$);
107 // add the resize handle after textarea
108 if (options
.resizeHandle
=== true && $.browser
.safari
!== true) {
109 resizeHandle
= $('<div class="markItUpResizeHandle"></div>')
111 .bind("mousedown", function(e
) {
112 var h
= $$.height(), y
= e
.clientY
, mouseMove
, mouseUp
;
113 mouseMove = function(e
) {
114 $$.css("height", Math
.max(20, e
.clientY
+h
-y
)+"px");
117 mouseUp = function(e
) {
118 $("html").unbind("mousemove", mouseMove
).unbind("mouseup", mouseUp
);
121 $("html").bind("mousemove", mouseMove
).bind("mouseup", mouseUp
);
123 footer
.append(resizeHandle
);
127 $$.keydown(keyPressed
).keyup(keyPressed
);
129 // bind an event to catch external calls
130 $$.bind("insertion", function(e
, settings
) {
131 if (settings
.target
!== false) {
134 if (textarea
=== $.markItUp
.focused
) {
139 // remember the last focus
140 $$.focus(function() {
141 $.markItUp
.focused
= this;
145 // recursively build header with dropMenus from markupset
146 function dropMenus(markupSet
) {
147 var ul
= $('<ul></ul>'), i
= 0;
148 $('li:hover > ul', ul
).css('display', 'block');
149 $.each(markupSet
, function() {
150 var button
= this, t
= '', title
, li
, j
;
151 title
= (button
.key
) ? (button
.name
||'')+' [Ctrl+'+button
.key
+']' : (button
.name
||'');
152 key
= (button
.key
) ? 'accesskey="'+button
.key
+'"' : '';
153 if (button
.separator
) {
154 li
= $('<li class="markItUpSeparator">'+(button
.separator
||'')+'</li>').appendTo(ul
);
157 for (j
= levels
.length
-1; j
>= 0; j
--) {
160 li
= $('<li class="markItUpButton markItUpButton'+t
+(i
)+' '+(button
.className
||'')+'"><a href="" '+key
+' title="'+title
+'">'+(button
.name
||'')+'</a></li>')
161 .bind("contextmenu", function() { // prevent contextmenu on mac and allow ctrl+click
163 }).click(function() {
165 }).focusin(function(){
167 }).mousedown(function() {
171 setTimeout(function() { markup(button
) },1);
173 }).hover(function() {
174 $('> ul', this).show();
175 $(document
).one('click', function() { // close dropmenu if click outside
176 $('ul ul', header
).hide();
180 $('> ul', this).hide();
183 if (button
.dropMenu
) {
185 $(li
).addClass('markItUpDropMenu').append(dropMenus(button
.dropMenu
));
194 function magicMarkups(string
) {
196 string
= string
.toString();
197 string
= string
.replace(/\(\!\(([\s\S]*?)\)\!\)/g,
199 var b
= a
.split('|!|');
200 if (altKey
=== true) {
201 return (b
[1] !== undefined) ? b
[1] : b
[0];
203 return (b
[1] === undefined) ? "" : b
[0];
207 // [![prompt]!], [![prompt:!:value]!]
208 string
= string
.replace(/\[\!\[([\s\S]*?)\]\!\]/g,
210 var b
= a
.split(':!:');
211 if (abort
=== true) {
214 value
= prompt(b
[0], (b
[1]) ? b
[1] : '');
215 if (value
=== null) {
227 function prepare(action
) {
228 if ($.isFunction(action
)) {
229 action
= action(hash
);
231 return magicMarkups(action
);
234 // build block to insert
235 function build(string
) {
236 openWith
= prepare(clicked
.openWith
);
237 placeHolder
= prepare(clicked
.placeHolder
);
238 replaceWith
= prepare(clicked
.replaceWith
);
239 closeWith
= prepare(clicked
.closeWith
);
240 if (replaceWith
!== "") {
241 block
= openWith
+ replaceWith
+ closeWith
;
242 } else if (selection
=== '' && placeHolder
!== '') {
243 block
= openWith
+ placeHolder
+ closeWith
;
245 block
= openWith
+ (string
||selection
) + closeWith
;
247 return { block
:block
,
249 replaceWith
:replaceWith
,
250 placeHolder
:placeHolder
,
255 // define markup to insert
256 function markup(button
) {
258 hash
= clicked
= button
;
261 $.extend(hash
, { line
:"",
264 selection
:(selection
||''),
265 caretPosition
:caretPosition
,
271 // callbacks before insertion
272 prepare(options
.beforeInsert
);
273 prepare(clicked
.beforeInsert
);
274 if (ctrlKey
=== true && shiftKey
=== true) {
275 prepare(clicked
.beforeMultiInsert
);
277 $.extend(hash
, { line
:1 });
279 if (ctrlKey
=== true && shiftKey
=== true) {
280 lines
= selection
.split(/\r?\n/);
281 for (j
= 0, n
= lines
.length
, i
= 0; i
< n
; i
++) {
282 if ($.trim(lines
[i
]) !== '') {
283 $.extend(hash
, { line
:++j
, selection
:lines
[i
] } );
284 lines
[i
] = build(lines
[i
]).block
;
289 string
= { block
:lines
.join('\n')};
290 start
= caretPosition
;
291 len
= string
.block
.length
+ (($.browser
.opera
) ? n
-1 : 0);
292 } else if (ctrlKey
=== true) {
293 string
= build(selection
);
294 start
= caretPosition
+ string
.openWith
.length
;
295 len
= string
.block
.length
- string
.openWith
.length
- string
.closeWith
.length
;
296 len
-= fixIeBug(string
.block
);
297 } else if (shiftKey
=== true) {
298 string
= build(selection
);
299 start
= caretPosition
;
300 len
= string
.block
.length
;
301 len
-= fixIeBug(string
.block
);
303 string
= build(selection
);
304 start
= caretPosition
+ string
.block
.length
;
306 start
-= fixIeBug(string
.block
);
308 if ((selection
=== '' && string
.replaceWith
=== '')) {
309 caretOffset
+= fixOperaBug(string
.block
);
311 start
= caretPosition
+ string
.openWith
.length
;
312 len
= string
.block
.length
- string
.openWith
.length
- string
.closeWith
.length
;
314 caretOffset
= $$.val().substring(caretPosition
, $$.val().length
).length
;
315 caretOffset
-= fixOperaBug($$.val().substring(0, caretPosition
));
317 $.extend(hash
, { caretPosition
:caretPosition
, scrollPosition
:scrollPosition
} );
319 if (string
.block
!== selection
&& abort
=== false) {
320 insert(string
.block
);
327 $.extend(hash
, { line
:'', selection
:selection
});
329 // callbacks after insertion
330 if (ctrlKey
=== true && shiftKey
=== true) {
331 prepare(clicked
.afterMultiInsert
);
333 prepare(clicked
.afterInsert
);
334 prepare(options
.afterInsert
);
336 // refresh preview if opened
337 if (previewWindow
&& options
.previewAutoRefresh
) {
342 shiftKey
= altKey
= ctrlKey
= abort
= false;
345 // Substract linefeed in Opera
346 function fixOperaBug(string
) {
347 if ($.browser
.opera
) {
348 return string
.length
- string
.replace(/\n*/g, '').length
;
352 // Substract linefeed in IE
353 function fixIeBug(string
) {
354 if ($.browser
.msie
) {
355 return string
.length
- string
.replace(/\r*/g, '').length
;
361 function insert(block
) {
362 if (document
.selection
) {
363 var newSelection
= document
.selection
.createRange();
364 newSelection
.text
= block
;
366 textarea
.value
= textarea
.value
.substring(0, caretPosition
) + block
+ textarea
.value
.substring(caretPosition
+ selection
.length
, textarea
.value
.length
);
371 function set(start
, len
) {
372 if (textarea
.createTextRange
){
373 // quick fix to make it work on Opera 9.5
374 if ($.browser
.opera
&& $.browser
.version
>= 9.5 && len
== 0) {
377 range
= textarea
.createTextRange();
378 range
.collapse(true);
379 range
.moveStart('character', start
);
380 range
.moveEnd('character', len
);
382 } else if (textarea
.setSelectionRange
){
383 textarea
.setSelectionRange(start
, start
+ len
);
385 textarea
.scrollTop
= scrollPosition
;
393 scrollPosition
= textarea
.scrollTop
;
394 if (document
.selection
) {
395 selection
= document
.selection
.createRange().text
;
396 if ($.browser
.msie
) { // ie
397 var range
= document
.selection
.createRange(), rangeCopy
= range
.duplicate();
398 rangeCopy
.moveToElementText(textarea
);
400 while(rangeCopy
.inRange(range
)) {
401 rangeCopy
.moveStart('character');
405 caretPosition
= textarea
.selectionStart
;
407 } else { // gecko & webkit
408 caretPosition
= textarea
.selectionStart
;
409 selection
= textarea
.value
.substring(caretPosition
, textarea
.selectionEnd
);
414 // open preview window
416 if (!previewWindow
|| previewWindow
.closed
) {
417 if (options
.previewInWindow
) {
418 previewWindow
= window
.open('', 'preview', options
.previewInWindow
);
419 $(window
).unload(function() {
420 previewWindow
.close();
423 iFrame
= $('<iframe class="markItUpPreviewFrame"></iframe>');
424 if (options
.previewPosition
== 'after') {
425 iFrame
.insertAfter(footer
);
427 iFrame
.insertBefore(header
);
429 previewWindow
= iFrame
[iFrame
.length
- 1].contentWindow
|| frame
[iFrame
.length
- 1];
431 } else if (altKey
=== true) {
435 previewWindow
.close();
437 previewWindow
= iFrame
= false;
439 if (!options
.previewAutoRefresh
) {
442 if (options
.previewInWindow
) {
443 previewWindow
.focus();
447 // refresh Preview window
448 function refreshPreview() {
452 function renderPreview() {
454 if (options
.previewParserPath
!== '') {
457 url
: options
.previewParserPath
,
458 data
: options
.previewParserVar
+'='+encodeURIComponent($$.val()),
459 success: function(data
) {
460 writeInPreview( localize(data
, 1) );
466 url
: options
.previewTemplatePath
,
467 success: function(data
) {
468 writeInPreview( localize(data
, 1).replace(/<!-- content -->/g, $$.val()) );
476 function writeInPreview(data
) {
477 if (previewWindow
.document
) {
479 sp
= previewWindow
.document
.documentElement
.scrollTop
483 previewWindow
.document
.open();
484 previewWindow
.document
.write(data
);
485 previewWindow
.document
.close();
486 previewWindow
.document
.documentElement
.scrollTop
= sp
;
491 function keyPressed(e
) {
492 shiftKey
= e
.shiftKey
;
494 ctrlKey
= (!(e
.altKey
&& e
.ctrlKey
)) ? e
.ctrlKey
: false;
496 if (e
.type
=== 'keydown') {
497 if (ctrlKey
=== true) {
498 li
= $("a[accesskey="+String
.fromCharCode(e
.keyCode
)+"]", header
).parent('li');
499 if (li
.length
!== 0) {
501 setTimeout(function() {
502 li
.triggerHandler('mousedown');
507 if (e
.keyCode
=== 13 || e
.keyCode
=== 10) { // Enter key
508 if (ctrlKey
=== true) { // Enter + Ctrl
510 markup(options
.onCtrlEnter
);
511 return options
.onCtrlEnter
.keepDefault
;
512 } else if (shiftKey
=== true) { // Enter + Shift
514 markup(options
.onShiftEnter
);
515 return options
.onShiftEnter
.keepDefault
;
516 } else { // only Enter
517 markup(options
.onEnter
);
518 return options
.onEnter
.keepDefault
;
521 if (e
.keyCode
=== 9) { // Tab key
522 if (shiftKey
== true || ctrlKey
== true || altKey
== true) {
525 if (caretOffset
!== -1) {
527 caretOffset
= $$.val().length
- caretOffset
;
532 markup(options
.onTab
);
533 return options
.onTab
.keepDefault
;
543 $.fn
.markItUpRemove = function() {
544 return this.each(function() {
545 var $$ = $(this).unbind().removeClass('markItUpEditor');
546 $$.parent('div').parent('div.markItUp').parent('div').replaceWith($$);
551 $.markItUp = function(settings
) {
552 var options
= { target
:false };
553 $.extend(options
, settings
);
554 if (options
.target
) {
555 return $(options
.target
).each(function() {
557 $(this).trigger('insertion', [options
]);
560 $('textarea').trigger('insertion', [options
]);