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 $$.wrap('<div '+nameSpace
+'></div>');
126 $$.wrap('<div '+id
+' class="markItUp"></div>');
127 $$.wrap('<div class="markItUpContainer"></div>');
128 $$.addClass("markItUpEditor");
130 // add the header before the textarea
131 header
= $('<div class="markItUpHeader"></div>').insertBefore($$);
132 $(dropMenus(options
.markupSet
)).appendTo(header
);
133 // remove empty dropMenu
134 $(header
).find("li.markItUpDropMenu ul:empty").parent().remove();
136 // add the footer after the textarea
137 footer
= $('<div class="markItUpFooter"></div>').insertAfter($$);
139 // add the resize handle after textarea
141 if (options
.resizeHandle
=== true && $.browser
.safari
!== true) {
142 resizeHandle
= $('<div class="markItUpResizeHandle"></div>')
144 .bind("mousedown", function(e
) {
145 var h
= $$.height(), y
= e
.clientY
, mouseMove
, mouseUp
;
146 mouseMove = function(e
) {
147 $$.css("height", Math
.max(20, e
.clientY
+h
-y
)+"px");
150 mouseUp = function(e
) {
151 $("html").unbind("mousemove", mouseMove
).unbind("mouseup", mouseUp
);
154 $("html").bind("mousemove", mouseMove
).bind("mouseup", mouseUp
);
156 footer
.append(resizeHandle
);
160 $$.keydown(keyPressed
).keyup(keyPressed
);
162 // bind an event to catch external calls
163 $$.bind("insertion", function(e
, settings
) {
164 if (settings
.target
!== false) {
167 if (textarea
=== $.markItUp
.focused
) {
172 // remember the last focus
173 $$.focus(function() {
174 $.markItUp
.focused
= this;
178 // recursively build header with dropMenus from markupset
179 function dropMenus(markupSet
) {
180 var ul
= $('<ul></ul>'), i
= 0;
181 var lang
= ($$.attr('lang')||options
.lang
);
183 $('li:hover > ul', ul
).css('display', 'block');
184 $.each(markupSet
, function() {
185 var button
= this, t
= '', title
, li
, j
;
186 // pas de langue ou dans la langue ; et uniquement si langue autorisee
187 if ((!lang
|| !button
.lang
|| ($.inArray(lang
, button
.lang
) != -1))
188 && (!button
.lang_not
|| ($.inArray(lang
, button
.lang_not
) == -1))) {
189 title
= (button
.key
) ? (button
.name
||'')+' [Ctrl+'+button
.key
+']' : (button
.name
||'');
190 key
= (button
.key
) ? 'accesskey="'+button
.key
+'"' : '';
191 if (button
.separator
) {
192 li
= $('<li class="markItUpSeparator">'+(button
.separator
||'')+'</li>').appendTo(ul
);
195 for (j
= levels
.length
-1; j
>= 0; j
--) {
198 li
= $('<li class="markItUpButton markItUpButton'+t
+(i
)+' '+(button
.className
||'')+'"><a href="" '+key
+' title="'+title
+'"><b>'+(button
.name
||'')+'</b></a></li>')
199 .bind("contextmenu", function() { // prevent contextmenu on mac and allow ctrl+click
201 }).click(function() {
203 }).focusin(function(){
205 }).mousedown(function() {
209 setTimeout(function() { markup(button
) },1);
211 }).hover(function() {
212 $('> ul', this).show();
213 $(document
).one('click', function() { // close dropmenu if click outside
214 $('ul ul', header
).hide();
218 $('> ul', this).hide();
221 if (button
.dropMenu
) {
223 $(li
).addClass('markItUpDropMenu').append(dropMenus(button
.dropMenu
));
233 function magicMarkups(string
) {
235 string
= string
.toString();
236 string
= string
.replace(/\(\!\(([\s\S]*?)\)\!\)/g,
238 var b
= a
.split('|!|');
239 if (altKey
=== true) {
240 return (b
[1] !== undefined) ? b
[1] : b
[0];
242 return (b
[1] === undefined) ? "" : b
[0];
246 // [![prompt]!], [![prompt:!:value]!]
247 string
= string
.replace(/\[\!\[([\s\S]*?)\]\!\]/g,
249 var b
= a
.split(':!:');
250 if (abort
=== true) {
253 value
= prompt(b
[0], (b
[1]) ? b
[1] : '');
254 if (value
=== null) {
266 function prepare(action
) {
267 if ($.isFunction(action
)) {
268 action
= action(hash
);
270 return magicMarkups(action
);
273 // build block to insert
274 function build(string
) {
275 openWith
= prepare(clicked
.openWith
);
276 placeHolder
= prepare(clicked
.placeHolder
);
277 replaceWith
= prepare(clicked
.replaceWith
);
278 closeWith
= prepare(clicked
.closeWith
);
279 if (replaceWith
!== "") {
280 block
= openWith
+ replaceWith
+ closeWith
;
281 } else if (selection
=== '' && placeHolder
!== '') {
282 block
= openWith
+ placeHolder
+ closeWith
;
284 block
= openWith
+ (string
||selection
) + closeWith
;
286 return { block
:block
,
288 replaceWith
:replaceWith
,
289 placeHolder
:placeHolder
,
295 function selectWord(){
296 selectionBeforeAfter(/\s|[.,;:!¡?¿()]/);
299 function selectLine(){
300 selectionBeforeAfter(/\r?\n/);
304 function selectionRemoveLast(pattern
){
305 // Remove space by default
306 if (!pattern
) pattern
= /\s/;
307 last
= selection
[selection
.length
-1];
308 if (last
&& last
.match(pattern
)) {
309 set(caretPosition
, selection
.length
-1);
311 $.extend(hash
, { caretPosition
:caretPosition
, scrollPosition
:scrollPosition
} );
315 function selectionBeforeAfter(pattern
) {
316 if (!pattern
) pattern
= /\s/;
317 before
= textarea
.value
.substring(0, caretEffectivePosition
);
318 after
= textarea
.value
.substring(caretEffectivePosition
+ selection
.length
- fixIeBug(selection
));
320 before
= before
.split(pattern
);
321 after
= after
.split(pattern
);
324 function selectionSave(){
325 nb_before
= before
? before
[before
.length
-1].length
: 0;
326 nb_after
= after
? after
[0].length
: 0;
328 nb
= nb_before
+ selection
.length
+ nb_after
- fixIeBug(selection
);
329 caretPosition
= caretPosition
- nb_before
;
331 set(caretPosition
, nb
);
333 $.extend(hash
, { selection
:selection
, caretPosition
:caretPosition
, scrollPosition
:scrollPosition
} );
336 // define markup to insert
337 function markup(button
) {
339 hash
= clicked
= button
;
342 $.extend(hash
, { line
:"",
345 selection
:(selection
||''),
346 caretPosition
:caretPosition
,
353 // corrections des selections pour que
354 // - soit le curseur ne change pas
355 // - soit on prend le mot complet (si pas de selection)
356 // - soit on prend la ligne (avant, apres la selection)
357 if (button
.selectionType
) {
359 if (button
.selectionType
== "word") {
363 // win/ff add space on double click ? (hum, seems strange)
364 selectionRemoveLast(/\s/);
367 if (button
.selectionType
== "line") {
370 // horrible chose, mais tellement plus pratique
371 // car on ne peut pas de l'exerieur (json) utiliser
372 // les fonctions internes de markitup
373 if (button
.selectionType
== "return"){
374 selectionBeforeAfter(/\r?\n/);
375 before_last
= before
[before
.length
-1];
377 // gestion des listes -# et -*
378 if (r
= before_last
.match(/^-([*#]+) ?(.*)$/)) {
380 button
.replaceWith
= "\n-"+r
[1]+' ';
383 // supprime le -* present
385 button
.replaceWith
= "\n";
389 button
.replaceWith
= "\n";
391 before
[before
.length
-1] = before_last
;
397 // callbacks before insertion
398 prepare(options
.beforeInsert
);
399 prepare(clicked
.beforeInsert
);
400 if (ctrlKey
=== true && shiftKey
=== true) {
401 prepare(clicked
.beforeMultiInsert
);
403 $.extend(hash
, { line
:1 });
405 // insertion forcee en multiligne ou ctrl+click
406 if ((button
.forceMultiline
=== true && selection
.length
)
407 || (ctrlKey
=== true && shiftKey
=== true)) {
408 lines
= selection
.split(/\r?\n/);
409 for (j
= 0, n
= lines
.length
, i
= 0; i
< n
; i
++) {
410 if ($.trim(lines
[i
]) !== '') {
411 $.extend(hash
, { line
:++j
, selection
:lines
[i
] } );
412 lines
[i
] = build(lines
[i
]).block
;
417 string
= { block
:lines
.join('\n')};
418 start
= caretPosition
;
419 len
= string
.block
.length
+ (($.browser
.opera
) ? n
-1 : 0);
420 } else if (ctrlKey
=== true) {
421 string
= build(selection
);
422 start
= caretPosition
+ string
.openWith
.length
;
423 len
= string
.block
.length
- string
.openWith
.length
- string
.closeWith
.length
;
424 len
-= fixIeBug(string
.block
);
425 } else if (shiftKey
=== true) {
426 string
= build(selection
);
427 start
= caretPosition
;
428 len
= string
.block
.length
;
429 len
-= fixIeBug(string
.block
);
431 string
= build(selection
);
432 start
= caretPosition
+ string
.block
.length
;
434 start
-= fixIeBug(string
.block
);
437 if (selection
=== ''){
438 start
+= fixOperaBug(string
.replaceWith
);
440 $.extend(hash
, { caretPosition
:caretPosition
, scrollPosition
:scrollPosition
} );
442 if (string
.block
!== selection
&& abort
=== false) {
443 insert(string
.block
);
449 $.extend(hash
, { line
:'', selection
:selection
});
451 // callbacks after insertion
452 if ((button
.forceMultiline
=== true)
453 || (ctrlKey
=== true && shiftKey
=== true)) {
454 prepare(clicked
.afterMultiInsert
);
457 prepare(clicked
.afterInsert
);
458 prepare(options
.afterInsert
);
460 // refresh preview if opened
461 if (previewWindow
&& options
.previewAutoRefresh
) {
466 shiftKey
= altKey
= ctrlKey
= abort
= false;
470 // Substract linefeed in Opera
471 function fixOperaBug(string
) {
472 if ($.browser
.opera
) {
473 return string
.length
- string
.replace(/\n*/g, '').length
;
477 // Substract linefeed in IE
478 function fixIeBug(string
) {
479 if ($.browser
.msie
) {
480 return string
.length
- string
.replace(/\r*/g, '').length
;
486 function insert(block
) {
487 if (document
.selection
) {
488 var newSelection
= document
.selection
.createRange();
489 newSelection
.text
= block
;
491 textarea
.value
= textarea
.value
.substring(0, caretEffectivePosition
) + block
+ textarea
.value
.substring(caretEffectivePosition
+ selection
.length
, textarea
.value
.length
);
496 function set(start
, len
) {
497 if (textarea
.createTextRange
){
498 range
= textarea
.createTextRange();
499 range
.collapse(true);
500 range
.moveStart('character', start
);
501 range
.moveEnd('character', len
);
503 } else if (textarea
.setSelectionRange
){
504 textarea
.setSelectionRange(start
, start
+ len
);
506 textarea
.scrollTop
= scrollPosition
;
514 scrollPosition
= textarea
.scrollTop
;
515 if (document
.selection
) {
516 selection
= document
.selection
.createRange().text
;
517 if ($.browser
.msie
) { // ie
518 var range
= document
.selection
.createRange(), rangeCopy
= range
.duplicate();
519 rangeCopy
.moveToElementText(textarea
);
521 while(rangeCopy
.inRange(range
)) {
522 rangeCopy
.moveStart('character');
525 caretEffectivePosition
= caretPosition
;
527 caretPosition
= textarea
.selectionStart
;
528 lenSelection
= selection
.length
;
529 // calcul du nombre reel de caracteres pour les substr()
530 set(0,caretPosition
);
531 opBefore
= document
.selection
.createRange().text
;
532 caretEffectivePosition
= opBefore
.length
- fixOperaBug(opBefore
);
533 set(caretPosition
, lenSelection
);
534 selection
= document
.selection
.createRange().text
;
536 } else { // gecko & webkit
537 caretPosition
= textarea
.selectionStart
;
538 caretEffectivePosition
= caretPosition
;
539 selection
= textarea
.value
.substring(caretPosition
, textarea
.selectionEnd
);
545 // open preview window
547 if (!previewWindow
|| previewWindow
.closed
) {
548 if (options
.previewInWindow
) {
549 previewWindow
= window
.open('', 'preview', options
.previewInWindow
);
550 $(window
).unload(function() {
551 previewWindow
.close();
554 iFrame
= $('<iframe class="markItUpPreviewFrame"></iframe>');
555 if (options
.previewPosition
== 'after') {
556 iFrame
.insertAfter(footer
);
558 iFrame
.insertBefore(header
);
560 previewWindow
= iFrame
[iFrame
.length
- 1].contentWindow
|| frame
[iFrame
.length
- 1];
562 } else if (altKey
=== true) {
566 previewWindow
.close();
568 previewWindow
= iFrame
= false;
570 if (!options
.previewAutoRefresh
) {
573 if (options
.previewInWindow
) {
574 previewWindow
.focus();
578 // refresh Preview window
579 function refreshPreview() {
583 function renderPreview() {
585 if (options
.previewParserPath
!== '') {
588 url
: options
.previewParserPath
,
589 data
: options
.previewParserVar
+'='+encodeURIComponent($$.val()),
590 success: function(data
) {
591 writeInPreview( localize(data
, 1) );
597 url
: options
.previewTemplatePath
,
598 success: function(data
) {
599 writeInPreview( localize(data
, 1).replace(/<!-- content -->/g, $$.val()) );
607 function writeInPreview(data
) {
608 if (previewWindow
.document
) {
610 sp
= previewWindow
.document
.documentElement
.scrollTop
614 previewWindow
.document
.open();
615 previewWindow
.document
.write(data
);
616 previewWindow
.document
.close();
617 previewWindow
.document
.documentElement
.scrollTop
= sp
;
622 function keyPressed(e
) {
623 if (e
.type
=== 'keydown') {
624 if (e
.which
=== 18) {e
.altKey
= true;} // alt
625 if (e
.which
=== 17) {e
.ctrlKey
= true;} // control
626 if (e
.which
=== 16) {e
.shiftKey
= true;} // shift
629 shiftKey
= e
.shiftKey
;
631 ctrlKey
= (!(e
.altKey
&& e
.ctrlKey
)) ? e
.ctrlKey
: false;
633 if (e
.type
=== 'keydown') {
634 if (ctrlKey
=== true) {
635 li
= $("a[accesskey="+String
.fromCharCode(e
.which
)+"]", header
).parent('li');
636 if (li
.length
!== 0) {
638 setTimeout(function() {
639 li
.triggerHandler('mousedown');
644 // si opera, on s'embete pas, il cree plus de problemes qu'autre chose
645 // car il ne prend pas en compte l'arret de ces evenements
646 if (!$.browser
.opera
) {
647 if (e
.which
=== 13 || e
.which
=== 10) { // Enter key
648 if (ctrlKey
=== true) { // Enter + Ctrl
650 markup(options
.onCtrlEnter
);
651 return options
.onCtrlEnter
.keepDefault
;
652 } else if (shiftKey
=== true) { // Enter + Shift
654 markup(options
.onShiftEnter
);
655 return options
.onShiftEnter
.keepDefault
;
656 } else { // only Enter
657 markup(options
.onEnter
);
658 return options
.onEnter
.keepDefault
;
662 if (e
.which
=== 9) { // Tab key
663 if (shiftKey
== true || ctrlKey
== true || altKey
== true) {
666 markup(options
.onTab
);
667 return options
.onTab
.keepDefault
;
677 $.fn
.markItUpRemove = function() {
678 return this.each(function() {
679 var $$ = $(this).unbind().removeClass('markItUpEditor');
680 $$.parent('div').parent('div.markItUp').parent('div').replaceWith($$);
685 $.markItUp = function(settings
) {
686 var options
= { target
:false };
687 $.extend(options
, settings
);
688 if (options
.target
) {
689 return $(options
.target
).each(function() {
691 $(this).trigger('insertion', [options
]);
694 $('textarea').trigger('insertion', [options
]);