').css({ position: 'absolute', left: '-9999px', top: '-9999px', fontSize: '200px' }).text('mmmmmmmmmwwwwwww').appendTo(document.body); var originalWidth = $tester.css('fontFamily', testFontName).width(); var width = $tester.css('fontFamily', fontName + ',' + testFontName).width(); $tester.remove(); return originalWidth !== width; }; /** * Object which check platform and agent */ var agent = { isMac: navigator.appVersion.indexOf('Mac') > -1, isMSIE: navigator.userAgent.indexOf('MSIE') > -1 || navigator.userAgent.indexOf('Trident') > -1, isFF: navigator.userAgent.indexOf('Firefox') > -1, jqueryVersion: parseFloat($.fn.jquery), isSupportAmd: isSupportAmd, hasCodeMirror: isSupportAmd ? require.specified('CodeMirror') : !!window.CodeMirror, isFontInstalled: isFontInstalled, isW3CRangeSupport: !!document.createRange }; /** * func utils (for high-order func's arg) */ var func = (function () { var eq = function (itemA) { return function (itemB) { return itemA === itemB; }; }; var eq2 = function (itemA, itemB) { return itemA === itemB; }; var ok = function () { return true; }; var fail = function () { return false; }; var not = function (f) { return function () { return !f.apply(f, arguments); }; }; var and = function (fA, fB) { return function (item) { return fA(item) && fB(item); }; }; var self = function (a) { return a; }; var idCounter = 0; /** * generate a globally-unique id * * @param {String} [prefix] */ var uniqueId = function (prefix) { var id = ++idCounter + ''; return prefix ? prefix + id : id; }; /** * returns bnd (bounds) from rect * * - IE Compatability Issue: http://goo.gl/sRLOAo * - Scroll Issue: http://goo.gl/sNjUc * * @param {Rect} rect * @return {Object} bounds * @return {Number} bounds.top * @return {Number} bounds.left * @return {Number} bounds.width * @return {Number} bounds.height */ var rect2bnd = function (rect) { var $document = $(document); return { top: rect.top + $document.scrollTop(), left: rect.left + $document.scrollLeft(), width: rect.right - rect.left, height: rect.bottom - rect.top }; }; /** * returns a copy of the object where the keys have become the values and the values the keys. * @param {Object} obj * @return {Object} */ var invertObject = function (obj) { var inverted = {}; for (var key in obj) { if (obj.hasOwnProperty(key)) { inverted[obj[key]] = key; } } return inverted; }; return { eq: eq, eq2: eq2, ok: ok, fail: fail, self: self, not: not, and: and, uniqueId: uniqueId, rect2bnd: rect2bnd, invertObject: invertObject }; })(); /** * list utils */ var list = (function () { /** * returns the first element of an array. * @param {Array} array */ var head = function (array) { return array[0]; }; /** * returns the last element of an array. * @param {Array} array */ var last = function (array) { return array[array.length - 1]; }; /** * returns everything but the last entry of the array. * @param {Array} array */ var initial = function (array) { return array.slice(0, array.length - 1); }; /** * returns the rest of the elements in an array. * @param {Array} array */ var tail = function (array) { return array.slice(1); }; /** * returns next item. * @param {Array} array */ var next = function (array, item) { var idx = array.indexOf(item); if (idx === -1) { return null; } return array[idx + 1]; }; /** * returns prev item. * @param {Array} array */ var prev = function (array, item) { var idx = array.indexOf(item); if (idx === -1) { return null; } return array[idx - 1]; }; var all = function (array, pred) { for (var idx = 0, len = array.length; idx < len; idx ++) { if (!pred(array[idx])) { return false; } } return true; }; var contains = function (array, item) { return array.indexOf(item) !== -1; }; /** * get sum from a list * @param {Array} array - array * @param {Function} fn - iterator */ var sum = function (array, fn) { fn = fn || func.self; return array.reduce(function (memo, v) { return memo + fn(v); }, 0); }; /** * returns a copy of the collection with array type. * @param {Collection} collection - collection eg) node.childNodes, ... */ var from = function (collection) { var result = [], idx = -1, length = collection.length; while (++idx < length) { result[idx] = collection[idx]; } return result; }; /** * cluster elements by predicate function. * @param {Array} array - array * @param {Function} fn - predicate function for cluster rule * @param {Array[]} */ var clusterBy = function (array, fn) { if (!array.length) { return []; } var aTail = tail(array); return aTail.reduce(function (memo, v) { var aLast = last(memo); if (fn(last(aLast), v)) { aLast[aLast.length] = v; } else { memo[memo.length] = [v]; } return memo; }, [[head(array)]]); }; /** * returns a copy of the array with all falsy values removed * @param {Array} array - array * @param {Function} fn - predicate function for cluster rule */ var compact = function (array) { var aResult = []; for (var idx = 0, len = array.length; idx < len; idx ++) { if (array[idx]) { aResult.push(array[idx]); } } return aResult; }; var unique = function (array) { var results = []; for (var idx = 0, len = array.length; idx < len; idx ++) { if (results.indexOf(array[idx]) === -1) { results.push(array[idx]); } } return results; }; return { head: head, last: last, initial: initial, tail: tail, prev: prev, next: next, contains: contains, all: all, sum: sum, from: from, clusterBy: clusterBy, compact: compact, unique: unique }; })(); var NBSP_CHAR = String.fromCharCode(160); var ZERO_WIDTH_NBSP_CHAR = '\ufeff'; /** * Dom functions */ var dom = (function () { /** * returns whether node is `note-editable` or not. * * @param {Node} node * @return {Boolean} */ var isEditable = function (node) { return node && $(node).hasClass('note-editable'); }; /** * returns whether node is `note-control-sizing` or not. * * @param {Node} node * @return {Boolean} */ var isControlSizing = function (node) { return node && $(node).hasClass('note-control-sizing'); }; /** * build layoutInfo from $editor(.note-editor) * * @param {jQuery} $editor * @return {Object} */ var buildLayoutInfo = function ($editor) { var makeFinder; // air mode if ($editor.hasClass('note-air-editor')) { var id = list.last($editor.attr('id').split('-')); makeFinder = function (sIdPrefix) { return function () { return $(sIdPrefix + id); }; }; return { editor: function () { return $editor; }, editable: function () { return $editor; }, popover: makeFinder('#note-popover-'), handle: makeFinder('#note-handle-'), dialog: makeFinder('#note-dialog-') }; // frame mode } else { makeFinder = function (sClassName) { return function () { return $editor.find(sClassName); }; }; return { editor: function () { return $editor; }, dropzone: makeFinder('.note-dropzone'), toolbar: makeFinder('.note-toolbar'), editable: makeFinder('.note-editable'), codable: makeFinder('.note-codable'), statusbar: makeFinder('.note-statusbar'), popover: makeFinder('.note-popover'), handle: makeFinder('.note-handle'), dialog: makeFinder('.note-dialog') }; } }; /** * returns predicate which judge whether nodeName is same * @param {String} sNodeName */ var makePredByNodeName = function (sNodeName) { sNodeName = sNodeName.toUpperCase(); return function (node) { return node && node.nodeName.toUpperCase() === sNodeName; }; }; var isText = function (node) { return node && node.nodeType === 3; }; /** * ex) br, col, embed, hr, img, input, ... * @see http://www.w3.org/html/wg/drafts/html/master/syntax.html#void-elements */ var isVoid = function (node) { return node && /^BR|^IMG|^HR/.test(node.nodeName.toUpperCase()); }; var isPara = function (node) { if (isEditable(node)) { return false; } // Chrome(v31.0), FF(v25.0.1) use DIV for paragraph return node && /^DIV|^P|^LI|^H[1-7]/.test(node.nodeName.toUpperCase()); }; var isInline = function (node) { return !isBodyContainer(node) && !isList(node) && !isPara(node); }; var isList = function (node) { return node && /^UL|^OL/.test(node.nodeName.toUpperCase()); }; var isCell = function (node) { return node && /^TD|^TH/.test(node.nodeName.toUpperCase()); }; var isBlockquote = makePredByNodeName('BLOCKQUOTE'); var isBodyContainer = function (node) { return isCell(node) || isBlockquote(node) || isEditable(node); }; var isAnchor = makePredByNodeName('A'); var isParaInline = function (node) { return isInline(node) && !!ancestor(node, isPara); }; var isBodyInline = function (node) { return isInline(node) && !ancestor(node, isPara); }; /** * blank HTML for cursor position */ var blankHTML = agent.isMSIE ? ' ' : '
'; /** * returns #text's text size or element's childNodes size * * @param {Node} node */ var nodeLength = function (node) { if (isText(node)) { return node.nodeValue.length; } return node.childNodes.length; }; /** * returns whether node is empty or not. * * @param {Node} node * @return {Boolean} */ var isEmpty = function (node) { var len = nodeLength(node); if (len === 0) { return true; } else if (!dom.isText(node) && len === 1 && node.innerHTML === blankHTML) { // ex)

,
return true; } return false; }; /** * padding blankHTML if node is empty (for cursor position) */ var paddingBlankHTML = function (node) { if (!isVoid(node) && !nodeLength(node)) { node.innerHTML = blankHTML; } }; /** * find nearest ancestor predicate hit * * @param {Node} node * @param {Function} pred - predicate function */ var ancestor = function (node, pred) { while (node) { if (pred(node)) { return node; } if (isEditable(node)) { break; } node = node.parentNode; } return null; }; /** * returns new array of ancestor nodes (until predicate hit). * * @param {Node} node * @param {Function} [optional] pred - predicate function */ var listAncestor = function (node, pred) { pred = pred || func.fail; var ancestors = []; ancestor(node, function (el) { if (!isEditable(el)) { ancestors.push(el); } return pred(el); }); return ancestors; }; /** * returns common ancestor node between two nodes. * * @param {Node} nodeA * @param {Node} nodeB */ var commonAncestor = function (nodeA, nodeB) { var ancestors = listAncestor(nodeA); for (var n = nodeB; n; n = n.parentNode) { if ($.inArray(n, ancestors) > -1) { return n; } } return null; // difference document area }; /** * listing all previous siblings (until predicate hit). * * @param {Node} node * @param {Function} [optional] pred - predicate function */ var listPrev = function (node, pred) { pred = pred || func.fail; var nodes = []; while (node) { if (pred(node)) { break; } nodes.push(node); node = node.previousSibling; } return nodes; }; /** * listing next siblings (until predicate hit). * * @param {Node} node * @param {Function} [pred] - predicate function */ var listNext = function (node, pred) { pred = pred || func.fail; var nodes = []; while (node) { if (pred(node)) { break; } nodes.push(node); node = node.nextSibling; } return nodes; }; /** * listing descendant nodes * * @param {Node} node * @param {Function} [pred] - predicate function */ var listDescendant = function (node, pred) { var descendents = []; pred = pred || func.ok; // start DFS(depth first search) with node (function fnWalk(current) { if (node !== current && pred(current)) { descendents.push(current); } for (var idx = 0, len = current.childNodes.length; idx < len; idx++) { fnWalk(current.childNodes[idx]); } })(node); return descendents; }; /** * wrap node with new tag. * * @param {Node} node * @param {Node} tagName of wrapper * @return {Node} - wrapper */ var wrap = function (node, wrapperName) { var parent = node.parentNode; var wrapper = $('<' + wrapperName + '>')[0]; parent.insertBefore(wrapper, node); wrapper.appendChild(node); return wrapper; }; /** * insert node after preceding * * @param {Node} node * @param {Node} preceding - predicate function */ var insertAfter = function (node, preceding) { var next = preceding.nextSibling, parent = preceding.parentNode; if (next) { parent.insertBefore(node, next); } else { parent.appendChild(node); } return node; }; /** * append elements. * * @param {Node} node * @param {Collection} aChild */ var appendChildNodes = function (node, aChild) { $.each(aChild, function (idx, child) { node.appendChild(child); }); return node; }; /** * returns whether boundaryPoint is left edge or not. * * @param {BoundaryPoint} point * @return {Boolean} */ var isLeftEdgePoint = function (point) { return point.offset === 0; }; /** * returns whether boundaryPoint is right edge or not. * * @param {BoundaryPoint} point * @return {Boolean} */ var isRightEdgePoint = function (point) { return point.offset === nodeLength(point.node); }; /** * returns whether boundaryPoint is edge or not. * * @param {BoundaryPoint} point * @return {Boolean} */ var isEdgePoint = function (point) { return isLeftEdgePoint(point) || isRightEdgePoint(point); }; /** * returns whether node is right edge of ancestor or not. * * @param {Node} node * @param {Node} ancestor * @return {Boolean} */ var isRightEdgeOf = function (node, ancestor) { while (node && node !== ancestor) { if (position(node) !== nodeLength(node.parentNode) - 1) { return false; } node = node.parentNode; } return true; }; /** * returns offset from parent. * * @param {Node} node */ var position = function (node) { var offset = 0; while ((node = node.previousSibling)) { offset += 1; } return offset; }; var hasChildren = function (node) { return !!(node && node.childNodes && node.childNodes.length); }; /** * returns previous boundaryPoint * * @param {BoundaryPoint} point * @param {Boolean} isSkipInnerOffset * @return {BoundaryPoint} */ var prevPoint = function (point, isSkipInnerOffset) { var node, offset; if (point.offset === 0) { if (isEditable(point.node)) { return null; } node = point.node.parentNode; offset = position(point.node); } else if (hasChildren(point.node)) { node = point.node.childNodes[offset - 1]; offset = nodeLength(node); } else { node = point.node; offset = isSkipInnerOffset ? 0 : point.offset - 1; } return { node: node, offset: offset }; }; /** * returns next boundaryPoint * * @param {BoundaryPoint} point * @param {Boolean} isSkipInnerOffset * @return {BoundaryPoint} */ var nextPoint = function (point, isSkipInnerOffset) { var node, offset; if (nodeLength(point.node) === point.offset) { if (isEditable(point.node)) { return null; } node = point.node.parentNode; offset = position(point.node) + 1; } else if (hasChildren(point.node)) { node = point.node.childNodes[point.offset]; offset = 0; } else { node = point.node; offset = isSkipInnerOffset ? nodeLength(point.node) : point.offset + 1; } return { node: node, offset: offset }; }; /** * returns whether pointA and pointB is same or not. * * @param {BoundaryPoint} pointA * @param {BoundaryPoint} pointB * @return {Boolean} */ var isSamePoint = function (pointA, pointB) { return pointA.node === pointB.node && pointA.offset === pointB.offset; }; /** * returns whether point is visible (can set cursor) or not. * * @param {BoundaryPoint} point * @return {Boolean} */ var isVisiblePoint = function (point) { return isText(point.node) || !hasChildren(point.node) || isEmpty(point.node) || !isEdgePoint(point); }; /** * @param {BoundaryPoint} point * @param {Function} pred * @return {BoundaryPoint} */ var prevPointUntil = function (point, pred) { while (point) { if (pred(point)) { return point; } point = prevPoint(point); } return null; }; /** * @param {BoundaryPoint} point * @param {Function} pred * @return {BoundaryPoint} */ var nextPointUntil = function (point, pred) { while (point) { if (pred(point)) { return point; } point = nextPoint(point); } return null; }; /** * @param {BoundaryPoint} startPoint * @param {BoundaryPoint} endPoint * @param {Function} handler * @param {Boolean} isSkipInnerOffset */ var walkPoint = function (startPoint, endPoint, handler, isSkipInnerOffset) { var point = startPoint; while (point) { handler(point); if (isSamePoint(point, endPoint)) { break; } var isSkipOffset = isSkipInnerOffset && startPoint.node !== point.node; point = nextPoint(point, isSkipOffset); } }; /** * return offsetPath(array of offset) from ancestor * * @param {Node} ancestor - ancestor node * @param {Node} node */ var makeOffsetPath = function (ancestor, node) { var ancestors = list.initial(listAncestor(node, func.eq(ancestor))); return $.map(ancestors, position).reverse(); }; /** * return element from offsetPath(array of offset) * * @param {Node} ancestor - ancestor node * @param {array} aOffset - offsetPath */ var fromOffsetPath = function (ancestor, aOffset) { var current = ancestor; for (var i = 0, len = aOffset.length; i < len; i++) { current = current.childNodes[aOffset[i]]; } return current; }; /** * split element or #text * * @param {BoundaryPoint} point * @return {Node} right node of boundaryPoint */ var splitNode = function (point) { // split #text if (isText(point.node)) { // edge case if (isLeftEdgePoint(point)) { return point.node; } else if (isRightEdgePoint(point)) { return point.node.nextSibling; } return point.node.splitText(point.offset); } // split element var childNode = point.node.childNodes[point.offset]; var clone = insertAfter(point.node.cloneNode(false), point.node); appendChildNodes(clone, listNext(childNode)); paddingBlankHTML(point.node); paddingBlankHTML(clone); return clone; }; /** * split tree by point * * @param {Node} root - split root * @param {BoundaryPoint} point * @return {Node} right node of boundaryPoint */ var splitTree = function (root, point) { // ex) [#text, ,

] var ancestors = listAncestor(point.node, func.eq(root)); if (!ancestors.length) { return null; } else if (ancestors.length === 1) { return splitNode(point); } return ancestors.reduce(function (node, parent) { var clone = insertAfter(parent.cloneNode(false), parent); if (node === point.node) { node = splitNode(point); } appendChildNodes(clone, listNext(node)); paddingBlankHTML(parent); paddingBlankHTML(clone); return clone; }); }; var createText = function (text) { return document.createTextNode(text); }; /** * remove node, (isRemoveChild: remove child or not) * @param {Node} node * @param {Boolean} isRemoveChild */ var remove = function (node, isRemoveChild) { if (!node || !node.parentNode) { return; } if (node.removeNode) { return node.removeNode(isRemoveChild); } var parent = node.parentNode; if (!isRemoveChild) { var nodes = []; var i, len; for (i = 0, len = node.childNodes.length; i < len; i++) { nodes.push(node.childNodes[i]); } for (i = 0, len = nodes.length; i < len; i++) { parent.insertBefore(nodes[i], node); } } parent.removeChild(node); }; var isTextarea = makePredByNodeName('TEXTAREA'); /** * get the HTML contents of node * * @param {jQuery} $node * @param {Boolean} [isNewlineOnBlock] */ var html = function ($node, isNewlineOnBlock) { var markup = isTextarea($node[0]) ? $node.val() : $node.html(); if (isNewlineOnBlock) { var regexTag = /<(\/?)(\b(?!!)[^>\s]*)(.*?)(\s*\/?>)/g; markup = markup.replace(regexTag, function (match, endSlash, name) { name = name.toUpperCase(); var isEndOfInlineContainer = /^DIV|^TD|^TH|^P|^LI|^H[1-7]/.test(name) && !!endSlash; var isBlockNode = /^TABLE|^TBODY|^TR|^HR|^UL/.test(name); return match + ((isEndOfInlineContainer || isBlockNode) ? '\n' : ''); }); markup = $.trim(markup); } return markup; }; var value = function ($textarea) { var val = $textarea.val(); // strip line breaks return val.replace(/[\n\r]/g, ''); }; return { NBSP_CHAR: NBSP_CHAR, ZERO_WIDTH_NBSP_CHAR: ZERO_WIDTH_NBSP_CHAR, blank: blankHTML, emptyPara: '

' + blankHTML + '

', isEditable: isEditable, isControlSizing: isControlSizing, buildLayoutInfo: buildLayoutInfo, isText: isText, isPara: isPara, isInline: isInline, isBodyInline: isBodyInline, isParaInline: isParaInline, isList: isList, isTable: makePredByNodeName('TABLE'), isCell: isCell, isBlockquote: isBlockquote, isBodyContainer: isBodyContainer, isAnchor: isAnchor, isDiv: makePredByNodeName('DIV'), isLi: makePredByNodeName('LI'), isSpan: makePredByNodeName('SPAN'), isB: makePredByNodeName('B'), isU: makePredByNodeName('U'), isS: makePredByNodeName('S'), isI: makePredByNodeName('I'), isImg: makePredByNodeName('IMG'), isTextarea: isTextarea, isEmpty: isEmpty, isEmptyAnchor: func.and(isAnchor, isEmpty), nodeLength: nodeLength, isLeftEdgePoint: isLeftEdgePoint, isRightEdgePoint: isRightEdgePoint, isEdgePoint: isEdgePoint, isRightEdgeOf: isRightEdgeOf, prevPoint: prevPoint, nextPoint: nextPoint, isSamePoint: isSamePoint, isVisiblePoint: isVisiblePoint, prevPointUntil: prevPointUntil, nextPointUntil: nextPointUntil, walkPoint: walkPoint, ancestor: ancestor, listAncestor: listAncestor, listNext: listNext, listPrev: listPrev, listDescendant: listDescendant, commonAncestor: commonAncestor, wrap: wrap, insertAfter: insertAfter, appendChildNodes: appendChildNodes, position: position, hasChildren: hasChildren, makeOffsetPath: makeOffsetPath, fromOffsetPath: fromOffsetPath, splitTree: splitTree, createText: createText, remove: remove, html: html, value: value }; })(); var settings = { // version version: '0.5.8', /** * options */ options: { width: null, // set editor width height: null, // set editor height, ex) 300 minHeight: null, // set minimum height of editor maxHeight: null, // set maximum height of editor focus: false, // set focus to editable area after initializing summernote tabsize: 4, // size of tab ex) 2 or 4 styleWithSpan: true, // style with span (Chrome and FF only) disableLinkTarget: false, // hide link Target Checkbox disableDragAndDrop: false, // disable drag and drop event disableResizeEditor: false, // disable resizing editor codemirror: { // codemirror options mode: 'text/html', htmlMode: true, lineNumbers: true }, // language lang: 'en-US', // language 'en-US', 'ko-KR', ... direction: null, // text direction, ex) 'rtl' // toolbar toolbar: [ ['style', ['style']], ['font', ['bold', 'italic', 'underline', 'superscript', 'subscript', 'strikethrough', 'clear']], ['fontname', ['fontname']], // ['fontsize', ['fontsize']], // Still buggy ['color', ['color']], ['para', ['ul', 'ol', 'paragraph']], ['height', ['height']], ['table', ['table']], ['insert', ['link', 'picture', 'video', 'hr']], ['view', ['fullscreen', 'codeview']], ['help', ['help']] ], // air mode: inline editor airMode: false, // airPopover: [ // ['style', ['style']], // ['font', ['bold', 'italic', 'underline', 'clear']], // ['fontname', ['fontname']], // ['fontsize', ['fontsize']], // Still buggy // ['color', ['color']], // ['para', ['ul', 'ol', 'paragraph']], // ['height', ['height']], // ['table', ['table']], // ['insert', ['link', 'picture', 'video']], // ['help', ['help']] // ], airPopover: [ ['color', ['color']], ['font', ['bold', 'underline', 'clear']], ['para', ['ul', 'paragraph']], ['table', ['table']], ['insert', ['link', 'picture']] ], // style tag styleTags: ['p', 'blockquote', 'pre', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'], // default fontName defaultFontName: 'Helvetica Neue', // fontName fontNames: [ 'Arial', 'Arial Black', 'Comic Sans MS', 'Courier New', 'Helvetica Neue', 'Impact', 'Lucida Grande', 'Tahoma', 'Times New Roman', 'Verdana' ], // pallete colors(n x n) colors: [ ['#000000', '#424242', '#636363', '#9C9C94', '#CEC6CE', '#EFEFEF', '#F7F7F7', '#FFFFFF'], ['#FF0000', '#FF9C00', '#FFFF00', '#00FF00', '#00FFFF', '#0000FF', '#9C00FF', '#FF00FF'], ['#F7C6CE', '#FFE7CE', '#FFEFC6', '#D6EFD6', '#CEDEE7', '#CEE7F7', '#D6D6E7', '#E7D6DE'], ['#E79C9C', '#FFC69C', '#FFE79C', '#B5D6A5', '#A5C6CE', '#9CC6EF', '#B5A5D6', '#D6A5BD'], ['#E76363', '#F7AD6B', '#FFD663', '#94BD7B', '#73A5AD', '#6BADDE', '#8C7BC6', '#C67BA5'], ['#CE0000', '#E79439', '#EFC631', '#6BA54A', '#4A7B8C', '#3984C6', '#634AA5', '#A54A7B'], ['#9C0000', '#B56308', '#BD9400', '#397B21', '#104A5A', '#085294', '#311873', '#731842'], ['#630000', '#7B3900', '#846300', '#295218', '#083139', '#003163', '#21104A', '#4A1031'] ], // fontSize fontSizes: ['8', '9', '10', '11', '12', '14', '18', '24', '36'], // lineHeight lineHeights: ['1.0', '1.2', '1.4', '1.5', '1.6', '1.8', '2.0', '3.0'], // insertTable max size insertTableMaxSize: { col: 10, row: 10 }, // callbacks oninit: null, // initialize onfocus: null, // editable has focus onblur: null, // editable out of focus onenter: null, // enter key pressed onkeyup: null, // keyup onkeydown: null, // keydown onImageUpload: null, // imageUpload onImageUploadError: null, // imageUploadError onToolbarClick: null, /** * manipulate link address when user create link * @param {String} sLinkUrl * @return {String} */ onCreateLink: function (sLinkUrl) { if (sLinkUrl.indexOf('@') !== -1 && sLinkUrl.indexOf(':') === -1) { sLinkUrl = 'mailto:' + sLinkUrl; } else if (sLinkUrl.indexOf('://') === -1) { sLinkUrl = 'http://' + sLinkUrl; } return sLinkUrl; }, keyMap: { pc: { 'ENTER': 'insertParagraph', 'CTRL+Z': 'undo', 'CTRL+Y': 'redo', 'TAB': 'tab', 'SHIFT+TAB': 'untab', 'CTRL+B': 'bold', 'CTRL+I': 'italic', 'CTRL+U': 'underline', 'CTRL+SHIFT+S': 'strikethrough', 'CTRL+BACKSLASH': 'removeFormat', 'CTRL+SHIFT+L': 'justifyLeft', 'CTRL+SHIFT+E': 'justifyCenter', 'CTRL+SHIFT+R': 'justifyRight', 'CTRL+SHIFT+J': 'justifyFull', 'CTRL+SHIFT+NUM7': 'insertUnorderedList', 'CTRL+SHIFT+NUM8': 'insertOrderedList', 'CTRL+LEFTBRACKET': 'outdent', 'CTRL+RIGHTBRACKET': 'indent', 'CTRL+NUM0': 'formatPara', 'CTRL+NUM1': 'formatH1', 'CTRL+NUM2': 'formatH2', 'CTRL+NUM3': 'formatH3', 'CTRL+NUM4': 'formatH4', 'CTRL+NUM5': 'formatH5', 'CTRL+NUM6': 'formatH6', 'CTRL+ENTER': 'insertHorizontalRule', 'CTRL+K': 'showLinkDialog' }, mac: { 'ENTER': 'insertParagraph', 'CMD+Z': 'undo', 'CMD+SHIFT+Z': 'redo', 'TAB': 'tab', 'SHIFT+TAB': 'untab', 'CMD+B': 'bold', 'CMD+I': 'italic', 'CMD+U': 'underline', 'CMD+SHIFT+S': 'strikethrough', 'CMD+BACKSLASH': 'removeFormat', 'CMD+SHIFT+L': 'justifyLeft', 'CMD+SHIFT+E': 'justifyCenter', 'CMD+SHIFT+R': 'justifyRight', 'CMD+SHIFT+J': 'justifyFull', 'CMD+SHIFT+NUM7': 'insertUnorderedList', 'CMD+SHIFT+NUM8': 'insertOrderedList', 'CMD+LEFTBRACKET': 'outdent', 'CMD+RIGHTBRACKET': 'indent', 'CMD+NUM0': 'formatPara', 'CMD+NUM1': 'formatH1', 'CMD+NUM2': 'formatH2', 'CMD+NUM3': 'formatH3', 'CMD+NUM4': 'formatH4', 'CMD+NUM5': 'formatH5', 'CMD+NUM6': 'formatH6', 'CMD+ENTER': 'insertHorizontalRule', 'CMD+K': 'showLinkDialog' } } }, // default language: en-US lang: { 'en-US': { font: { bold: 'Bold', italic: 'Italic', underline: 'Underline', strikethrough: 'Strikethrough', subscript: 'Subscript', superscript: 'Superscript', clear: 'Remove Font Style', height: 'Line Height', name: 'Font Family', size: 'Font Size' }, image: { image: 'Picture', insert: 'Insert Image', resizeFull: 'Resize Full', resizeHalf: 'Resize Half', resizeQuarter: 'Resize Quarter', floatLeft: 'Float Left', floatRight: 'Float Right', floatNone: 'Float None', dragImageHere: 'Drag an image here', selectFromFiles: 'Select from files', url: 'Image URL', remove: 'Remove Image' }, link: { link: 'Link', insert: 'Insert Link', unlink: 'Unlink', edit: 'Edit', textToDisplay: 'Text to display', url: 'To what URL should this link go?', openInNewWindow: 'Open in new window' }, video: { video: 'Video', videoLink: 'Video Link', insert: 'Insert Video', url: 'Video URL?', providers: '(YouTube, Vimeo, Vine, Instagram, DailyMotion or Youku)' }, table: { table: 'Table' }, hr: { insert: 'Insert Horizontal Rule' }, style: { style: 'Style', normal: 'Normal', blockquote: 'Quote', pre: 'Code', h1: 'Header 1', h2: 'Header 2', h3: 'Header 3', h4: 'Header 4', h5: 'Header 5', h6: 'Header 6' }, lists: { unordered: 'Unordered list', ordered: 'Ordered list' }, options: { help: 'Help', fullscreen: 'Full Screen', codeview: 'Code View' }, paragraph: { paragraph: 'Paragraph', outdent: 'Outdent', indent: 'Indent', left: 'Align left', center: 'Align center', right: 'Align right', justify: 'Justify full' }, color: { recent: 'Recent Color', more: 'More Color', background: 'Background Color', foreground: 'Foreground Color', transparent: 'Transparent', setTransparent: 'Set transparent', reset: 'Reset', resetToDefault: 'Reset to default' }, shortcut: { shortcuts: 'Keyboard shortcuts', close: 'Close', textFormatting: 'Text formatting', action: 'Action', paragraphFormatting: 'Paragraph formatting', documentStyle: 'Document Style' }, history: { undo: 'Undo', redo: 'Redo' } } } }; /** * Async functions which returns `Promise` */ var async = (function () { /** * read contents of file as representing URL * * @param {File} file * @return {Promise} - then: sDataUrl */ var readFileAsDataURL = function (file) { return $.Deferred(function (deferred) { $.extend(new FileReader(), { onload: function (e) { var sDataURL = e.target.result; deferred.resolve(sDataURL); }, onerror: function () { deferred.reject(this); } }).readAsDataURL(file); }).promise(); }; /** * create `` from url string * * @param {String} sUrl * @return {Promise} - then: $image */ var createImage = function (sUrl, filename) { return $.Deferred(function (deferred) { $('').one('load', function () { deferred.resolve($(this)); }).one('error abort', function () { deferred.reject($(this)); }).css({ display: 'none' }).appendTo(document.body) .attr('src', sUrl) .attr('data-filename', filename); }).promise(); }; return { readFileAsDataURL: readFileAsDataURL, createImage: createImage }; })(); /** * Object for keycodes. */ var key = { isEdit: function (keyCode) { return [8, 9, 13, 32].indexOf(keyCode) !== -1; }, nameFromCode: { '8': 'BACKSPACE', '9': 'TAB', '13': 'ENTER', '32': 'SPACE', // Number: 0-9 '48': 'NUM0', '49': 'NUM1', '50': 'NUM2', '51': 'NUM3', '52': 'NUM4', '53': 'NUM5', '54': 'NUM6', '55': 'NUM7', '56': 'NUM8', // Alphabet: a-z '66': 'B', '69': 'E', '73': 'I', '74': 'J', '75': 'K', '76': 'L', '82': 'R', '83': 'S', '85': 'U', '89': 'Y', '90': 'Z', '191': 'SLASH', '219': 'LEFTBRACKET', '220': 'BACKSLASH', '221': 'RIGHTBRACKET' } }; /** * Style * @class */ var Style = function () { /** * passing an array of style properties to .css() * will result in an object of property-value pairs. * (compability with version < 1.9) * * @param {jQuery} $obj * @param {Array} propertyNames - An array of one or more CSS properties. * @returns {Object} */ var jQueryCSS = function ($obj, propertyNames) { if (agent.jqueryVersion < 1.9) { var result = {}; $.each(propertyNames, function (idx, propertyName) { result[propertyName] = $obj.css(propertyName); }); return result; } return $obj.css.call($obj, propertyNames); }; /** * paragraph level style * * @param {WrappedRange} rng * @param {Object} styleInfo */ this.stylePara = function (rng, styleInfo) { $.each(rng.nodes(dom.isPara, { includeAncestor: true }), function (idx, para) { $(para).css(styleInfo); }); }; /** * get current style on cursor * * @param {WrappedRange} rng * @param {Node} target - target element on event * @return {Object} - object contains style properties. */ this.current = function (rng, target) { var $cont = $(dom.isText(rng.sc) ? rng.sc.parentNode : rng.sc); var properties = ['font-family', 'font-size', 'text-align', 'list-style-type', 'line-height']; var styleInfo = jQueryCSS($cont, properties) || {}; styleInfo['font-size'] = parseInt(styleInfo['font-size'], 10); // document.queryCommandState for toggle state styleInfo['font-bold'] = document.queryCommandState('bold') ? 'bold' : 'normal'; styleInfo['font-italic'] = document.queryCommandState('italic') ? 'italic' : 'normal'; styleInfo['font-underline'] = document.queryCommandState('underline') ? 'underline' : 'normal'; styleInfo['font-strikethrough'] = document.queryCommandState('strikeThrough') ? 'strikethrough' : 'normal'; styleInfo['font-superscript'] = document.queryCommandState('superscript') ? 'superscript' : 'normal'; styleInfo['font-subscript'] = document.queryCommandState('subscript') ? 'subscript' : 'normal'; // list-style-type to list-style(unordered, ordered) if (!rng.isOnList()) { styleInfo['list-style'] = 'none'; } else { var aOrderedType = ['circle', 'disc', 'disc-leading-zero', 'square']; var isUnordered = $.inArray(styleInfo['list-style-type'], aOrderedType) > -1; styleInfo['list-style'] = isUnordered ? 'unordered' : 'ordered'; } var para = dom.ancestor(rng.sc, dom.isPara); if (para && para.style['line-height']) { styleInfo['line-height'] = para.style.lineHeight; } else { var lineHeight = parseInt(styleInfo['line-height'], 10) / parseInt(styleInfo['font-size'], 10); styleInfo['line-height'] = lineHeight.toFixed(1); } styleInfo.image = dom.isImg(target) && target; styleInfo.anchor = rng.isOnAnchor() && dom.ancestor(rng.sc, dom.isAnchor); styleInfo.ancestors = dom.listAncestor(rng.sc, dom.isEditable); styleInfo.range = rng; return styleInfo; }; }; /** * Data structure * - {BoundaryPoint}: a point of dom tree * - {BoundaryPoints}: two boundaryPoints corresponding to the start and the end of the Range * * @see http://www.w3.org/TR/DOM-Level-2-Traversal-Range/ranges.html#Level-2-Range-Position */ var range = (function () { /** * return boundaryPoint from TextRange, inspired by Andy Na's HuskyRange.js * * @param {TextRange} textRange * @param {Boolean} isStart * @return {BoundaryPoint} * * @see http://msdn.microsoft.com/en-us/library/ie/ms535872(v=vs.85).aspx */ var textRangeToPoint = function (textRange, isStart) { var container = textRange.parentElement(), offset; var tester = document.body.createTextRange(), prevContainer; var childNodes = list.from(container.childNodes); for (offset = 0; offset < childNodes.length; offset++) { if (dom.isText(childNodes[offset])) { continue; } tester.moveToElementText(childNodes[offset]); if (tester.compareEndPoints('StartToStart', textRange) >= 0) { break; } prevContainer = childNodes[offset]; } if (offset !== 0 && dom.isText(childNodes[offset - 1])) { var textRangeStart = document.body.createTextRange(), curTextNode = null; textRangeStart.moveToElementText(prevContainer || container); textRangeStart.collapse(!prevContainer); curTextNode = prevContainer ? prevContainer.nextSibling : container.firstChild; var pointTester = textRange.duplicate(); pointTester.setEndPoint('StartToStart', textRangeStart); var textCount = pointTester.text.replace(/[\r\n]/g, '').length; while (textCount > curTextNode.nodeValue.length && curTextNode.nextSibling) { textCount -= curTextNode.nodeValue.length; curTextNode = curTextNode.nextSibling; } /* jshint ignore:start */ var dummy = curTextNode.nodeValue; // enforce IE to re-reference curTextNode, hack /* jshint ignore:end */ if (isStart && curTextNode.nextSibling && dom.isText(curTextNode.nextSibling) && textCount === curTextNode.nodeValue.length) { textCount -= curTextNode.nodeValue.length; curTextNode = curTextNode.nextSibling; } container = curTextNode; offset = textCount; } return { cont: container, offset: offset }; }; /** * return TextRange from boundary point (inspired by google closure-library) * @param {BoundaryPoint} point * @return {TextRange} */ var pointToTextRange = function (point) { var textRangeInfo = function (container, offset) { var node, isCollapseToStart; if (dom.isText(container)) { var prevTextNodes = dom.listPrev(container, func.not(dom.isText)); var prevContainer = list.last(prevTextNodes).previousSibling; node = prevContainer || container.parentNode; offset += list.sum(list.tail(prevTextNodes), dom.nodeLength); isCollapseToStart = !prevContainer; } else { node = container.childNodes[offset] || container; if (dom.isText(node)) { return textRangeInfo(node, 0); } offset = 0; isCollapseToStart = false; } return { node: node, collapseToStart: isCollapseToStart, offset: offset }; }; var textRange = document.body.createTextRange(); var info = textRangeInfo(point.node, point.offset); textRange.moveToElementText(info.node); textRange.collapse(info.collapseToStart); textRange.moveStart('character', info.offset); return textRange; }; /** * Wrapped Range * * @param {Node} sc - start container * @param {Number} so - start offset * @param {Node} ec - end container * @param {Number} eo - end offset */ var WrappedRange = function (sc, so, ec, eo) { this.sc = sc; this.so = so; this.ec = ec; this.eo = eo; // nativeRange: get nativeRange from sc, so, ec, eo var nativeRange = function () { if (agent.isW3CRangeSupport) { var w3cRange = document.createRange(); w3cRange.setStart(sc, so); w3cRange.setEnd(ec, eo); return w3cRange; } else { var textRange = pointToTextRange({ node: sc, offset: so }); textRange.setEndPoint('EndToEnd', pointToTextRange({ node: ec, offset: eo })); return textRange; } }; this.getPoints = function () { return { sc: sc, so: so, ec: ec, eo: eo }; }; this.getStartPoint = function () { return { node: sc, offset: so }; }; this.getEndPoint = function () { return { node: ec, offset: eo }; }; /** * select update visible range */ this.select = function () { var nativeRng = nativeRange(); if (agent.isW3CRangeSupport) { var selection = document.getSelection(); if (selection.rangeCount > 0) { selection.removeAllRanges(); } selection.addRange(nativeRng); } else { nativeRng.select(); } }; /** * @return {WrappedRange} */ this.normalize = function () { var getVisiblePoint = function (point) { if (!dom.isVisiblePoint(point)) { if (dom.isLeftEdgePoint(point)) { point = dom.nextPointUntil(point, dom.isVisiblePoint); } else if (dom.isRightEdgePoint(point)) { point = dom.prevPointUntil(point, dom.isVisiblePoint); } } return point; }; var startPoint = getVisiblePoint(this.getStartPoint()); var endPoint = getVisiblePoint(this.getStartPoint()); return new WrappedRange( startPoint.node, startPoint.offset, endPoint.node, endPoint.offset ); }; /** * returns matched nodes on range * * @param {Function} [pred] - predicate function * @param {Object} [options] * @param {Boolean} [options.includeAncestor] * @param {Boolean} [options.fullyContains] * @return {Node[]} */ this.nodes = function (pred, options) { pred = pred || func.ok; var includeAncestor = options && options.includeAncestor; var fullyContains = options && options.fullyContains; // TODO compare points and sort var startPoint = this.getStartPoint(); var endPoint = this.getEndPoint(); var nodes = []; var leftEdgeNodes = []; dom.walkPoint(startPoint, endPoint, function (point) { if (dom.isEditable(point.node)) { return; } var node; if (fullyContains) { if (dom.isLeftEdgePoint(point)) { leftEdgeNodes.push(point.node); } if (dom.isRightEdgePoint(point) && list.contains(leftEdgeNodes, point.node)) { node = point.node; } } else if (includeAncestor) { node = dom.ancestor(point.node, pred); } else { node = point.node; } if (node && pred(node)) { nodes.push(node); } }, true); return list.unique(nodes); }; /** * returns commonAncestor of range * @return {Element} - commonAncestor */ this.commonAncestor = function () { return dom.commonAncestor(sc, ec); }; /** * returns expanded range by pred * * @param {Function} pred - predicate function * @return {WrappedRange} */ this.expand = function (pred) { var startAncestor = dom.ancestor(sc, pred); var endAncestor = dom.ancestor(ec, pred); if (!startAncestor && !endAncestor) { return new WrappedRange(sc, so, ec, eo); } var boundaryPoints = this.getPoints(); if (startAncestor) { boundaryPoints.sc = startAncestor; boundaryPoints.so = 0; } if (endAncestor) { boundaryPoints.ec = endAncestor; boundaryPoints.eo = dom.nodeLength(endAncestor); } return new WrappedRange( boundaryPoints.sc, boundaryPoints.so, boundaryPoints.ec, boundaryPoints.eo ); }; /** * @param {Boolean} isCollapseToStart * @return {WrappedRange} */ this.collapse = function (isCollapseToStart) { if (isCollapseToStart) { return new WrappedRange(sc, so, sc, so); } else { return new WrappedRange(ec, eo, ec, eo); } }; /** * splitText on range */ this.splitText = function () { var isSameContainer = sc === ec; var boundaryPoints = this.getPoints(); if (dom.isText(ec) && !dom.isEdgePoint(this.getEndPoint())) { ec.splitText(eo); } if (dom.isText(sc) && !dom.isEdgePoint(this.getStartPoint())) { boundaryPoints.sc = sc.splitText(so); boundaryPoints.so = 0; if (isSameContainer) { boundaryPoints.ec = boundaryPoints.sc; boundaryPoints.eo = eo - so; } } return new WrappedRange( boundaryPoints.sc, boundaryPoints.so, boundaryPoints.ec, boundaryPoints.eo ); }; /** * delete contents on range * @return {WrappedRange} */ this.deleteContents = function () { if (this.isCollapsed()) { return this; } var rng = this.splitText(); var nodes = rng.nodes(null, { fullyContains: true }); var point = dom.prevPointUntil(rng.getStartPoint(), function (point) { return !list.contains(nodes, point.node); }); var emptyParents = []; $.each(nodes, function (idx, node) { // find empty parents var parent = node.parentNode; if (point.node !== parent && dom.nodeLength(parent) === 1) { emptyParents.push(parent); } dom.remove(node, false); }); // remove empty parents $.each(emptyParents, function (idx, node) { dom.remove(node, false); }); return new WrappedRange( point.node, point.offset, point.node, point.offset ); }; /** * makeIsOn: return isOn(pred) function */ var makeIsOn = function (pred) { return function () { var ancestor = dom.ancestor(sc, pred); return !!ancestor && (ancestor === dom.ancestor(ec, pred)); }; }; // isOnEditable: judge whether range is on editable or not this.isOnEditable = makeIsOn(dom.isEditable); // isOnList: judge whether range is on list node or not this.isOnList = makeIsOn(dom.isList); // isOnAnchor: judge whether range is on anchor node or not this.isOnAnchor = makeIsOn(dom.isAnchor); // isOnAnchor: judge whether range is on cell node or not this.isOnCell = makeIsOn(dom.isCell); /** * returns whether range was collapsed or not */ this.isCollapsed = function () { return sc === ec && so === eo; }; /** * wrap inline nodes which children of body with paragraph * * @return {WrappedRange} */ this.wrapBodyInlineWithPara = function () { // startContainer on bodyContainer if (dom.isEditable(sc) && !sc.childNodes[so]) { return new WrappedRange(sc.appendChild($(dom.emptyPara)[0]), 0); } else if (!dom.isInline(sc) || dom.isParaInline(sc)) { return this; } // find inline top ancestor var ancestors = dom.listAncestor(sc, func.not(dom.isInline)); var topAncestor = list.last(ancestors); if (!dom.isInline(topAncestor)) { topAncestor = ancestors[ancestors.length - 2] || sc.childNodes[so]; } // siblings not in paragraph var inlineSiblings = dom.listPrev(topAncestor, dom.isParaInline).reverse(); inlineSiblings = inlineSiblings.concat(dom.listNext(topAncestor.nextSibling, dom.isParaInline)); // wrap with paragraph if (inlineSiblings.length) { var para = dom.wrap(list.head(inlineSiblings), 'p'); dom.appendChildNodes(para, list.tail(inlineSiblings)); } return this; }; /** * insert node at current cursor * * @param {Node} node * @param {Boolean} [isInline] * @return {Node} */ this.insertNode = function (node, isInline) { var rng = this.wrapBodyInlineWithPara(); var point = rng.getStartPoint(); var splitRoot, container, pivot; if (isInline) { container = dom.isPara(point.node) ? point.node : point.node.parentNode; if (dom.isPara(point.node)) { pivot = point.node.childNodes[point.offset]; } else { pivot = dom.splitTree(point.node, point); } } else { // splitRoot will be childNode of container var ancestors = dom.listAncestor(point.node, dom.isBodyContainer); var topAncestor = list.last(ancestors) || point.node; if (dom.isBodyContainer(topAncestor)) { splitRoot = ancestors[ancestors.length - 2]; container = topAncestor; } else { splitRoot = topAncestor; container = splitRoot.parentNode; } pivot = splitRoot && dom.splitTree(splitRoot, point); } if (pivot) { pivot.parentNode.insertBefore(node, pivot); } else { container.appendChild(node); } return node; }; this.toString = function () { var nativeRng = nativeRange(); return agent.isW3CRangeSupport ? nativeRng.toString() : nativeRng.text; }; /** * create offsetPath bookmark * @param {Node} editable */ this.bookmark = function (editable) { return { s: { path: dom.makeOffsetPath(editable, sc), offset: so }, e: { path: dom.makeOffsetPath(editable, ec), offset: eo } }; }; /** * getClientRects * @return {Rect[]} */ this.getClientRects = function () { var nativeRng = nativeRange(); return nativeRng.getClientRects(); }; }; return { /** * create Range Object From arguments or Browser Selection * * @param {Node} sc - start container * @param {Number} so - start offset * @param {Node} ec - end container * @param {Number} eo - end offset */ create : function (sc, so, ec, eo) { if (!arguments.length) { // from Browser Selection if (agent.isW3CRangeSupport) { var selection = document.getSelection(); if (selection.rangeCount === 0) { return null; } var nativeRng = selection.getRangeAt(0); sc = nativeRng.startContainer; so = nativeRng.startOffset; ec = nativeRng.endContainer; eo = nativeRng.endOffset; } else { // IE8: TextRange var textRange = document.selection.createRange(); var textRangeEnd = textRange.duplicate(); textRangeEnd.collapse(false); var textRangeStart = textRange; textRangeStart.collapse(true); var startPoint = textRangeToPoint(textRangeStart, true), endPoint = textRangeToPoint(textRangeEnd, false); sc = startPoint.cont; so = startPoint.offset; ec = endPoint.cont; eo = endPoint.offset; } } else if (arguments.length === 2) { //collapsed ec = sc; eo = so; } return new WrappedRange(sc, so, ec, eo); }, /** * create WrappedRange from node * * @param {Node} node * @return {WrappedRange} */ createFromNode: function (node) { return this.create(node, 0, node, 1); }, /** * create WrappedRange from Bookmark * * @param {Node} editable * @param {Obkect} bookmark * @return {WrappedRange} */ createFromBookmark : function (editable, bookmark) { var sc = dom.fromOffsetPath(editable, bookmark.s.path); var so = bookmark.s.offset; var ec = dom.fromOffsetPath(editable, bookmark.e.path); var eo = bookmark.e.offset; return new WrappedRange(sc, so, ec, eo); } }; })(); /** * Table * @class */ var Table = function () { /** * handle tab key * * @param {WrappedRange} rng * @param {Boolean} isShift */ this.tab = function (rng, isShift) { var cell = dom.ancestor(rng.commonAncestor(), dom.isCell); var table = dom.ancestor(cell, dom.isTable); var cells = dom.listDescendant(table, dom.isCell); var nextCell = list[isShift ? 'prev' : 'next'](cells, cell); if (nextCell) { range.create(nextCell, 0).select(); } }; /** * create empty table element * * @param {Number} rowCount * @param {Number} colCount * @return {Node} */ this.createTable = function (colCount, rowCount) { var tds = [], tdHTML; for (var idxCol = 0; idxCol < colCount; idxCol++) { tds.push(''); } tdHTML = tds.join(''); var trs = [], trHTML; for (var idxRow = 0; idxRow < rowCount; idxRow++) { trs.push('' + tdHTML + ''); } trHTML = trs.join(''); return $('

' + dom.blank + '

' + trHTML + ' ')[0]; }; }; /** * Editor * @class */ var Editor = function () { var style = new Style(); var table = new Table(); /** * save current range * * @param {jQuery} $editable */ this.saveRange = function ($editable) { $editable.focus(); $editable.data('range', range.create()); }; /** * restore lately range * * @param {jQuery} $editable */ this.restoreRange = function ($editable) { var rng = $editable.data('range'); if (rng) { rng.select(); $editable.focus(); } }; /** * current style * @param {Node} target */ this.currentStyle = function (target) { var rng = range.create(); return rng ? rng.isOnEditable() && style.current(rng, target) : false; }; var triggerOnChange = this.triggerOnChange = function ($editable) { var onChange = $editable.data('callbacks').onChange; if (onChange) { onChange($editable.html(), $editable); } }; /** * undo * @param {jQuery} $editable */ this.undo = function ($editable) { $editable.data('NoteHistory').undo($editable); triggerOnChange($editable); }; /** * redo * @param {jQuery} $editable */ this.redo = function ($editable) { $editable.data('NoteHistory').redo($editable); triggerOnChange($editable); }; /** * record Undo * @param {jQuery} $editable */ var recordUndo = this.recordUndo = function ($editable) { $editable.data('NoteHistory').recordUndo($editable); }; /* jshint ignore:start */ // native commands(with execCommand), generate function for execCommand var commands = ['bold', 'italic', 'underline', 'strikethrough', 'superscript', 'subscript', 'justifyLeft', 'justifyCenter', 'justifyRight', 'justifyFull', 'insertOrderedList', 'insertUnorderedList', 'indent', 'outdent', 'formatBlock', 'removeFormat', 'backColor', 'foreColor', 'insertHorizontalRule', 'fontName']; for (var idx = 0, len = commands.length; idx < len; idx ++) { this[commands[idx]] = (function (sCmd) { return function ($editable, value) { recordUndo($editable); document.execCommand(sCmd, false, value); }; })(commands[idx]); } /* jshint ignore:end */ /** * @param {jQuery} $editable * @param {WrappedRange} rng * @param {Number} tabsize */ var insertTab = function ($editable, rng, tabsize) { recordUndo($editable); var tab = dom.createText(new Array(tabsize + 1).join(dom.NBSP_CHAR)); rng = rng.deleteContents(); rng.insertNode(tab, true); rng = range.create(tab, tabsize); rng.select(); }; /** * handle tab key * @param {jQuery} $editable * @param {Object} options */ this.tab = function ($editable, options) { var rng = range.create(); if (rng.isCollapsed() && rng.isOnCell()) { table.tab(rng); } else { insertTab($editable, rng, options.tabsize); } }; /** * handle shift+tab key */ this.untab = function () { var rng = range.create(); if (rng.isCollapsed() && rng.isOnCell()) { table.tab(rng, true); } }; /** * insert paragraph * * @param {Node} $editable */ this.insertParagraph = function ($editable) { recordUndo($editable); var rng = range.create(); // deleteContents on range. rng = rng.deleteContents(); rng = rng.wrapBodyInlineWithPara(); // find split root node: block level node var splitRoot = dom.ancestor(rng.sc, dom.isPara); var nextPara = dom.splitTree(splitRoot, rng.getStartPoint()); var emptyAnchors = dom.listDescendant(splitRoot, dom.isEmptyAnchor); emptyAnchors = emptyAnchors.concat(dom.listDescendant(nextPara, dom.isEmptyAnchor)); $.each(emptyAnchors, function (idx, anchor) { dom.remove(anchor); }); range.create(nextPara, 0).normalize().select(); triggerOnChange($editable); }; /** * insert image * * @param {jQuery} $editable * @param {String} sUrl */ this.insertImage = function ($editable, sUrl, filename) { async.createImage(sUrl, filename).then(function ($image) { recordUndo($editable); $image.css({ display: '', width: Math.min($editable.width(), $image.width()) }); range.create().insertNode($image[0]); triggerOnChange($editable); }).fail(function () { var callbacks = $editable.data('callbacks'); if (callbacks.onImageUploadError) { callbacks.onImageUploadError(); } }); }; /** * insert video * @param {jQuery} $editable * @param {String} sUrl */ this.insertVideo = function ($editable, sUrl) { recordUndo($editable); // video url patterns(youtube, instagram, vimeo, dailymotion, youku) var ytRegExp = /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=)([^#\&\?]*).*/; var ytMatch = sUrl.match(ytRegExp); var igRegExp = /\/\/instagram.com\/p\/(.[a-zA-Z0-9]*)/; var igMatch = sUrl.match(igRegExp); var vRegExp = /\/\/vine.co\/v\/(.[a-zA-Z0-9]*)/; var vMatch = sUrl.match(vRegExp); var vimRegExp = /\/\/(player.)?vimeo.com\/([a-z]*\/)*([0-9]{6,11})[?]?.*/; var vimMatch = sUrl.match(vimRegExp); var dmRegExp = /.+dailymotion.com\/(video|hub)\/([^_]+)[^#]*(#video=([^_&]+))?/; var dmMatch = sUrl.match(dmRegExp); var youkuRegExp = /\/\/v\.youku\.com\/v_show\/id_(\w+)\.html/; var youkuMatch = sUrl.match(youkuRegExp); var $video; if (ytMatch && ytMatch[2].length === 11) { var youtubeId = ytMatch[2]; $video = $('