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