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 // ----------------------------------------------------------------------------
29 * Le code original de markitup 1.1.8
30 * a ete modifie pour prendre en compte
32 * 1) la langue utilisee dans les textarea :
33 * - si un textarea possede un attribut lang='xx' alors
34 * markitup n'affichera que les icones qui correspondent a cette langue
35 * - on peut passer une valeur de langue par defaut a markitup (le textarea peut ne pas en definir)
36 * .markitup(set_spip,{lang:'fr'});
37 * - une option supplementaire optionnelle 'lang' est introduite dans les parametres
38 * des boutons (markupset), par exemple : lang:['fr','es','en']
39 * - si un bouton n'a pas ce parametre, l'icone s'affiche
40 * quelque soit la langue designee dans le textarea ou les parametres de markitup ;
41 * sinon, il faut que la langue soit contenue dedans pour que l'icone s'affiche.
42 * 2) les control + shift (ou alt) + click bouton qui ne semblaient pas fonctionner
43 * en tout cas sous FF3/ubintu/jquery 1.2.6 a verifier chez les autres (opera 9.5/ubuntu ok)
44 * 3) gerer des types de selections differentes :
45 * - normales comme dans markitup (rien a faire)
46 * - 'selectionType':'word' : aux mots le plus proche si pas de selection (sinon la selection)
47 * - 'selectionType':'line' : aux lignes les plus proches
48 * - and 'return' : ugly hack to generate list (and so on) on key 'return' press
49 * 4) forcer des actions multilignes sans avoir besoin de faire control+click
50 * - 'forceMultiline':true : force donc une insertion multiligne
51 * 5) correction de la recuperation des selections d'Opera et de IE
52 * en utilisant une autre fonction de split() qui corrige leurs bugs.
53 * (caretOffset n'est plus necessaire)
57 $.fn
.markItUp = function(settings
, extraSettings
) {
58 var options
, ctrlKey
, shiftKey
, altKey
;
59 ctrlKey
= shiftKey
= altKey
= false;
65 previewInWindow
: '', // 'width=800, height=600, resizable=yes, scrollbars=yes'
66 previewAutoRefresh
: true,
67 previewPosition
: 'after',
68 previewTemplatePath
: '~/templates/preview.html',
69 previewParserPath
: '',
70 previewParserVar
: 'data',
78 markupSet
: [ { /* set */ } ]
80 $.extend(options
, settings
, extraSettings
);
82 // compute markItUp! path
84 $('script').each(function(a
, tag
) {
85 miuScript
= $(tag
).get(0).src
.match(/(.*)jquery\.markitup(\.pack)?\.js$/);
86 if (miuScript
!== null) {
87 options
.root
= miuScript
[1];
92 return this.each(function() {
93 var $$, textarea
, levels
, scrollPosition
, caretPosition
, caretEffectivePosition
,
94 clicked
, hash
, header
, footer
, previewWindow
, template
, iFrame
, abort
,
100 scrollPosition
= caretPosition
= 0;
102 options
.previewParserPath
= localize(options
.previewParserPath
);
103 options
.previewTemplatePath
= localize(options
.previewTemplatePath
);
105 // apply the computed path to ~/
106 function localize(data
, inText
) {
108 return data
.replace(/("|')~\//g, "$1"+options
.root
);
110 return data
.replace(/^~\//, options
.root
);
113 // init and build editor
115 id
= ''; nameSpace
= '';
117 id
= 'id="'+options
.id
+'"';
118 } else if ($$.attr("id")) {
119 id
= 'id="markItUp'+($$.attr("id").substr(0, 1).toUpperCase())+($$.attr("id").substr(1))+'"';
122 if (options
.nameSpace
) {
123 nameSpace
= 'class="'+options
.nameSpace
+'"';
125 currentScrollPosition
= $$.scrollTop();
126 $$.wrap('<div '+nameSpace
+'></div>');
127 $$.wrap('<div '+id
+' class="markItUp"></div>');
128 $$.wrap('<div class="markItUpContainer"></div>');
129 $$.addClass("markItUpEditor");
130 $$.scrollTop(currentScrollPosition
);
132 // add the header before the textarea
133 header
= $('<div class="markItUpHeader"></div>').insertBefore($$);
134 $(dropMenus(options
.markupSet
)).appendTo(header
);
135 // remove empty dropMenu
136 $(header
).find("li.markItUpDropMenu ul:empty").parent().remove();
138 // add the footer after the textarea
139 footer
= $('<div class="markItUpFooter"></div>').insertAfter($$);
141 // add the resize handle after textarea
143 if (options
.resizeHandle
=== true && $.browser
.safari
!== true) {
144 resizeHandle
= $('<div class="markItUpResizeHandle"></div>')
146 .bind("mousedown", function(e
) {
147 var h
= $$.height(), y
= e
.clientY
, mouseMove
, mouseUp
;
148 mouseMove = function(e
) {
149 $$.css("height", Math
.max(20, e
.clientY
+h
-y
)+"px");
152 mouseUp = function(e
) {
153 $("html").unbind("mousemove", mouseMove
).unbind("mouseup", mouseUp
);
156 $("html").bind("mousemove", mouseMove
).bind("mouseup", mouseUp
);
158 footer
.append(resizeHandle
);
162 $$.keydown(keyPressed
).keyup(keyPressed
);
164 // bind an event to catch external calls
165 $$.bind("insertion", function(e
, settings
) {
166 if (settings
.target
!== false) {
169 if (textarea
=== $.markItUp
.focused
) {
174 // remember the last focus
175 $$.focus(function() {
176 $.markItUp
.focused
= this;
180 // recursively build header with dropMenus from markupset
181 function dropMenus(markupSet
) {
182 var ul
= $('<ul></ul>'), i
= 0;
183 var lang
= ($$.attr('lang')||options
.lang
);
185 $('li:hover > ul', ul
).css('display', 'block');
186 $.each(markupSet
, function() {
187 var button
= this, t
= '', title
, li
, j
;
188 // pas de langue ou dans la langue ; et uniquement si langue autorisee
189 if ((!lang
|| !button
.lang
|| ($.inArray(lang
, button
.lang
) != -1))
190 && (!button
.lang_not
|| ($.inArray(lang
, button
.lang_not
) == -1))) {
191 title
= (button
.key
) ? (button
.name
||'')+' [Ctrl+'+button
.key
+']' : (button
.name
||'');
192 key
= (button
.key
) ? 'accesskey="'+button
.key
+'"' : '';
193 if (button
.separator
) {
194 li
= $('<li class="markItUpSeparator">'+(button
.separator
||'')+'</li>').appendTo(ul
);
197 for (j
= levels
.length
-1; j
>= 0; j
--) {
200 li
= $('<li class="markItUpButton markItUpButton'+t
+(i
)+' '+(button
.className
||'')+'"><a href="" '+key
+' title="'+title
+'"><b>'+(button
.name
||'')+'</b></a></li>')
201 .bind("contextmenu", function() { // prevent contextmenu on mac and allow ctrl+click
203 }).click(function() {
205 }).focusin(function(){
207 }).mousedown(function() {
211 setTimeout(function() { markup(button
) },1);
213 }).hover(function() {
214 $('> ul', this).show();
215 $(document
).one('click', function() { // close dropmenu if click outside
216 $('ul ul', header
).hide();
220 $('> ul', this).hide();
223 if (button
.dropMenu
) {
225 $(li
).addClass('markItUpDropMenu').append(dropMenus(button
.dropMenu
));
235 function magicMarkups(string
) {
237 string
= string
.toString();
238 string
= string
.replace(/\(\!\(([\s\S]*?)\)\!\)/g,
240 var b
= a
.split('|!|');
241 if (altKey
=== true) {
242 return (b
[1] !== undefined) ? b
[1] : b
[0];
244 return (b
[1] === undefined) ? "" : b
[0];
248 // [![prompt]!], [![prompt:!:value]!]
249 string
= string
.replace(/\[\!\[([\s\S]*?)\]\!\]/g,
251 var b
= a
.split(':!:');
252 if (abort
=== true) {
255 value
= prompt(b
[0], (b
[1]) ? b
[1] : '');
256 if (value
=== null) {
268 function prepare(action
) {
269 if ($.isFunction(action
)) {
270 action
= action(hash
);
272 return magicMarkups(action
);
275 // build block to insert
276 function build(string
) {
277 openWith
= prepare(clicked
.openWith
);
278 placeHolder
= prepare(clicked
.placeHolder
);
279 replaceWith
= prepare(clicked
.replaceWith
);
280 closeWith
= prepare(clicked
.closeWith
);
281 if (replaceWith
!== "") {
282 block
= openWith
+ replaceWith
+ closeWith
;
283 } else if (selection
=== '' && placeHolder
!== '') {
284 block
= openWith
+ placeHolder
+ closeWith
;
286 block
= openWith
+ (string
||selection
) + closeWith
;
288 return { block
:block
,
290 replaceWith
:replaceWith
,
291 placeHolder
:placeHolder
,
297 function selectWord(){
298 selectionBeforeAfter(/\s|[.,;:!¡?¿()]/);
301 function selectLine(){
302 selectionBeforeAfter(/\r?\n/);
306 function selectionRemoveLast(pattern
){
307 // Remove space by default
308 if (!pattern
) pattern
= /\s/;
309 last
= selection
[selection
.length
-1];
310 if (last
&& last
.match(pattern
)) {
311 set(caretPosition
, selection
.length
-1);
313 $.extend(hash
, { caretPosition
:caretPosition
, scrollPosition
:scrollPosition
} );
317 function selectionBeforeAfter(pattern
) {
318 if (!pattern
) pattern
= /\s/;
319 before
= textarea
.value
.substring(0, caretEffectivePosition
);
320 after
= textarea
.value
.substring(caretEffectivePosition
+ selection
.length
- fixIeBug(selection
));
322 before
= before
.split(pattern
);
323 after
= after
.split(pattern
);
326 function selectionSave(){
327 nb_before
= before
? before
[before
.length
-1].length
: 0;
328 nb_after
= after
? after
[0].length
: 0;
330 nb
= nb_before
+ selection
.length
+ nb_after
- fixIeBug(selection
);
331 caretPosition
= caretPosition
- nb_before
;
333 set(caretPosition
, nb
);
335 $.extend(hash
, { selection
:selection
, caretPosition
:caretPosition
, scrollPosition
:scrollPosition
} );
338 // define markup to insert
339 function markup(button
) {
341 hash
= clicked
= button
;
344 $.extend(hash
, { line
:"",
347 selection
:(selection
||''),
348 caretPosition
:caretPosition
,
355 // corrections des selections pour que
356 // - soit le curseur ne change pas
357 // - soit on prend le mot complet (si pas de selection)
358 // - soit on prend la ligne (avant, apres la selection)
359 if (button
.selectionType
) {
361 if (button
.selectionType
== "word") {
365 // win/ff add space on double click ? (hum, seems strange)
366 selectionRemoveLast(/\s/);
369 if (button
.selectionType
== "line") {
372 // horrible chose, mais tellement plus pratique
373 // car on ne peut pas de l'exerieur (json) utiliser
374 // les fonctions internes de markitup
375 if (button
.selectionType
== "return"){
376 selectionBeforeAfter(/\r?\n/);
377 before_last
= before
[before
.length
-1];
379 // gestion des listes -# et -*
380 if (r
= before_last
.match(/^-([*#]+) ?(.*)$/)) {
382 button
.replaceWith
= "\n-"+r
[1]+' ';
385 // supprime le -* present
387 button
.replaceWith
= "\n";
391 button
.replaceWith
= "\n";
393 before
[before
.length
-1] = before_last
;
399 // callbacks before insertion
400 prepare(options
.beforeInsert
);
401 prepare(clicked
.beforeInsert
);
402 if (ctrlKey
=== true && shiftKey
=== true) {
403 prepare(clicked
.beforeMultiInsert
);
405 $.extend(hash
, { line
:1 });
407 // insertion forcee en multiligne ou ctrl+click
408 if ((button
.forceMultiline
=== true && selection
.length
)
409 || (ctrlKey
=== true && shiftKey
=== true)) {
410 lines
= selection
.split(/\r?\n/);
411 for (j
= 0, n
= lines
.length
, i
= 0; i
< n
; i
++) {
412 if ($.trim(lines
[i
]) !== '') {
413 $.extend(hash
, { line
:++j
, selection
:lines
[i
] } );
414 lines
[i
] = build(lines
[i
]).block
;
419 string
= { block
:lines
.join('\n')};
420 start
= caretPosition
;
421 len
= string
.block
.length
+ (($.browser
.opera
) ? n
-1 : 0);
422 } else if (ctrlKey
=== true) {
423 string
= build(selection
);
424 start
= caretPosition
+ string
.openWith
.length
;
425 len
= string
.block
.length
- string
.openWith
.length
- string
.closeWith
.length
;
426 len
-= fixIeBug(string
.block
);
427 } else if (shiftKey
=== true) {
428 string
= build(selection
);
429 start
= caretPosition
;
430 len
= string
.block
.length
;
431 len
-= fixIeBug(string
.block
);
433 string
= build(selection
);
434 start
= caretPosition
+ string
.block
.length
;
436 start
-= fixIeBug(string
.block
);
439 if (selection
=== ''){
440 start
+= fixOperaBug(string
.replaceWith
);
442 $.extend(hash
, { caretPosition
:caretPosition
, scrollPosition
:scrollPosition
} );
444 if (string
.block
!== selection
&& abort
=== false) {
445 insert(string
.block
);
451 $.extend(hash
, { line
:'', selection
:selection
});
453 // callbacks after insertion
454 if ((button
.forceMultiline
=== true)
455 || (ctrlKey
=== true && shiftKey
=== true)) {
456 prepare(clicked
.afterMultiInsert
);
459 prepare(clicked
.afterInsert
);
460 prepare(options
.afterInsert
);
462 // refresh preview if opened
463 if (previewWindow
&& options
.previewAutoRefresh
) {
468 shiftKey
= altKey
= ctrlKey
= abort
= false;
472 // Substract linefeed in Opera
473 function fixOperaBug(string
) {
474 if ($.browser
.opera
) {
475 return string
.length
- string
.replace(/\n*/g, '').length
;
479 // Substract linefeed in IE
480 function fixIeBug(string
) {
481 if ($.browser
.msie
) {
482 return string
.length
- string
.replace(/\r*/g, '').length
;
488 function insert(block
) {
489 if (document
.selection
) {
490 var newSelection
= document
.selection
.createRange();
491 newSelection
.text
= block
;
493 textarea
.value
= textarea
.value
.substring(0, caretEffectivePosition
) + block
+ textarea
.value
.substring(caretEffectivePosition
+ selection
.length
, textarea
.value
.length
);
498 function set(start
, len
) {
499 if (textarea
.createTextRange
){
500 range
= textarea
.createTextRange();
501 range
.collapse(true);
502 range
.moveStart('character', start
);
503 range
.moveEnd('character', len
);
505 } else if (textarea
.setSelectionRange
){
506 textarea
.setSelectionRange(start
, start
+ len
);
508 textarea
.scrollTop
= scrollPosition
;
516 scrollPosition
= textarea
.scrollTop
;
517 if (document
.selection
) {
518 selection
= document
.selection
.createRange().text
;
519 if ($.browser
.msie
) { // ie
520 var range
= document
.selection
.createRange(), rangeCopy
= range
.duplicate();
521 rangeCopy
.moveToElementText(textarea
);
523 while(rangeCopy
.inRange(range
)) {
524 rangeCopy
.moveStart('character');
527 caretEffectivePosition
= caretPosition
;
529 caretPosition
= textarea
.selectionStart
;
530 lenSelection
= selection
.length
;
531 // calcul du nombre reel de caracteres pour les substr()
532 set(0,caretPosition
);
533 opBefore
= document
.selection
.createRange().text
;
534 caretEffectivePosition
= opBefore
.length
- fixOperaBug(opBefore
);
535 set(caretPosition
, lenSelection
);
536 selection
= document
.selection
.createRange().text
;
538 } else { // gecko & webkit
539 caretPosition
= textarea
.selectionStart
;
540 caretEffectivePosition
= caretPosition
;
541 selection
= textarea
.value
.substring(caretPosition
, textarea
.selectionEnd
);
547 // open preview window
549 if (!previewWindow
|| previewWindow
.closed
) {
550 if (options
.previewInWindow
) {
551 previewWindow
= window
.open('', 'preview', options
.previewInWindow
);
552 $(window
).unload(function() {
553 previewWindow
.close();
556 iFrame
= $('<iframe class="markItUpPreviewFrame"></iframe>');
557 if (options
.previewPosition
== 'after') {
558 iFrame
.insertAfter(footer
);
560 iFrame
.insertBefore(header
);
562 previewWindow
= iFrame
[iFrame
.length
- 1].contentWindow
|| frame
[iFrame
.length
- 1];
564 } else if (altKey
=== true) {
568 previewWindow
.close();
570 previewWindow
= iFrame
= false;
572 if (!options
.previewAutoRefresh
) {
575 if (options
.previewInWindow
) {
576 previewWindow
.focus();
580 // refresh Preview window
581 function refreshPreview() {
585 function renderPreview() {
587 if (options
.previewParserPath
!== '') {
590 url
: options
.previewParserPath
,
591 data
: options
.previewParserVar
+'='+encodeURIComponent($$.val()),
592 success: function(data
) {
593 writeInPreview( localize(data
, 1) );
599 url
: options
.previewTemplatePath
,
600 success: function(data
) {
601 writeInPreview( localize(data
, 1).replace(/<!-- content -->/g, $$.val()) );
609 function writeInPreview(data
) {
610 if (previewWindow
.document
) {
612 sp
= previewWindow
.document
.documentElement
.scrollTop
616 previewWindow
.document
.open();
617 previewWindow
.document
.write(data
);
618 previewWindow
.document
.close();
619 previewWindow
.document
.documentElement
.scrollTop
= sp
;
624 function keyPressed(e
) {
625 if (e
.type
=== 'keydown') {
626 if (e
.which
=== 18) {e
.altKey
= true;} // alt
627 if (e
.which
=== 17) {e
.ctrlKey
= true;} // control
628 if (e
.which
=== 16) {e
.shiftKey
= true;} // shift
631 shiftKey
= e
.shiftKey
;
633 ctrlKey
= (!(e
.altKey
&& e
.ctrlKey
)) ? e
.ctrlKey
: false;
635 if (e
.type
=== 'keydown') {
636 if (ctrlKey
=== true) {
637 li
= $("a[accesskey="+String
.fromCharCode(e
.which
)+"]", header
).parent('li');
638 if (li
.length
!== 0) {
640 setTimeout(function() {
641 li
.triggerHandler('mousedown');
646 // si opera, on s'embete pas, il cree plus de problemes qu'autre chose
647 // car il ne prend pas en compte l'arret de ces evenements
648 if (!$.browser
.opera
) {
649 if (e
.which
=== 13 || e
.which
=== 10) { // Enter key
650 if (ctrlKey
=== true) { // Enter + Ctrl
652 markup(options
.onCtrlEnter
);
653 return options
.onCtrlEnter
.keepDefault
;
654 } else if (shiftKey
=== true) { // Enter + Shift
656 markup(options
.onShiftEnter
);
657 return options
.onShiftEnter
.keepDefault
;
658 } else { // only Enter
659 markup(options
.onEnter
);
660 return options
.onEnter
.keepDefault
;
664 if (e
.which
=== 9) { // Tab key
665 if (shiftKey
== true || ctrlKey
== true || altKey
== true) {
668 markup(options
.onTab
);
669 return options
.onTab
.keepDefault
;
679 $.fn
.markItUpRemove = function() {
680 return this.each(function() {
681 var $$ = $(this).unbind().removeClass('markItUpEditor');
682 $$.parent('div').parent('div.markItUp').parent('div').replaceWith($$);
687 $.markItUp = function(settings
) {
688 var options
= { target
:false };
689 $.extend(options
, settings
);
690 if (options
.target
) {
691 return $(options
.target
).each(function() {
693 $(this).trigger('insertion', [options
]);
696 $('textarea').trigger('insertion', [options
]);