bgneal@312: // ---------------------------------------------------------------------------- bgneal@312: // markItUp! Universal MarkUp Engine, JQuery plugin bgneal@312: // v 1.1.x bgneal@312: // Dual licensed under the MIT and GPL licenses. bgneal@312: // ---------------------------------------------------------------------------- bgneal@312: // Copyright (C) 2007-2010 Jay Salvat bgneal@312: // http://markitup.jaysalvat.com/ bgneal@312: // ---------------------------------------------------------------------------- bgneal@312: // Permission is hereby granted, free of charge, to any person obtaining a copy bgneal@312: // of this software and associated documentation files (the "Software"), to deal bgneal@312: // in the Software without restriction, including without limitation the rights bgneal@312: // to use, copy, modify, merge, publish, distribute, sublicense, and/or sell bgneal@312: // copies of the Software, and to permit persons to whom the Software is bgneal@312: // furnished to do so, subject to the following conditions: bgneal@312: // bgneal@312: // The above copyright notice and this permission notice shall be included in bgneal@312: // all copies or substantial portions of the Software. bgneal@312: // bgneal@312: // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR bgneal@312: // IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, bgneal@312: // FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE bgneal@312: // AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER bgneal@312: // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, bgneal@312: // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN bgneal@312: // THE SOFTWARE. bgneal@312: // ---------------------------------------------------------------------------- bgneal@312: (function($) { bgneal@312: $.fn.markItUp = function(settings, extraSettings) { bgneal@312: var options, ctrlKey, shiftKey, altKey; bgneal@312: ctrlKey = shiftKey = altKey = false; bgneal@312: bgneal@312: options = { id: '', bgneal@312: nameSpace: '', bgneal@312: root: '', bgneal@312: previewInWindow: '', // 'width=800, height=600, resizable=yes, scrollbars=yes' bgneal@312: previewAutoRefresh: true, bgneal@312: previewPosition: 'after', bgneal@312: previewTemplatePath: '~/templates/preview.html', bgneal@312: previewParserPath: '', bgneal@312: previewParserVar: 'data', bgneal@312: resizeHandle: true, bgneal@312: beforeInsert: '', bgneal@312: afterInsert: '', bgneal@312: onEnter: {}, bgneal@312: onShiftEnter: {}, bgneal@312: onCtrlEnter: {}, bgneal@312: onTab: {}, bgneal@312: markupSet: [ { /* set */ } ] bgneal@312: }; bgneal@312: $.extend(options, settings, extraSettings); bgneal@312: bgneal@312: // compute markItUp! path bgneal@312: if (!options.root) { bgneal@312: $('script').each(function(a, tag) { bgneal@312: miuScript = $(tag).get(0).src.match(/(.*)jquery\.markitup(\.pack)?\.js$/); bgneal@312: if (miuScript !== null) { bgneal@312: options.root = miuScript[1]; bgneal@312: } bgneal@312: }); bgneal@312: } bgneal@312: bgneal@312: return this.each(function() { bgneal@312: var $$, textarea, levels, scrollPosition, caretPosition, caretOffset, bgneal@312: clicked, hash, header, footer, previewWindow, template, iFrame, abort; bgneal@312: $$ = $(this); bgneal@312: textarea = this; bgneal@312: levels = []; bgneal@312: abort = false; bgneal@312: scrollPosition = caretPosition = 0; bgneal@312: caretOffset = -1; bgneal@312: bgneal@312: options.previewParserPath = localize(options.previewParserPath); bgneal@312: options.previewTemplatePath = localize(options.previewTemplatePath); bgneal@312: bgneal@312: // apply the computed path to ~/ bgneal@312: function localize(data, inText) { bgneal@312: if (inText) { bgneal@312: return data.replace(/("|')~\//g, "$1"+options.root); bgneal@312: } bgneal@312: return data.replace(/^~\//, options.root); bgneal@312: } bgneal@312: bgneal@312: // init and build editor bgneal@312: function init() { bgneal@312: id = ''; nameSpace = ''; bgneal@312: if (options.id) { bgneal@312: id = 'id="'+options.id+'"'; bgneal@312: } else if ($$.attr("id")) { bgneal@312: id = 'id="markItUp'+($$.attr("id").substr(0, 1).toUpperCase())+($$.attr("id").substr(1))+'"'; bgneal@312: bgneal@312: } bgneal@312: if (options.nameSpace) { bgneal@312: nameSpace = 'class="'+options.nameSpace+'"'; bgneal@312: } bgneal@312: $$.wrap('
'); bgneal@312: $$.wrap('
'); bgneal@312: $$.wrap('
'); bgneal@312: $$.addClass("markItUpEditor"); bgneal@312: bgneal@312: // add the header before the textarea bgneal@312: header = $('
').insertBefore($$); bgneal@312: $(dropMenus(options.markupSet)).appendTo(header); bgneal@312: bgneal@312: // add the footer after the textarea bgneal@312: footer = $('
').insertAfter($$); bgneal@312: bgneal@312: // add the resize handle after textarea bgneal@312: if (options.resizeHandle === true && $.browser.safari !== true) { bgneal@312: resizeHandle = $('
') bgneal@312: .insertAfter($$) bgneal@312: .bind("mousedown", function(e) { bgneal@312: var h = $$.height(), y = e.clientY, mouseMove, mouseUp; bgneal@312: mouseMove = function(e) { bgneal@312: $$.css("height", Math.max(20, e.clientY+h-y)+"px"); bgneal@312: return false; bgneal@312: }; bgneal@312: mouseUp = function(e) { bgneal@312: $("html").unbind("mousemove", mouseMove).unbind("mouseup", mouseUp); bgneal@312: return false; bgneal@312: }; bgneal@312: $("html").bind("mousemove", mouseMove).bind("mouseup", mouseUp); bgneal@312: }); bgneal@312: footer.append(resizeHandle); bgneal@312: } bgneal@312: bgneal@312: // listen key events bgneal@312: $$.keydown(keyPressed).keyup(keyPressed); bgneal@312: bgneal@312: // bind an event to catch external calls bgneal@312: $$.bind("insertion", function(e, settings) { bgneal@312: if (settings.target !== false) { bgneal@312: get(); bgneal@312: } bgneal@312: if (textarea === $.markItUp.focused) { bgneal@312: markup(settings); bgneal@312: } bgneal@312: }); bgneal@312: bgneal@312: // remember the last focus bgneal@312: $$.focus(function() { bgneal@312: $.markItUp.focused = this; bgneal@312: }); bgneal@312: } bgneal@312: bgneal@312: // recursively build header with dropMenus from markupset bgneal@312: function dropMenus(markupSet) { bgneal@312: var ul = $(''), i = 0; bgneal@312: $('li:hover > ul', ul).css('display', 'block'); bgneal@312: $.each(markupSet, function() { bgneal@312: var button = this, t = '', title, li, j; bgneal@312: title = (button.key) ? (button.name||'')+' [Ctrl+'+button.key+']' : (button.name||''); bgneal@312: key = (button.key) ? 'accesskey="'+button.key+'"' : ''; bgneal@312: if (button.separator) { bgneal@312: li = $('
  • '+(button.separator||'')+'
  • ').appendTo(ul); bgneal@312: } else { bgneal@312: i++; bgneal@312: for (j = levels.length -1; j >= 0; j--) { bgneal@312: t += levels[j]+"-"; bgneal@312: } bgneal@312: li = $('
  • '+(button.name||'')+'
  • ') bgneal@312: .bind("contextmenu", function() { // prevent contextmenu on mac and allow ctrl+click bgneal@312: return false; bgneal@312: }).click(function() { bgneal@312: return false; bgneal@312: }).focusin(function(){ bgneal@312: $$.focus(); bgneal@312: }).mousedown(function() { bgneal@312: if (button.call) { bgneal@312: eval(button.call)(); bgneal@312: } bgneal@312: setTimeout(function() { markup(button) },1); bgneal@312: return false; bgneal@312: }).hover(function() { bgneal@312: $('> ul', this).show(); bgneal@312: $(document).one('click', function() { // close dropmenu if click outside bgneal@312: $('ul ul', header).hide(); bgneal@312: } bgneal@312: ); bgneal@312: }, function() { bgneal@312: $('> ul', this).hide(); bgneal@312: } bgneal@312: ).appendTo(ul); bgneal@312: if (button.dropMenu) { bgneal@312: levels.push(i); bgneal@312: $(li).addClass('markItUpDropMenu').append(dropMenus(button.dropMenu)); bgneal@312: } bgneal@312: } bgneal@312: }); bgneal@312: levels.pop(); bgneal@312: return ul; bgneal@312: } bgneal@312: bgneal@312: // markItUp! markups bgneal@312: function magicMarkups(string) { bgneal@312: if (string) { bgneal@312: string = string.toString(); bgneal@312: string = string.replace(/\(\!\(([\s\S]*?)\)\!\)/g, bgneal@312: function(x, a) { bgneal@312: var b = a.split('|!|'); bgneal@312: if (altKey === true) { bgneal@312: return (b[1] !== undefined) ? b[1] : b[0]; bgneal@312: } else { bgneal@312: return (b[1] === undefined) ? "" : b[0]; bgneal@312: } bgneal@312: } bgneal@312: ); bgneal@312: // [![prompt]!], [![prompt:!:value]!] bgneal@312: string = string.replace(/\[\!\[([\s\S]*?)\]\!\]/g, bgneal@312: function(x, a) { bgneal@312: var b = a.split(':!:'); bgneal@312: if (abort === true) { bgneal@312: return false; bgneal@312: } bgneal@312: value = prompt(b[0], (b[1]) ? b[1] : ''); bgneal@312: if (value === null) { bgneal@312: abort = true; bgneal@312: } bgneal@312: return value; bgneal@312: } bgneal@312: ); bgneal@312: return string; bgneal@312: } bgneal@312: return ""; bgneal@312: } bgneal@312: bgneal@312: // prepare action bgneal@312: function prepare(action) { bgneal@312: if ($.isFunction(action)) { bgneal@312: action = action(hash); bgneal@312: } bgneal@312: return magicMarkups(action); bgneal@312: } bgneal@312: bgneal@312: // build block to insert bgneal@312: function build(string) { bgneal@312: openWith = prepare(clicked.openWith); bgneal@312: placeHolder = prepare(clicked.placeHolder); bgneal@312: replaceWith = prepare(clicked.replaceWith); bgneal@312: closeWith = prepare(clicked.closeWith); bgneal@312: if (replaceWith !== "") { bgneal@312: block = openWith + replaceWith + closeWith; bgneal@312: } else if (selection === '' && placeHolder !== '') { bgneal@312: block = openWith + placeHolder + closeWith; bgneal@312: } else { bgneal@312: block = openWith + (string||selection) + closeWith; bgneal@312: } bgneal@312: return { block:block, bgneal@312: openWith:openWith, bgneal@312: replaceWith:replaceWith, bgneal@312: placeHolder:placeHolder, bgneal@312: closeWith:closeWith bgneal@312: }; bgneal@312: } bgneal@312: bgneal@312: // define markup to insert bgneal@312: function markup(button) { bgneal@312: var len, j, n, i; bgneal@312: hash = clicked = button; bgneal@312: get(); bgneal@312: bgneal@312: $.extend(hash, { line:"", bgneal@312: root:options.root, bgneal@312: textarea:textarea, bgneal@312: selection:(selection||''), bgneal@312: caretPosition:caretPosition, bgneal@312: ctrlKey:ctrlKey, bgneal@312: shiftKey:shiftKey, bgneal@312: altKey:altKey bgneal@312: } bgneal@312: ); bgneal@312: // callbacks before insertion bgneal@312: prepare(options.beforeInsert); bgneal@312: prepare(clicked.beforeInsert); bgneal@312: if (ctrlKey === true && shiftKey === true) { bgneal@312: prepare(clicked.beforeMultiInsert); bgneal@312: } bgneal@312: $.extend(hash, { line:1 }); bgneal@312: bgneal@312: if (ctrlKey === true && shiftKey === true) { bgneal@312: lines = selection.split(/\r?\n/); bgneal@312: for (j = 0, n = lines.length, i = 0; i < n; i++) { bgneal@312: if ($.trim(lines[i]) !== '') { bgneal@312: $.extend(hash, { line:++j, selection:lines[i] } ); bgneal@312: lines[i] = build(lines[i]).block; bgneal@312: } else { bgneal@312: lines[i] = ""; bgneal@312: } bgneal@312: } bgneal@312: string = { block:lines.join('\n')}; bgneal@312: start = caretPosition; bgneal@312: len = string.block.length + (($.browser.opera) ? n-1 : 0); bgneal@312: } else if (ctrlKey === true) { bgneal@312: string = build(selection); bgneal@312: start = caretPosition + string.openWith.length; bgneal@312: len = string.block.length - string.openWith.length - string.closeWith.length; bgneal@312: len -= fixIeBug(string.block); bgneal@312: } else if (shiftKey === true) { bgneal@312: string = build(selection); bgneal@312: start = caretPosition; bgneal@312: len = string.block.length; bgneal@312: len -= fixIeBug(string.block); bgneal@312: } else { bgneal@312: string = build(selection); bgneal@312: start = caretPosition + string.block.length ; bgneal@312: len = 0; bgneal@312: start -= fixIeBug(string.block); bgneal@312: } bgneal@312: if ((selection === '' && string.replaceWith === '')) { bgneal@312: caretOffset += fixOperaBug(string.block); bgneal@312: bgneal@312: start = caretPosition + string.openWith.length; bgneal@312: len = string.block.length - string.openWith.length - string.closeWith.length; bgneal@312: bgneal@312: caretOffset = $$.val().substring(caretPosition, $$.val().length).length; bgneal@312: caretOffset -= fixOperaBug($$.val().substring(0, caretPosition)); bgneal@312: } bgneal@312: $.extend(hash, { caretPosition:caretPosition, scrollPosition:scrollPosition } ); bgneal@312: bgneal@312: if (string.block !== selection && abort === false) { bgneal@312: insert(string.block); bgneal@312: set(start, len); bgneal@312: } else { bgneal@312: caretOffset = -1; bgneal@312: } bgneal@312: get(); bgneal@312: bgneal@312: $.extend(hash, { line:'', selection:selection }); bgneal@312: bgneal@312: // callbacks after insertion bgneal@312: if (ctrlKey === true && shiftKey === true) { bgneal@312: prepare(clicked.afterMultiInsert); bgneal@312: } bgneal@312: prepare(clicked.afterInsert); bgneal@312: prepare(options.afterInsert); bgneal@312: bgneal@312: // refresh preview if opened bgneal@312: if (previewWindow && options.previewAutoRefresh) { bgneal@312: refreshPreview(); bgneal@312: } bgneal@312: bgneal@312: // reinit keyevent bgneal@312: shiftKey = altKey = ctrlKey = abort = false; bgneal@312: } bgneal@312: bgneal@312: // Substract linefeed in Opera bgneal@312: function fixOperaBug(string) { bgneal@312: if ($.browser.opera) { bgneal@312: return string.length - string.replace(/\n*/g, '').length; bgneal@312: } bgneal@312: return 0; bgneal@312: } bgneal@312: // Substract linefeed in IE bgneal@312: function fixIeBug(string) { bgneal@312: if ($.browser.msie) { bgneal@312: return string.length - string.replace(/\r*/g, '').length; bgneal@312: } bgneal@312: return 0; bgneal@312: } bgneal@312: bgneal@312: // add markup bgneal@312: function insert(block) { bgneal@312: if (document.selection) { bgneal@312: var newSelection = document.selection.createRange(); bgneal@312: newSelection.text = block; bgneal@312: } else { bgneal@312: textarea.value = textarea.value.substring(0, caretPosition) + block + textarea.value.substring(caretPosition + selection.length, textarea.value.length); bgneal@312: } bgneal@312: } bgneal@312: bgneal@312: // set a selection bgneal@312: function set(start, len) { bgneal@312: if (textarea.createTextRange){ bgneal@312: // quick fix to make it work on Opera 9.5 bgneal@312: if ($.browser.opera && $.browser.version >= 9.5 && len == 0) { bgneal@312: return false; bgneal@312: } bgneal@312: range = textarea.createTextRange(); bgneal@312: range.collapse(true); bgneal@312: range.moveStart('character', start); bgneal@312: range.moveEnd('character', len); bgneal@312: range.select(); bgneal@312: } else if (textarea.setSelectionRange ){ bgneal@312: textarea.setSelectionRange(start, start + len); bgneal@312: } bgneal@312: textarea.scrollTop = scrollPosition; bgneal@312: textarea.focus(); bgneal@312: } bgneal@312: bgneal@312: // get the selection bgneal@312: function get() { bgneal@312: textarea.focus(); bgneal@312: bgneal@312: scrollPosition = textarea.scrollTop; bgneal@312: if (document.selection) { bgneal@312: selection = document.selection.createRange().text; bgneal@312: if ($.browser.msie) { // ie bgneal@312: var range = document.selection.createRange(), rangeCopy = range.duplicate(); bgneal@312: rangeCopy.moveToElementText(textarea); bgneal@312: caretPosition = -1; bgneal@312: while(rangeCopy.inRange(range)) { bgneal@312: rangeCopy.moveStart('character'); bgneal@312: caretPosition ++; bgneal@312: } bgneal@312: } else { // opera bgneal@312: caretPosition = textarea.selectionStart; bgneal@312: } bgneal@312: } else { // gecko & webkit bgneal@312: caretPosition = textarea.selectionStart; bgneal@312: selection = textarea.value.substring(caretPosition, textarea.selectionEnd); bgneal@312: } bgneal@312: return selection; bgneal@312: } bgneal@312: bgneal@312: // open preview window bgneal@312: function preview() { bgneal@312: if (!previewWindow || previewWindow.closed) { bgneal@312: if (options.previewInWindow) { bgneal@312: previewWindow = window.open('', 'preview', options.previewInWindow); bgneal@312: $(window).unload(function() { bgneal@312: previewWindow.close(); bgneal@312: }); bgneal@312: } else { bgneal@312: iFrame = $(''); bgneal@312: if (options.previewPosition == 'after') { bgneal@312: iFrame.insertAfter(footer); bgneal@312: } else { bgneal@312: iFrame.insertBefore(header); bgneal@312: } bgneal@312: previewWindow = iFrame[iFrame.length - 1].contentWindow || frame[iFrame.length - 1]; bgneal@312: } bgneal@312: } else if (altKey === true) { bgneal@312: if (iFrame) { bgneal@312: iFrame.remove(); bgneal@312: } else { bgneal@312: previewWindow.close(); bgneal@312: } bgneal@312: previewWindow = iFrame = false; bgneal@312: } bgneal@312: if (!options.previewAutoRefresh) { bgneal@312: refreshPreview(); bgneal@312: } bgneal@312: if (options.previewInWindow) { bgneal@312: previewWindow.focus(); bgneal@312: } bgneal@312: } bgneal@312: bgneal@312: // refresh Preview window bgneal@312: function refreshPreview() { bgneal@312: renderPreview(); bgneal@312: } bgneal@312: bgneal@312: function renderPreview() { bgneal@312: var phtml; bgneal@312: if (options.previewParserPath !== '') { bgneal@312: $.ajax( { bgneal@312: type: 'POST', bgneal@312: url: options.previewParserPath, bgneal@312: data: options.previewParserVar+'='+encodeURIComponent($$.val()), bgneal@312: success: function(data) { bgneal@312: writeInPreview( localize(data, 1) ); bgneal@312: } bgneal@312: } ); bgneal@312: } else { bgneal@312: if (!template) { bgneal@312: $.ajax( { bgneal@312: url: options.previewTemplatePath, bgneal@312: success: function(data) { bgneal@312: writeInPreview( localize(data, 1).replace(//g, $$.val()) ); bgneal@312: } bgneal@312: } ); bgneal@312: } bgneal@312: } bgneal@312: return false; bgneal@312: } bgneal@312: bgneal@312: function writeInPreview(data) { bgneal@312: if (previewWindow.document) { bgneal@312: try { bgneal@312: sp = previewWindow.document.documentElement.scrollTop bgneal@312: } catch(e) { bgneal@312: sp = 0; bgneal@312: } bgneal@312: previewWindow.document.open(); bgneal@312: previewWindow.document.write(data); bgneal@312: previewWindow.document.close(); bgneal@312: previewWindow.document.documentElement.scrollTop = sp; bgneal@312: } bgneal@312: } bgneal@312: bgneal@312: // set keys pressed bgneal@312: function keyPressed(e) { bgneal@312: shiftKey = e.shiftKey; bgneal@312: altKey = e.altKey; bgneal@312: ctrlKey = (!(e.altKey && e.ctrlKey)) ? e.ctrlKey : false; bgneal@312: bgneal@312: if (e.type === 'keydown') { bgneal@312: if (ctrlKey === true) { bgneal@312: li = $("a[accesskey="+String.fromCharCode(e.keyCode)+"]", header).parent('li'); bgneal@312: if (li.length !== 0) { bgneal@312: ctrlKey = false; bgneal@312: setTimeout(function() { bgneal@312: li.triggerHandler('mousedown'); bgneal@312: },1); bgneal@312: return false; bgneal@312: } bgneal@312: } bgneal@312: if (e.keyCode === 13 || e.keyCode === 10) { // Enter key bgneal@312: if (ctrlKey === true) { // Enter + Ctrl bgneal@312: ctrlKey = false; bgneal@312: markup(options.onCtrlEnter); bgneal@312: return options.onCtrlEnter.keepDefault; bgneal@312: } else if (shiftKey === true) { // Enter + Shift bgneal@312: shiftKey = false; bgneal@312: markup(options.onShiftEnter); bgneal@312: return options.onShiftEnter.keepDefault; bgneal@312: } else { // only Enter bgneal@312: markup(options.onEnter); bgneal@312: return options.onEnter.keepDefault; bgneal@312: } bgneal@312: } bgneal@312: if (e.keyCode === 9) { // Tab key bgneal@312: if (shiftKey == true || ctrlKey == true || altKey == true) { bgneal@312: return false; bgneal@312: } bgneal@312: if (caretOffset !== -1) { bgneal@312: get(); bgneal@312: caretOffset = $$.val().length - caretOffset; bgneal@312: set(caretOffset, 0); bgneal@312: caretOffset = -1; bgneal@312: return false; bgneal@312: } else { bgneal@312: markup(options.onTab); bgneal@312: return options.onTab.keepDefault; bgneal@312: } bgneal@312: } bgneal@312: } bgneal@312: } bgneal@312: bgneal@312: init(); bgneal@312: }); bgneal@312: }; bgneal@312: bgneal@312: $.fn.markItUpRemove = function() { bgneal@312: return this.each(function() { bgneal@312: var $$ = $(this).unbind().removeClass('markItUpEditor'); bgneal@312: $$.parent('div').parent('div.markItUp').parent('div').replaceWith($$); bgneal@312: } bgneal@312: ); bgneal@312: }; bgneal@312: bgneal@312: $.markItUp = function(settings) { bgneal@312: var options = { target:false }; bgneal@312: $.extend(options, settings); bgneal@312: if (options.target) { bgneal@312: return $(options.target).each(function() { bgneal@312: $(this).focus(); bgneal@312: $(this).trigger('insertion', [options]); bgneal@312: }); bgneal@312: } else { bgneal@312: $('textarea').trigger('insertion', [options]); bgneal@312: } bgneal@312: }; bgneal@312: })(jQuery);