¶Ô±ÈÐÂÎļþ |
| | |
| | | (function (global, factory) { |
| | | typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() : |
| | | typeof define === 'function' && define.amd ? define(factory) : |
| | | (global.wangEditor = factory()); |
| | | }(this, (function () { 'use strict'; |
| | | |
| | | /* |
| | | poly-fill |
| | | */ |
| | | |
| | | var polyfill = function () { |
| | | |
| | | // Object.assign |
| | | if (typeof Object.assign != 'function') { |
| | | Object.assign = function (target, varArgs) { |
| | | // .length of function is 2 |
| | | if (target == null) { |
| | | // TypeError if undefined or null |
| | | throw new TypeError('Cannot convert undefined or null to object'); |
| | | } |
| | | |
| | | var to = Object(target); |
| | | |
| | | for (var index = 1; index < arguments.length; index++) { |
| | | var nextSource = arguments[index]; |
| | | |
| | | if (nextSource != null) { |
| | | // Skip over if undefined or null |
| | | for (var nextKey in nextSource) { |
| | | // Avoid bugs when hasOwnProperty is shadowed |
| | | if (Object.prototype.hasOwnProperty.call(nextSource, nextKey)) { |
| | | to[nextKey] = nextSource[nextKey]; |
| | | } |
| | | } |
| | | } |
| | | } |
| | | return to; |
| | | }; |
| | | } |
| | | |
| | | // IE ä¸å
¼å®¹ Element.prototype.matches |
| | | if (!Element.prototype.matches) { |
| | | Element.prototype.matches = Element.prototype.matchesSelector || Element.prototype.mozMatchesSelector || Element.prototype.msMatchesSelector || Element.prototype.oMatchesSelector || Element.prototype.webkitMatchesSelector || function (s) { |
| | | var matches = (this.document || this.ownerDocument).querySelectorAll(s), |
| | | i = matches.length; |
| | | while (--i >= 0 && matches.item(i) !== this) {} |
| | | return i > -1; |
| | | }; |
| | | } |
| | | }; |
| | | |
| | | /* |
| | | DOM æä½ API |
| | | */ |
| | | |
| | | // æ ¹æ® html 代ç çæ®µå建 dom 对象 |
| | | function createElemByHTML(html) { |
| | | var div = void 0; |
| | | div = document.createElement('div'); |
| | | div.innerHTML = html; |
| | | return div.children; |
| | | } |
| | | |
| | | // æ¯å¦æ¯ DOM List |
| | | function isDOMList(selector) { |
| | | if (!selector) { |
| | | return false; |
| | | } |
| | | if (selector instanceof HTMLCollection || selector instanceof NodeList) { |
| | | return true; |
| | | } |
| | | return false; |
| | | } |
| | | |
| | | // å°è£
document.querySelectorAll |
| | | function querySelectorAll(selector) { |
| | | var result = document.querySelectorAll(selector); |
| | | if (isDOMList(result)) { |
| | | return result; |
| | | } else { |
| | | return [result]; |
| | | } |
| | | } |
| | | |
| | | // è®°å½ææçäºä»¶ç»å® |
| | | var eventList = []; |
| | | |
| | | // å建æé 彿° |
| | | function DomElement(selector) { |
| | | if (!selector) { |
| | | return; |
| | | } |
| | | |
| | | // selector æ¬æ¥å°±æ¯ DomElement 对象ï¼ç´æ¥è¿å |
| | | if (selector instanceof DomElement) { |
| | | return selector; |
| | | } |
| | | |
| | | this.selector = selector; |
| | | var nodeType = selector.nodeType; |
| | | |
| | | // æ ¹æ® selector å¾åºçç»æï¼å¦ DOMï¼DOM Listï¼ |
| | | var selectorResult = []; |
| | | if (nodeType === 9) { |
| | | // document èç¹ |
| | | selectorResult = [selector]; |
| | | } else if (nodeType === 1) { |
| | | // å个 DOM èç¹ |
| | | selectorResult = [selector]; |
| | | } else if (isDOMList(selector) || selector instanceof Array) { |
| | | // DOM List æè
æ°ç» |
| | | selectorResult = selector; |
| | | } else if (typeof selector === 'string') { |
| | | // å符串 |
| | | selector = selector.replace('/\n/mg', '').trim(); |
| | | if (selector.indexOf('<') === 0) { |
| | | // å¦ <div> |
| | | selectorResult = createElemByHTML(selector); |
| | | } else { |
| | | // å¦ #id .class |
| | | selectorResult = querySelectorAll(selector); |
| | | } |
| | | } |
| | | |
| | | var length = selectorResult.length; |
| | | if (!length) { |
| | | // 空æ°ç» |
| | | return this; |
| | | } |
| | | |
| | | // å å
¥ DOM èç¹ |
| | | var i = void 0; |
| | | for (i = 0; i < length; i++) { |
| | | this[i] = selectorResult[i]; |
| | | } |
| | | this.length = length; |
| | | } |
| | | |
| | | // ä¿®æ¹åå |
| | | DomElement.prototype = { |
| | | constructor: DomElement, |
| | | |
| | | // ç±»æ°ç»ï¼forEach |
| | | forEach: function forEach(fn) { |
| | | var i = void 0; |
| | | for (i = 0; i < this.length; i++) { |
| | | var elem = this[i]; |
| | | var result = fn.call(elem, elem, i); |
| | | if (result === false) { |
| | | break; |
| | | } |
| | | } |
| | | return this; |
| | | }, |
| | | |
| | | // clone |
| | | clone: function clone(deep) { |
| | | var cloneList = []; |
| | | this.forEach(function (elem) { |
| | | cloneList.push(elem.cloneNode(!!deep)); |
| | | }); |
| | | return $(cloneList); |
| | | }, |
| | | |
| | | // è·å第å 个å
ç´ |
| | | get: function get(index) { |
| | | var length = this.length; |
| | | if (index >= length) { |
| | | index = index % length; |
| | | } |
| | | return $(this[index]); |
| | | }, |
| | | |
| | | // 第ä¸ä¸ª |
| | | first: function first() { |
| | | return this.get(0); |
| | | }, |
| | | |
| | | // æåä¸ä¸ª |
| | | last: function last() { |
| | | var length = this.length; |
| | | return this.get(length - 1); |
| | | }, |
| | | |
| | | // ç»å®äºä»¶ |
| | | on: function on(type, selector, fn) { |
| | | // selector ä¸ä¸ºç©ºï¼è¯æç»å®äºä»¶è¦å 代ç |
| | | if (!fn) { |
| | | fn = selector; |
| | | selector = null; |
| | | } |
| | | |
| | | // type æ¯å¦æå¤ä¸ª |
| | | var types = []; |
| | | types = type.split(/\s+/); |
| | | |
| | | return this.forEach(function (elem) { |
| | | types.forEach(function (type) { |
| | | if (!type) { |
| | | return; |
| | | } |
| | | |
| | | // è®°å½ä¸ï¼æ¹ä¾¿åé¢è§£ç» |
| | | eventList.push({ |
| | | elem: elem, |
| | | type: type, |
| | | fn: fn |
| | | }); |
| | | |
| | | if (!selector) { |
| | | // æ 代ç |
| | | elem.addEventListener(type, fn); |
| | | return; |
| | | } |
| | | |
| | | // æä»£ç |
| | | elem.addEventListener(type, function (e) { |
| | | var target = e.target; |
| | | if (target.matches(selector)) { |
| | | fn.call(target, e); |
| | | } |
| | | }); |
| | | }); |
| | | }); |
| | | }, |
| | | |
| | | // åæ¶äºä»¶ç»å® |
| | | off: function off(type, fn) { |
| | | return this.forEach(function (elem) { |
| | | elem.removeEventListener(type, fn); |
| | | }); |
| | | }, |
| | | |
| | | // è·å/设置 屿§ |
| | | attr: function attr(key, val) { |
| | | if (val == null) { |
| | | // è·åå¼ |
| | | return this[0].getAttribute(key); |
| | | } else { |
| | | // è®¾ç½®å¼ |
| | | return this.forEach(function (elem) { |
| | | elem.setAttribute(key, val); |
| | | }); |
| | | } |
| | | }, |
| | | |
| | | // æ·»å class |
| | | addClass: function addClass(className) { |
| | | if (!className) { |
| | | return this; |
| | | } |
| | | return this.forEach(function (elem) { |
| | | var arr = void 0; |
| | | if (elem.className) { |
| | | // è§£æå½å className 转æ¢ä¸ºæ°ç» |
| | | arr = elem.className.split(/\s/); |
| | | arr = arr.filter(function (item) { |
| | | return !!item.trim(); |
| | | }); |
| | | // æ·»å class |
| | | if (arr.indexOf(className) < 0) { |
| | | arr.push(className); |
| | | } |
| | | // ä¿®æ¹ elem.class |
| | | elem.className = arr.join(' '); |
| | | } else { |
| | | elem.className = className; |
| | | } |
| | | }); |
| | | }, |
| | | |
| | | // å é¤ class |
| | | removeClass: function removeClass(className) { |
| | | if (!className) { |
| | | return this; |
| | | } |
| | | return this.forEach(function (elem) { |
| | | var arr = void 0; |
| | | if (elem.className) { |
| | | // è§£æå½å className 转æ¢ä¸ºæ°ç» |
| | | arr = elem.className.split(/\s/); |
| | | arr = arr.filter(function (item) { |
| | | item = item.trim(); |
| | | // å é¤ class |
| | | if (!item || item === className) { |
| | | return false; |
| | | } |
| | | return true; |
| | | }); |
| | | // ä¿®æ¹ elem.class |
| | | elem.className = arr.join(' '); |
| | | } |
| | | }); |
| | | }, |
| | | |
| | | // ä¿®æ¹ css |
| | | css: function css(key, val) { |
| | | var currentStyle = key + ':' + val + ';'; |
| | | return this.forEach(function (elem) { |
| | | var style = (elem.getAttribute('style') || '').trim(); |
| | | var styleArr = void 0, |
| | | resultArr = []; |
| | | if (style) { |
| | | // å° style æç
§ ; æå为æ°ç» |
| | | styleArr = style.split(';'); |
| | | styleArr.forEach(function (item) { |
| | | // 对æ¯é¡¹æ ·å¼ï¼æç
§ : æå为 key å value |
| | | var arr = item.split(':').map(function (i) { |
| | | return i.trim(); |
| | | }); |
| | | if (arr.length === 2) { |
| | | resultArr.push(arr[0] + ':' + arr[1]); |
| | | } |
| | | }); |
| | | // æ¿æ¢æè
æ°å¢ |
| | | resultArr = resultArr.map(function (item) { |
| | | if (item.indexOf(key) === 0) { |
| | | return currentStyle; |
| | | } else { |
| | | return item; |
| | | } |
| | | }); |
| | | if (resultArr.indexOf(currentStyle) < 0) { |
| | | resultArr.push(currentStyle); |
| | | } |
| | | // ç»æ |
| | | elem.setAttribute('style', resultArr.join('; ')); |
| | | } else { |
| | | // style æ å¼ |
| | | elem.setAttribute('style', currentStyle); |
| | | } |
| | | }); |
| | | }, |
| | | |
| | | // æ¾ç¤º |
| | | show: function show() { |
| | | return this.css('display', 'block'); |
| | | }, |
| | | |
| | | // éè |
| | | hide: function hide() { |
| | | return this.css('display', 'none'); |
| | | }, |
| | | |
| | | // è·ååèç¹ |
| | | children: function children() { |
| | | var elem = this[0]; |
| | | if (!elem) { |
| | | return null; |
| | | } |
| | | |
| | | return $(elem.children); |
| | | }, |
| | | |
| | | // è·ååèç¹ï¼å
æ¬ææ¬èç¹ï¼ |
| | | childNodes: function childNodes() { |
| | | var elem = this[0]; |
| | | if (!elem) { |
| | | return null; |
| | | } |
| | | |
| | | return $(elem.childNodes); |
| | | }, |
| | | |
| | | // å¢å åèç¹ |
| | | append: function append($children) { |
| | | return this.forEach(function (elem) { |
| | | $children.forEach(function (child) { |
| | | elem.appendChild(child); |
| | | }); |
| | | }); |
| | | }, |
| | | |
| | | // ç§»é¤å½åèç¹ |
| | | remove: function remove() { |
| | | return this.forEach(function (elem) { |
| | | if (elem.remove) { |
| | | elem.remove(); |
| | | } else { |
| | | var parent = elem.parentElement; |
| | | parent && parent.removeChild(elem); |
| | | } |
| | | }); |
| | | }, |
| | | |
| | | // æ¯å¦å
å«æä¸ªåèç¹ |
| | | isContain: function isContain($child) { |
| | | var elem = this[0]; |
| | | var child = $child[0]; |
| | | return elem.contains(child); |
| | | }, |
| | | |
| | | // å°ºå¯¸æ°æ® |
| | | getSizeData: function getSizeData() { |
| | | var elem = this[0]; |
| | | return elem.getBoundingClientRect(); // å¯å¾å° bottom height left right top width çæ°æ® |
| | | }, |
| | | |
| | | // å°è£
nodeName |
| | | getNodeName: function getNodeName() { |
| | | var elem = this[0]; |
| | | return elem.nodeName; |
| | | }, |
| | | |
| | | // ä»å½åå
ç´ æ¥æ¾ |
| | | find: function find(selector) { |
| | | var elem = this[0]; |
| | | return $(elem.querySelectorAll(selector)); |
| | | }, |
| | | |
| | | // è·åå½åå
ç´ ç text |
| | | text: function text(val) { |
| | | if (!val) { |
| | | // è·å text |
| | | var elem = this[0]; |
| | | return elem.innerHTML.replace(/<.*?>/g, function () { |
| | | return ''; |
| | | }); |
| | | } else { |
| | | // 设置 text |
| | | return this.forEach(function (elem) { |
| | | elem.innerHTML = val; |
| | | }); |
| | | } |
| | | }, |
| | | |
| | | // è·å html |
| | | html: function html(value) { |
| | | var elem = this[0]; |
| | | if (value == null) { |
| | | return elem.innerHTML; |
| | | } else { |
| | | elem.innerHTML = value; |
| | | return this; |
| | | } |
| | | }, |
| | | |
| | | // è·å value |
| | | val: function val() { |
| | | var elem = this[0]; |
| | | return elem.value.trim(); |
| | | }, |
| | | |
| | | // focus |
| | | focus: function focus() { |
| | | return this.forEach(function (elem) { |
| | | elem.focus(); |
| | | }); |
| | | }, |
| | | |
| | | // parent |
| | | parent: function parent() { |
| | | var elem = this[0]; |
| | | return $(elem.parentElement); |
| | | }, |
| | | |
| | | // parentUntil æ¾å°ç¬¦å selector çç¶èç¹ |
| | | parentUntil: function parentUntil(selector, _currentElem) { |
| | | var results = document.querySelectorAll(selector); |
| | | var length = results.length; |
| | | if (!length) { |
| | | // ä¼ å
¥ç selector æ æ |
| | | return null; |
| | | } |
| | | |
| | | var elem = _currentElem || this[0]; |
| | | if (elem.nodeName === 'BODY') { |
| | | return null; |
| | | } |
| | | |
| | | var parent = elem.parentElement; |
| | | var i = void 0; |
| | | for (i = 0; i < length; i++) { |
| | | if (parent === results[i]) { |
| | | // æ¾å°ï¼å¹¶è¿å |
| | | return $(parent); |
| | | } |
| | | } |
| | | |
| | | // ç»§ç»æ¥æ¾ |
| | | return this.parentUntil(selector, parent); |
| | | }, |
| | | |
| | | // å¤æä¸¤ä¸ª elem æ¯å¦ç¸ç |
| | | equal: function equal($elem) { |
| | | if ($elem.nodeType === 1) { |
| | | return this[0] === $elem; |
| | | } else { |
| | | return this[0] === $elem[0]; |
| | | } |
| | | }, |
| | | |
| | | // å°è¯¥å
ç´ æå
¥å°æä¸ªå
ç´ åé¢ |
| | | insertBefore: function insertBefore(selector) { |
| | | var $referenceNode = $(selector); |
| | | var referenceNode = $referenceNode[0]; |
| | | if (!referenceNode) { |
| | | return this; |
| | | } |
| | | return this.forEach(function (elem) { |
| | | var parent = referenceNode.parentNode; |
| | | parent.insertBefore(elem, referenceNode); |
| | | }); |
| | | }, |
| | | |
| | | // å°è¯¥å
ç´ æå
¥å°æä¸ªå
ç´ åé¢ |
| | | insertAfter: function insertAfter(selector) { |
| | | var $referenceNode = $(selector); |
| | | var referenceNode = $referenceNode[0]; |
| | | if (!referenceNode) { |
| | | return this; |
| | | } |
| | | return this.forEach(function (elem) { |
| | | var parent = referenceNode.parentNode; |
| | | if (parent.lastChild === referenceNode) { |
| | | // æåä¸ä¸ªå
ç´ |
| | | parent.appendChild(elem); |
| | | } else { |
| | | // 䏿¯æåä¸ä¸ªå
ç´ |
| | | parent.insertBefore(elem, referenceNode.nextSibling); |
| | | } |
| | | }); |
| | | } |
| | | }; |
| | | |
| | | // new ä¸ä¸ªå¯¹è±¡ |
| | | function $(selector) { |
| | | return new DomElement(selector); |
| | | } |
| | | |
| | | // è§£ç»ææäºä»¶ï¼ç¨äºéæ¯ç¼è¾å¨ |
| | | $.offAll = function () { |
| | | eventList.forEach(function (item) { |
| | | var elem = item.elem; |
| | | var type = item.type; |
| | | var fn = item.fn; |
| | | // è§£ç» |
| | | elem.removeEventListener(type, fn); |
| | | }); |
| | | }; |
| | | |
| | | /* |
| | | é
ç½®ä¿¡æ¯ |
| | | */ |
| | | |
| | | var config = { |
| | | |
| | | // é»è®¤èåé
ç½® |
| | | menus: ['head', 'bold', 'fontSize', 'fontName', 'italic', 'underline', 'strikeThrough', 'foreColor', 'backColor', 'link', 'list', 'justify', 'quote', 'emoticon', 'image', 'table', 'video', 'code', 'undo', 'redo'], |
| | | |
| | | fontNames: ['å®ä½', '微软é
é»', 'Arial', 'Tahoma', 'Verdana'], |
| | | |
| | | colors: ['#000000', '#eeece0', '#1c487f', '#4d80bf', '#c24f4a', '#8baa4a', '#7b5ba1', '#46acc8', '#f9963b', '#ffffff'], |
| | | |
| | | // // è¯è¨é
ç½® |
| | | // lang: { |
| | | // '设置æ é¢': 'title', |
| | | // 'æ£æ': 'p', |
| | | // '龿¥æå': 'link text', |
| | | // '龿¥': 'link', |
| | | // 'æå
¥': 'insert', |
| | | // 'å建': 'init' |
| | | // }, |
| | | |
| | | // 表æ
|
| | | emotions: [{ |
| | | // tab çæ é¢ |
| | | title: 'é»è®¤', |
| | | // type -> 'emoji' / 'image' |
| | | type: 'image', |
| | | // content -> æ°ç» |
| | | content: [{ |
| | | alt: '[åç¬]', |
| | | src: 'http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/50/pcmoren_huaixiao_org.png' |
| | | }, { |
| | | alt: '[èå±]', |
| | | src: 'http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/40/pcmoren_tian_org.png' |
| | | }, { |
| | | alt: '[污]', |
| | | src: 'http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/3c/pcmoren_wu_org.png' |
| | | }] |
| | | }, { |
| | | // tab çæ é¢ |
| | | title: 'æ°æµª', |
| | | // type -> 'emoji' / 'image' |
| | | type: 'image', |
| | | // content -> æ°ç» |
| | | content: [{ |
| | | src: 'http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/7a/shenshou_thumb.gif', |
| | | alt: '[èæ³¥é©¬]' |
| | | }, { |
| | | src: 'http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/60/horse2_thumb.gif', |
| | | alt: '[ç¥é©¬]' |
| | | }, { |
| | | src: 'http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/bc/fuyun_thumb.gif', |
| | | alt: '[æµ®äº]' |
| | | }] |
| | | }, { |
| | | // tab çæ é¢ |
| | | title: 'emoji', |
| | | // type -> 'emoji' / 'image' |
| | | type: 'emoji', |
| | | // content -> æ°ç» |
| | | content: 'ð ð ð ð ð ð
ð ð ð ð ð ð ð ðª ð´ ð ð¤ ð¬ ð¤'.split(/\s/) |
| | | }], |
| | | |
| | | // ç¼è¾åºåç z-index |
| | | zIndex: 10000, |
| | | |
| | | // æ¯å¦å¼å¯ debug 模å¼ï¼debug 模å¼ä¸éè¯¯ä¼ throw error 形弿åºï¼ |
| | | debug: false, |
| | | |
| | | // æå
¥é¾æ¥æ¶åçæ ¼å¼æ ¡éª |
| | | linkCheck: function linkCheck(text, link) { |
| | | // text æ¯æå
¥çæå |
| | | // link æ¯æå
¥ç龿¥ |
| | | return true; // è¿å true å³è¡¨ç¤ºæå |
| | | // return 'æ ¡éªå¤±è´¥' // è¿åå符串å³è¡¨ç¤ºå¤±è´¥çæç¤ºä¿¡æ¯ |
| | | }, |
| | | |
| | | // æå
¥ç½ç»å¾ççæ ¡éª |
| | | linkImgCheck: function linkImgCheck(src) { |
| | | // src å³å¾ççå°å |
| | | return true; // è¿å true å³è¡¨ç¤ºæå |
| | | // return 'æ ¡éªå¤±è´¥' // è¿åå符串å³è¡¨ç¤ºå¤±è´¥çæç¤ºä¿¡æ¯ |
| | | }, |
| | | |
| | | // ç²è´´è¿æ»¤æ ·å¼ï¼é»è®¤å¼å¯ |
| | | pasteFilterStyle: true, |
| | | |
| | | // ç²è´´å
容æ¶ï¼å¿½ç¥å¾çãé»è®¤å
³é |
| | | pasteIgnoreImg: false, |
| | | |
| | | // 对ç²è´´çæåè¿è¡èªå®ä¹å¤çï¼è¿åå¤çåçç»æãç¼è¾å¨ä¼å°å¤çåçç»æç²è´´å°ç¼è¾åºåä¸ã |
| | | // IE ææ¶ä¸æ¯æ |
| | | pasteTextHandle: function pasteTextHandle(content) { |
| | | // content å³ç²è´´è¿æ¥çå
容ï¼html æ çº¯ææ¬ï¼ï¼å¯è¿è¡èªå®ä¹å¤çç¶åè¿å |
| | | return content; |
| | | }, |
| | | |
| | | // onchange äºä»¶ |
| | | // onchange: function (html) { |
| | | // // html å³ååä¹åçå
容 |
| | | // console.log(html) |
| | | // }, |
| | | |
| | | // æ¯å¦æ¾ç¤ºæ·»å ç½ç»å¾çç tab |
| | | showLinkImg: true, |
| | | |
| | | // æå
¥ç½ç»å¾ççåè° |
| | | linkImgCallback: function linkImgCallback(url) { |
| | | // console.log(url) // url 峿å
¥å¾ççå°å |
| | | }, |
| | | |
| | | // é»è®¤ä¸ä¼ å¾ç max size: 5M |
| | | uploadImgMaxSize: 5 * 1024 * 1024, |
| | | |
| | | // é
ç½®ä¸æ¬¡æå¤ä¸ä¼ å 个å¾ç |
| | | // uploadImgMaxLength: 5, |
| | | |
| | | // ä¸ä¼ å¾çï¼æ¯å¦æ¾ç¤º base64 æ ¼å¼ |
| | | uploadImgShowBase64: false, |
| | | |
| | | // ä¸ä¼ å¾çï¼server å°åï¼å¦ææå¼ï¼å base64 æ ¼å¼çé
ç½®å失æï¼ |
| | | // uploadImgServer: '/upload', |
| | | |
| | | // èªå®ä¹é
ç½® filename |
| | | uploadFileName: '', |
| | | |
| | | // ä¸ä¼ å¾ççèªå®ä¹åæ° |
| | | uploadImgParams: { |
| | | // token: 'abcdef12345' |
| | | }, |
| | | |
| | | // ä¸ä¼ å¾ççèªå®ä¹header |
| | | uploadImgHeaders: { |
| | | // 'Accept': 'text/x-json' |
| | | }, |
| | | |
| | | // é
ç½® XHR withCredentials |
| | | withCredentials: false, |
| | | |
| | | // èªå®ä¹ä¸ä¼ å¾çè¶
æ¶æ¶é´ ms |
| | | uploadImgTimeout: 10000, |
| | | |
| | | // ä¸ä¼ å¾ç hook |
| | | uploadImgHooks: { |
| | | // customInsert: function (insertLinkImg, result, editor) { |
| | | // console.log('customInsert') |
| | | // // å¾çä¸ä¼ å¹¶è¿åç»æï¼èªå®ä¹æå
¥å¾ççäºä»¶ï¼è䏿¯ç¼è¾å¨èªå¨æå
¥å¾ç |
| | | // const data = result.data1 || [] |
| | | // data.forEach(link => { |
| | | // insertLinkImg(link) |
| | | // }) |
| | | // }, |
| | | before: function before(xhr, editor, files) { |
| | | // å¾çä¸ä¼ ä¹å触å |
| | | |
| | | // 妿è¿åçç»ææ¯ {prevent: true, msg: 'xxxx'} åè¡¨ç¤ºç¨æ·æ¾å¼ä¸ä¼ |
| | | // return { |
| | | // prevent: true, |
| | | // msg: 'æ¾å¼ä¸ä¼ ' |
| | | // } |
| | | }, |
| | | success: function success(xhr, editor, result) { |
| | | // å¾çä¸ä¼ å¹¶è¿åç»æï¼å¾çæå
¥æåä¹å触å |
| | | }, |
| | | fail: function fail(xhr, editor, result) { |
| | | // å¾çä¸ä¼ å¹¶è¿åç»æï¼ä½å¾çæå
¥é误æ¶è§¦å |
| | | }, |
| | | error: function error(xhr, editor) { |
| | | // å¾çä¸ä¼ åºéæ¶è§¦å |
| | | }, |
| | | timeout: function timeout(xhr, editor) { |
| | | // å¾çä¸ä¼ è¶
æ¶æ¶è§¦å |
| | | } |
| | | }, |
| | | |
| | | // æ¯å¦ä¸ä¼ ä¸çäºï¼é»è®¤ä¸º false |
| | | qiniu: false |
| | | |
| | | }; |
| | | |
| | | /* |
| | | å·¥å
· |
| | | */ |
| | | |
| | | // å UA ç¸å
³ç屿§ |
| | | var UA = { |
| | | _ua: navigator.userAgent, |
| | | |
| | | // æ¯å¦ webkit |
| | | isWebkit: function isWebkit() { |
| | | var reg = /webkit/i; |
| | | return reg.test(this._ua); |
| | | }, |
| | | |
| | | // æ¯å¦ IE |
| | | isIE: function isIE() { |
| | | return 'ActiveXObject' in window; |
| | | } |
| | | }; |
| | | |
| | | // éå对象 |
| | | function objForEach(obj, fn) { |
| | | var key = void 0, |
| | | result = void 0; |
| | | for (key in obj) { |
| | | if (obj.hasOwnProperty(key)) { |
| | | result = fn.call(obj, key, obj[key]); |
| | | if (result === false) { |
| | | break; |
| | | } |
| | | } |
| | | } |
| | | } |
| | | |
| | | // éåç±»æ°ç» |
| | | function arrForEach(fakeArr, fn) { |
| | | var i = void 0, |
| | | item = void 0, |
| | | result = void 0; |
| | | var length = fakeArr.length || 0; |
| | | for (i = 0; i < length; i++) { |
| | | item = fakeArr[i]; |
| | | result = fn.call(fakeArr, item, i); |
| | | if (result === false) { |
| | | break; |
| | | } |
| | | } |
| | | } |
| | | |
| | | // è·åéæºæ° |
| | | function getRandom(prefix) { |
| | | return prefix + Math.random().toString().slice(2); |
| | | } |
| | | |
| | | // æ¿æ¢ html ç¹æ®å符 |
| | | function replaceHtmlSymbol(html) { |
| | | if (html == null) { |
| | | return ''; |
| | | } |
| | | return html.replace(/</gm, '<').replace(/>/gm, '>').replace(/"/gm, '"').replace(/(\r\n|\r|\n)/g, '<br/>'); |
| | | } |
| | | |
| | | // è¿åç¾åæ¯çæ ¼å¼ |
| | | |
| | | |
| | | // 夿æ¯ä¸æ¯ function |
| | | function isFunction(fn) { |
| | | return typeof fn === 'function'; |
| | | } |
| | | |
| | | /* |
| | | bold-menu |
| | | */ |
| | | // æé 彿° |
| | | function Bold(editor) { |
| | | this.editor = editor; |
| | | this.$elem = $('<div class="w-e-menu">\n <i class="w-e-icon-bold"></i>\n </div>'); |
| | | this.type = 'click'; |
| | | |
| | | // å½åæ¯å¦ active ç¶æ |
| | | this._active = false; |
| | | } |
| | | |
| | | // åå |
| | | Bold.prototype = { |
| | | constructor: Bold, |
| | | |
| | | // ç¹å»äºä»¶ |
| | | onClick: function onClick(e) { |
| | | // ç¹å»èåå°è§¦åè¿é |
| | | |
| | | var editor = this.editor; |
| | | var isSeleEmpty = editor.selection.isSelectionEmpty(); |
| | | |
| | | if (isSeleEmpty) { |
| | | // éåºæ¯ç©ºçï¼æå
¥å¹¶éä¸ä¸ä¸ªâ空ç½â |
| | | editor.selection.createEmptyRange(); |
| | | } |
| | | |
| | | // æ§è¡ bold å½ä»¤ |
| | | editor.cmd.do('bold'); |
| | | |
| | | if (isSeleEmpty) { |
| | | // éè¦å°éåæå èµ·æ¥ |
| | | editor.selection.collapseRange(); |
| | | editor.selection.restoreSelection(); |
| | | } |
| | | }, |
| | | |
| | | // è¯å¾æ¹å active ç¶æ |
| | | tryChangeActive: function tryChangeActive(e) { |
| | | var editor = this.editor; |
| | | var $elem = this.$elem; |
| | | if (editor.cmd.queryCommandState('bold')) { |
| | | this._active = true; |
| | | $elem.addClass('w-e-active'); |
| | | } else { |
| | | this._active = false; |
| | | $elem.removeClass('w-e-active'); |
| | | } |
| | | } |
| | | }; |
| | | |
| | | /* |
| | | æ¿æ¢å¤è¯è¨ |
| | | */ |
| | | |
| | | var replaceLang = function (editor, str) { |
| | | var langArgs = editor.config.langArgs || []; |
| | | var result = str; |
| | | |
| | | langArgs.forEach(function (item) { |
| | | var reg = item.reg; |
| | | var val = item.val; |
| | | |
| | | if (reg.test(result)) { |
| | | result = result.replace(reg, function () { |
| | | return val; |
| | | }); |
| | | } |
| | | }); |
| | | |
| | | return result; |
| | | }; |
| | | |
| | | /* |
| | | droplist |
| | | */ |
| | | var _emptyFn = function _emptyFn() {}; |
| | | |
| | | // æé 彿° |
| | | function DropList(menu, opt) { |
| | | var _this = this; |
| | | |
| | | // droplist æä¾éçèå |
| | | var editor = menu.editor; |
| | | this.menu = menu; |
| | | this.opt = opt; |
| | | // å®¹å¨ |
| | | var $container = $('<div class="w-e-droplist"></div>'); |
| | | |
| | | // æ é¢ |
| | | var $title = opt.$title; |
| | | var titleHtml = void 0; |
| | | if ($title) { |
| | | // æ¿æ¢å¤è¯è¨ |
| | | titleHtml = $title.html(); |
| | | titleHtml = replaceLang(editor, titleHtml); |
| | | $title.html(titleHtml); |
| | | |
| | | $title.addClass('w-e-dp-title'); |
| | | $container.append($title); |
| | | } |
| | | |
| | | var list = opt.list || []; |
| | | var type = opt.type || 'list'; // 'list' å表形å¼ï¼å¦âæ é¢âèåï¼ / 'inline-block' åç¶å½¢å¼ï¼å¦âé¢è²âèåï¼ |
| | | var onClick = opt.onClick || _emptyFn; |
| | | |
| | | // å å
¥ DOM å¹¶ç»å®äºä»¶ |
| | | var $list = $('<ul class="' + (type === 'list' ? 'w-e-list' : 'w-e-block') + '"></ul>'); |
| | | $container.append($list); |
| | | list.forEach(function (item) { |
| | | var $elem = item.$elem; |
| | | |
| | | // æ¿æ¢å¤è¯è¨ |
| | | var elemHtml = $elem.html(); |
| | | elemHtml = replaceLang(editor, elemHtml); |
| | | $elem.html(elemHtml); |
| | | |
| | | var value = item.value; |
| | | var $li = $('<li class="w-e-item"></li>'); |
| | | if ($elem) { |
| | | $li.append($elem); |
| | | $list.append($li); |
| | | $li.on('click', function (e) { |
| | | onClick(value); |
| | | |
| | | // éè |
| | | _this.hideTimeoutId = setTimeout(function () { |
| | | _this.hide(); |
| | | }, 0); |
| | | }); |
| | | } |
| | | }); |
| | | |
| | | // ç»å®éèäºä»¶ |
| | | $container.on('mouseleave', function (e) { |
| | | _this.hideTimeoutId = setTimeout(function () { |
| | | _this.hide(); |
| | | }, 0); |
| | | }); |
| | | |
| | | // è®°å½å±æ§ |
| | | this.$container = $container; |
| | | |
| | | // åºæ¬å±æ§ |
| | | this._rendered = false; |
| | | this._show = false; |
| | | } |
| | | |
| | | // åå |
| | | DropList.prototype = { |
| | | constructor: DropList, |
| | | |
| | | // æ¾ç¤ºï¼æå
¥DOMï¼ |
| | | show: function show() { |
| | | if (this.hideTimeoutId) { |
| | | // æ¸
é¤ä¹åç宿¶éè |
| | | clearTimeout(this.hideTimeoutId); |
| | | } |
| | | |
| | | var menu = this.menu; |
| | | var $menuELem = menu.$elem; |
| | | var $container = this.$container; |
| | | if (this._show) { |
| | | return; |
| | | } |
| | | if (this._rendered) { |
| | | // æ¾ç¤º |
| | | $container.show(); |
| | | } else { |
| | | // å å
¥ DOM ä¹åå
å®ä½ä½ç½® |
| | | var menuHeight = $menuELem.getSizeData().height || 0; |
| | | var width = this.opt.width || 100; // é»è®¤ä¸º 100 |
| | | $container.css('margin-top', menuHeight + 'px').css('width', width + 'px'); |
| | | |
| | | // å å
¥å° DOM |
| | | $menuELem.append($container); |
| | | this._rendered = true; |
| | | } |
| | | |
| | | // ä¿®æ¹å±æ§ |
| | | this._show = true; |
| | | }, |
| | | |
| | | // éèï¼ç§»é¤DOMï¼ |
| | | hide: function hide() { |
| | | if (this.showTimeoutId) { |
| | | // æ¸
é¤ä¹åç宿¶æ¾ç¤º |
| | | clearTimeout(this.showTimeoutId); |
| | | } |
| | | |
| | | var $container = this.$container; |
| | | if (!this._show) { |
| | | return; |
| | | } |
| | | // éè并鿹屿§ |
| | | $container.hide(); |
| | | this._show = false; |
| | | } |
| | | }; |
| | | |
| | | /* |
| | | menu - header |
| | | */ |
| | | // æé 彿° |
| | | function Head(editor) { |
| | | var _this = this; |
| | | |
| | | this.editor = editor; |
| | | this.$elem = $('<div class="w-e-menu"><i class="w-e-icon-header"></i></div>'); |
| | | this.type = 'droplist'; |
| | | |
| | | // å½åæ¯å¦ active ç¶æ |
| | | this._active = false; |
| | | |
| | | // åå§å droplist |
| | | this.droplist = new DropList(this, { |
| | | width: 100, |
| | | $title: $('<p>设置æ é¢</p>'), |
| | | type: 'list', // droplist 以å表形å¼å±ç¤º |
| | | list: [{ $elem: $('<h1>H1</h1>'), value: '<h1>' }, { $elem: $('<h2>H2</h2>'), value: '<h2>' }, { $elem: $('<h3>H3</h3>'), value: '<h3>' }, { $elem: $('<h4>H4</h4>'), value: '<h4>' }, { $elem: $('<h5>H5</h5>'), value: '<h5>' }, { $elem: $('<p>æ£æ</p>'), value: '<p>' }], |
| | | onClick: function onClick(value) { |
| | | // 注æ this æ¯æåå½åç Head 对象 |
| | | _this._command(value); |
| | | } |
| | | }); |
| | | } |
| | | |
| | | // åå |
| | | Head.prototype = { |
| | | constructor: Head, |
| | | |
| | | // æ§è¡å½ä»¤ |
| | | _command: function _command(value) { |
| | | var editor = this.editor; |
| | | |
| | | var $selectionElem = editor.selection.getSelectionContainerElem(); |
| | | if (editor.$textElem.equal($selectionElem)) { |
| | | // ä¸è½éä¸å¤è¡æ¥è®¾ç½®æ é¢ï¼å¦åä¼åºç°é®é¢ |
| | | // ä¾å¦éä¸çæ¯ <p>xxx</p><p>yyy</p> æ¥è®¾ç½®æ é¢ï¼è®¾ç½®ä¹åä¼æä¸º <h1>xxx<br>yyy</h1> ä¸ç¬¦å颿 |
| | | return; |
| | | } |
| | | |
| | | editor.cmd.do('formatBlock', value); |
| | | }, |
| | | |
| | | // è¯å¾æ¹å active ç¶æ |
| | | tryChangeActive: function tryChangeActive(e) { |
| | | var editor = this.editor; |
| | | var $elem = this.$elem; |
| | | var reg = /^h/i; |
| | | var cmdValue = editor.cmd.queryCommandValue('formatBlock'); |
| | | if (reg.test(cmdValue)) { |
| | | this._active = true; |
| | | $elem.addClass('w-e-active'); |
| | | } else { |
| | | this._active = false; |
| | | $elem.removeClass('w-e-active'); |
| | | } |
| | | } |
| | | }; |
| | | |
| | | /* |
| | | menu - fontSize |
| | | */ |
| | | |
| | | // æé 彿° |
| | | function FontSize(editor) { |
| | | var _this = this; |
| | | |
| | | this.editor = editor; |
| | | this.$elem = $('<div class="w-e-menu"><i class="w-e-icon-text-heigh"></i></div>'); |
| | | this.type = 'droplist'; |
| | | |
| | | // å½åæ¯å¦ active ç¶æ |
| | | this._active = false; |
| | | |
| | | // åå§å droplist |
| | | this.droplist = new DropList(this, { |
| | | width: 160, |
| | | $title: $('<p>åå·</p>'), |
| | | type: 'list', // droplist 以å表形å¼å±ç¤º |
| | | list: [{ $elem: $('<span style="font-size: x-small;">x-small</span>'), value: '1' }, { $elem: $('<span style="font-size: small;">small</span>'), value: '2' }, { $elem: $('<span>normal</span>'), value: '3' }, { $elem: $('<span style="font-size: large;">large</span>'), value: '4' }, { $elem: $('<span style="font-size: x-large;">x-large</span>'), value: '5' }, { $elem: $('<span style="font-size: xx-large;">xx-large</span>'), value: '6' }], |
| | | onClick: function onClick(value) { |
| | | // 注æ this æ¯æåå½åç FontSize 对象 |
| | | _this._command(value); |
| | | } |
| | | }); |
| | | } |
| | | |
| | | // åå |
| | | FontSize.prototype = { |
| | | constructor: FontSize, |
| | | |
| | | // æ§è¡å½ä»¤ |
| | | _command: function _command(value) { |
| | | var editor = this.editor; |
| | | editor.cmd.do('fontSize', value); |
| | | } |
| | | }; |
| | | |
| | | /* |
| | | menu - fontName |
| | | */ |
| | | |
| | | // æé 彿° |
| | | function FontName(editor) { |
| | | var _this = this; |
| | | |
| | | this.editor = editor; |
| | | this.$elem = $('<div class="w-e-menu"><i class="w-e-icon-font"></i></div>'); |
| | | this.type = 'droplist'; |
| | | |
| | | // å½åæ¯å¦ active ç¶æ |
| | | this._active = false; |
| | | |
| | | // è·åé
ç½®çåä½ |
| | | var config = editor.config; |
| | | var fontNames = config.fontNames || []; |
| | | |
| | | // åå§å droplist |
| | | this.droplist = new DropList(this, { |
| | | width: 100, |
| | | $title: $('<p>åä½</p>'), |
| | | type: 'list', // droplist 以å表形å¼å±ç¤º |
| | | list: fontNames.map(function (fontName) { |
| | | return { $elem: $('<span style="font-family: ' + fontName + ';">' + fontName + '</span>'), value: fontName }; |
| | | }), |
| | | onClick: function onClick(value) { |
| | | // 注æ this æ¯æåå½åç FontName 对象 |
| | | _this._command(value); |
| | | } |
| | | }); |
| | | } |
| | | |
| | | // åå |
| | | FontName.prototype = { |
| | | constructor: FontName, |
| | | |
| | | _command: function _command(value) { |
| | | var editor = this.editor; |
| | | editor.cmd.do('fontName', value); |
| | | } |
| | | }; |
| | | |
| | | /* |
| | | panel |
| | | */ |
| | | |
| | | var emptyFn = function emptyFn() {}; |
| | | |
| | | // è®°å½å·²ç»æ¾ç¤º panel çèå |
| | | var _isCreatedPanelMenus = []; |
| | | |
| | | // æé 彿° |
| | | function Panel(menu, opt) { |
| | | this.menu = menu; |
| | | this.opt = opt; |
| | | } |
| | | |
| | | // åå |
| | | Panel.prototype = { |
| | | constructor: Panel, |
| | | |
| | | // æ¾ç¤ºï¼æå
¥DOMï¼ |
| | | show: function show() { |
| | | var _this = this; |
| | | |
| | | var menu = this.menu; |
| | | if (_isCreatedPanelMenus.indexOf(menu) >= 0) { |
| | | // 该èåå·²ç»åå»ºäº panel ä¸è½åå建 |
| | | return; |
| | | } |
| | | |
| | | var editor = menu.editor; |
| | | var $body = $('body'); |
| | | var $textContainerElem = editor.$textContainerElem; |
| | | var opt = this.opt; |
| | | |
| | | // panel çå®¹å¨ |
| | | var $container = $('<div class="w-e-panel-container"></div>'); |
| | | var width = opt.width || 300; // é»è®¤ 300px |
| | | $container.css('width', width + 'px').css('margin-left', (0 - width) / 2 + 'px'); |
| | | |
| | | // æ·»å å
³éæé® |
| | | var $closeBtn = $('<i class="w-e-icon-close w-e-panel-close"></i>'); |
| | | $container.append($closeBtn); |
| | | $closeBtn.on('click', function () { |
| | | _this.hide(); |
| | | }); |
| | | |
| | | // åå¤ tabs å®¹å¨ |
| | | var $tabTitleContainer = $('<ul class="w-e-panel-tab-title"></ul>'); |
| | | var $tabContentContainer = $('<div class="w-e-panel-tab-content"></div>'); |
| | | $container.append($tabTitleContainer).append($tabContentContainer); |
| | | |
| | | // 设置é«åº¦ |
| | | var height = opt.height; |
| | | if (height) { |
| | | $tabContentContainer.css('height', height + 'px').css('overflow-y', 'auto'); |
| | | } |
| | | |
| | | // tabs |
| | | var tabs = opt.tabs || []; |
| | | var tabTitleArr = []; |
| | | var tabContentArr = []; |
| | | tabs.forEach(function (tab, tabIndex) { |
| | | if (!tab) { |
| | | return; |
| | | } |
| | | var title = tab.title || ''; |
| | | var tpl = tab.tpl || ''; |
| | | |
| | | // æ¿æ¢å¤è¯è¨ |
| | | title = replaceLang(editor, title); |
| | | tpl = replaceLang(editor, tpl); |
| | | |
| | | // æ·»å å° DOM |
| | | var $title = $('<li class="w-e-item">' + title + '</li>'); |
| | | $tabTitleContainer.append($title); |
| | | var $content = $(tpl); |
| | | $tabContentContainer.append($content); |
| | | |
| | | // è®°å½å°å
å |
| | | $title._index = tabIndex; |
| | | tabTitleArr.push($title); |
| | | tabContentArr.push($content); |
| | | |
| | | // 设置 active 项 |
| | | if (tabIndex === 0) { |
| | | $title._active = true; |
| | | $title.addClass('w-e-active'); |
| | | } else { |
| | | $content.hide(); |
| | | } |
| | | |
| | | // ç»å® tab çäºä»¶ |
| | | $title.on('click', function (e) { |
| | | if ($title._active) { |
| | | return; |
| | | } |
| | | // éèææç tab |
| | | tabTitleArr.forEach(function ($title) { |
| | | $title._active = false; |
| | | $title.removeClass('w-e-active'); |
| | | }); |
| | | tabContentArr.forEach(function ($content) { |
| | | $content.hide(); |
| | | }); |
| | | |
| | | // æ¾ç¤ºå½åç tab |
| | | $title._active = true; |
| | | $title.addClass('w-e-active'); |
| | | $content.show(); |
| | | }); |
| | | }); |
| | | |
| | | // ç»å®å
³éäºä»¶ |
| | | $container.on('click', function (e) { |
| | | // ç¹å»æ¶é»æ¢å泡 |
| | | e.stopPropagation(); |
| | | }); |
| | | $body.on('click', function (e) { |
| | | _this.hide(); |
| | | }); |
| | | |
| | | // æ·»å å° DOM |
| | | $textContainerElem.append($container); |
| | | |
| | | // ç»å® opt çäºä»¶ï¼åªææ·»å å° DOM ä¹åæè½ç»å®æå |
| | | tabs.forEach(function (tab, index) { |
| | | if (!tab) { |
| | | return; |
| | | } |
| | | var events = tab.events || []; |
| | | events.forEach(function (event) { |
| | | var selector = event.selector; |
| | | var type = event.type; |
| | | var fn = event.fn || emptyFn; |
| | | var $content = tabContentArr[index]; |
| | | $content.find(selector).on(type, function (e) { |
| | | e.stopPropagation(); |
| | | var needToHide = fn(e); |
| | | // æ§è¡å®äºä»¶ä¹åï¼æ¯å¦è¦å
³é panel |
| | | if (needToHide) { |
| | | _this.hide(); |
| | | } |
| | | }); |
| | | }); |
| | | }); |
| | | |
| | | // focus 第ä¸ä¸ª elem |
| | | var $inputs = $container.find('input[type=text],textarea'); |
| | | if ($inputs.length) { |
| | | $inputs.get(0).focus(); |
| | | } |
| | | |
| | | // æ·»å å°å±æ§ |
| | | this.$container = $container; |
| | | |
| | | // éèå
¶ä» panel |
| | | this._hideOtherPanels(); |
| | | // è®°å½è¯¥ menu å·²ç»åå»ºäº panel |
| | | _isCreatedPanelMenus.push(menu); |
| | | }, |
| | | |
| | | // éèï¼ç§»é¤DOMï¼ |
| | | hide: function hide() { |
| | | var menu = this.menu; |
| | | var $container = this.$container; |
| | | if ($container) { |
| | | $container.remove(); |
| | | } |
| | | |
| | | // å°è¯¥ menu è®°å½ä¸ç§»é¤ |
| | | _isCreatedPanelMenus = _isCreatedPanelMenus.filter(function (item) { |
| | | if (item === menu) { |
| | | return false; |
| | | } else { |
| | | return true; |
| | | } |
| | | }); |
| | | }, |
| | | |
| | | // ä¸ä¸ª panel å±ç¤ºæ¶ï¼éèå
¶ä» panel |
| | | _hideOtherPanels: function _hideOtherPanels() { |
| | | if (!_isCreatedPanelMenus.length) { |
| | | return; |
| | | } |
| | | _isCreatedPanelMenus.forEach(function (menu) { |
| | | var panel = menu.panel || {}; |
| | | if (panel.hide) { |
| | | panel.hide(); |
| | | } |
| | | }); |
| | | } |
| | | }; |
| | | |
| | | /* |
| | | menu - link |
| | | */ |
| | | // æé 彿° |
| | | function Link(editor) { |
| | | this.editor = editor; |
| | | this.$elem = $('<div class="w-e-menu"><i class="w-e-icon-link"></i></div>'); |
| | | this.type = 'panel'; |
| | | |
| | | // å½åæ¯å¦ active ç¶æ |
| | | this._active = false; |
| | | } |
| | | |
| | | // åå |
| | | Link.prototype = { |
| | | constructor: Link, |
| | | |
| | | // ç¹å»äºä»¶ |
| | | onClick: function onClick(e) { |
| | | var editor = this.editor; |
| | | var $linkelem = void 0; |
| | | |
| | | if (this._active) { |
| | | // å½åéåºå¨é¾æ¥éé¢ |
| | | $linkelem = editor.selection.getSelectionContainerElem(); |
| | | if (!$linkelem) { |
| | | return; |
| | | } |
| | | // å°è¯¥å
ç´ é½å
å«å¨éåä¹å
ï¼ä»¥ä¾¿å颿´ä½æ¿æ¢ |
| | | editor.selection.createRangeByElem($linkelem); |
| | | editor.selection.restoreSelection(); |
| | | // æ¾ç¤º panel |
| | | this._createPanel($linkelem.text(), $linkelem.attr('href')); |
| | | } else { |
| | | // å½åéåºä¸å¨é¾æ¥éé¢ |
| | | if (editor.selection.isSelectionEmpty()) { |
| | | // éåºæ¯ç©ºçï¼æªéä¸å
容 |
| | | this._createPanel('', ''); |
| | | } else { |
| | | // éä¸å
å®¹äº |
| | | this._createPanel(editor.selection.getSelectionText(), ''); |
| | | } |
| | | } |
| | | }, |
| | | |
| | | // å建 panel |
| | | _createPanel: function _createPanel(text, link) { |
| | | var _this = this; |
| | | |
| | | // panel ä¸éè¦ç¨å°çid |
| | | var inputLinkId = getRandom('input-link'); |
| | | var inputTextId = getRandom('input-text'); |
| | | var btnOkId = getRandom('btn-ok'); |
| | | var btnDelId = getRandom('btn-del'); |
| | | |
| | | // æ¯å¦æ¾ç¤ºâå é¤é¾æ¥â |
| | | var delBtnDisplay = this._active ? 'inline-block' : 'none'; |
| | | |
| | | // åå§åå¹¶æ¾ç¤º panel |
| | | var panel = new Panel(this, { |
| | | width: 300, |
| | | // panel ä¸å¯å
å«å¤ä¸ª tab |
| | | tabs: [{ |
| | | // tab çæ é¢ |
| | | title: '龿¥', |
| | | // æ¨¡æ¿ |
| | | tpl: '<div>\n <input id="' + inputTextId + '" type="text" class="block" value="' + text + '" placeholder="\u94FE\u63A5\u6587\u5B57"/></td>\n <input id="' + inputLinkId + '" type="text" class="block" value="' + link + '" placeholder="http://..."/></td>\n <div class="w-e-button-container">\n <button id="' + btnOkId + '" class="right">\u63D2\u5165</button>\n <button id="' + btnDelId + '" class="gray right" style="display:' + delBtnDisplay + '">\u5220\u9664\u94FE\u63A5</button>\n </div>\n </div>', |
| | | // äºä»¶ç»å® |
| | | events: [ |
| | | // æå
¥é¾æ¥ |
| | | { |
| | | selector: '#' + btnOkId, |
| | | type: 'click', |
| | | fn: function fn() { |
| | | // æ§è¡æå
¥é¾æ¥ |
| | | var $link = $('#' + inputLinkId); |
| | | var $text = $('#' + inputTextId); |
| | | var link = $link.val(); |
| | | var text = $text.val(); |
| | | _this._insertLink(text, link); |
| | | |
| | | // è¿å trueï¼è¡¨ç¤ºè¯¥äºä»¶æ§è¡å®ä¹åï¼panel è¦å
³éãå¦å panel ä¸ä¼å
³é |
| | | return true; |
| | | } |
| | | }, |
| | | // å é¤é¾æ¥ |
| | | { |
| | | selector: '#' + btnDelId, |
| | | type: 'click', |
| | | fn: function fn() { |
| | | // æ§è¡å é¤é¾æ¥ |
| | | _this._delLink(); |
| | | |
| | | // è¿å trueï¼è¡¨ç¤ºè¯¥äºä»¶æ§è¡å®ä¹åï¼panel è¦å
³éãå¦å panel ä¸ä¼å
³é |
| | | return true; |
| | | } |
| | | }] |
| | | } // tab end |
| | | ] // tabs end |
| | | }); |
| | | |
| | | // æ¾ç¤º panel |
| | | panel.show(); |
| | | |
| | | // è®°å½å±æ§ |
| | | this.panel = panel; |
| | | }, |
| | | |
| | | // å é¤å½å龿¥ |
| | | _delLink: function _delLink() { |
| | | if (!this._active) { |
| | | return; |
| | | } |
| | | var editor = this.editor; |
| | | var $selectionELem = editor.selection.getSelectionContainerElem(); |
| | | if (!$selectionELem) { |
| | | return; |
| | | } |
| | | var selectionText = editor.selection.getSelectionText(); |
| | | editor.cmd.do('insertHTML', '<span>' + selectionText + '</span>'); |
| | | }, |
| | | |
| | | // æå
¥é¾æ¥ |
| | | _insertLink: function _insertLink(text, link) { |
| | | var editor = this.editor; |
| | | var config = editor.config; |
| | | var linkCheck = config.linkCheck; |
| | | var checkResult = true; // é»è®¤ä¸º true |
| | | if (linkCheck && typeof linkCheck === 'function') { |
| | | checkResult = linkCheck(text, link); |
| | | } |
| | | if (checkResult === true) { |
| | | editor.cmd.do('insertHTML', '<a href="' + link + '" target="_blank">' + text + '</a>'); |
| | | } else { |
| | | alert(checkResult); |
| | | } |
| | | }, |
| | | |
| | | // è¯å¾æ¹å active ç¶æ |
| | | tryChangeActive: function tryChangeActive(e) { |
| | | var editor = this.editor; |
| | | var $elem = this.$elem; |
| | | var $selectionELem = editor.selection.getSelectionContainerElem(); |
| | | if (!$selectionELem) { |
| | | return; |
| | | } |
| | | if ($selectionELem.getNodeName() === 'A') { |
| | | this._active = true; |
| | | $elem.addClass('w-e-active'); |
| | | } else { |
| | | this._active = false; |
| | | $elem.removeClass('w-e-active'); |
| | | } |
| | | } |
| | | }; |
| | | |
| | | /* |
| | | italic-menu |
| | | */ |
| | | // æé 彿° |
| | | function Italic(editor) { |
| | | this.editor = editor; |
| | | this.$elem = $('<div class="w-e-menu">\n <i class="w-e-icon-italic"></i>\n </div>'); |
| | | this.type = 'click'; |
| | | |
| | | // å½åæ¯å¦ active ç¶æ |
| | | this._active = false; |
| | | } |
| | | |
| | | // åå |
| | | Italic.prototype = { |
| | | constructor: Italic, |
| | | |
| | | // ç¹å»äºä»¶ |
| | | onClick: function onClick(e) { |
| | | // ç¹å»èåå°è§¦åè¿é |
| | | |
| | | var editor = this.editor; |
| | | var isSeleEmpty = editor.selection.isSelectionEmpty(); |
| | | |
| | | if (isSeleEmpty) { |
| | | // éåºæ¯ç©ºçï¼æå
¥å¹¶éä¸ä¸ä¸ªâ空ç½â |
| | | editor.selection.createEmptyRange(); |
| | | } |
| | | |
| | | // æ§è¡ italic å½ä»¤ |
| | | editor.cmd.do('italic'); |
| | | |
| | | if (isSeleEmpty) { |
| | | // éè¦å°éåæå èµ·æ¥ |
| | | editor.selection.collapseRange(); |
| | | editor.selection.restoreSelection(); |
| | | } |
| | | }, |
| | | |
| | | // è¯å¾æ¹å active ç¶æ |
| | | tryChangeActive: function tryChangeActive(e) { |
| | | var editor = this.editor; |
| | | var $elem = this.$elem; |
| | | if (editor.cmd.queryCommandState('italic')) { |
| | | this._active = true; |
| | | $elem.addClass('w-e-active'); |
| | | } else { |
| | | this._active = false; |
| | | $elem.removeClass('w-e-active'); |
| | | } |
| | | } |
| | | }; |
| | | |
| | | /* |
| | | redo-menu |
| | | */ |
| | | // æé 彿° |
| | | function Redo(editor) { |
| | | this.editor = editor; |
| | | this.$elem = $('<div class="w-e-menu">\n <i class="w-e-icon-redo"></i>\n </div>'); |
| | | this.type = 'click'; |
| | | |
| | | // å½åæ¯å¦ active ç¶æ |
| | | this._active = false; |
| | | } |
| | | |
| | | // åå |
| | | Redo.prototype = { |
| | | constructor: Redo, |
| | | |
| | | // ç¹å»äºä»¶ |
| | | onClick: function onClick(e) { |
| | | // ç¹å»èåå°è§¦åè¿é |
| | | |
| | | var editor = this.editor; |
| | | |
| | | // æ§è¡ redo å½ä»¤ |
| | | editor.cmd.do('redo'); |
| | | } |
| | | }; |
| | | |
| | | /* |
| | | strikeThrough-menu |
| | | */ |
| | | // æé 彿° |
| | | function StrikeThrough(editor) { |
| | | this.editor = editor; |
| | | this.$elem = $('<div class="w-e-menu">\n <i class="w-e-icon-strikethrough"></i>\n </div>'); |
| | | this.type = 'click'; |
| | | |
| | | // å½åæ¯å¦ active ç¶æ |
| | | this._active = false; |
| | | } |
| | | |
| | | // åå |
| | | StrikeThrough.prototype = { |
| | | constructor: StrikeThrough, |
| | | |
| | | // ç¹å»äºä»¶ |
| | | onClick: function onClick(e) { |
| | | // ç¹å»èåå°è§¦åè¿é |
| | | |
| | | var editor = this.editor; |
| | | var isSeleEmpty = editor.selection.isSelectionEmpty(); |
| | | |
| | | if (isSeleEmpty) { |
| | | // éåºæ¯ç©ºçï¼æå
¥å¹¶éä¸ä¸ä¸ªâ空ç½â |
| | | editor.selection.createEmptyRange(); |
| | | } |
| | | |
| | | // æ§è¡ strikeThrough å½ä»¤ |
| | | editor.cmd.do('strikeThrough'); |
| | | |
| | | if (isSeleEmpty) { |
| | | // éè¦å°éåæå èµ·æ¥ |
| | | editor.selection.collapseRange(); |
| | | editor.selection.restoreSelection(); |
| | | } |
| | | }, |
| | | |
| | | // è¯å¾æ¹å active ç¶æ |
| | | tryChangeActive: function tryChangeActive(e) { |
| | | var editor = this.editor; |
| | | var $elem = this.$elem; |
| | | if (editor.cmd.queryCommandState('strikeThrough')) { |
| | | this._active = true; |
| | | $elem.addClass('w-e-active'); |
| | | } else { |
| | | this._active = false; |
| | | $elem.removeClass('w-e-active'); |
| | | } |
| | | } |
| | | }; |
| | | |
| | | /* |
| | | underline-menu |
| | | */ |
| | | // æé 彿° |
| | | function Underline(editor) { |
| | | this.editor = editor; |
| | | this.$elem = $('<div class="w-e-menu">\n <i class="w-e-icon-underline"></i>\n </div>'); |
| | | this.type = 'click'; |
| | | |
| | | // å½åæ¯å¦ active ç¶æ |
| | | this._active = false; |
| | | } |
| | | |
| | | // åå |
| | | Underline.prototype = { |
| | | constructor: Underline, |
| | | |
| | | // ç¹å»äºä»¶ |
| | | onClick: function onClick(e) { |
| | | // ç¹å»èåå°è§¦åè¿é |
| | | |
| | | var editor = this.editor; |
| | | var isSeleEmpty = editor.selection.isSelectionEmpty(); |
| | | |
| | | if (isSeleEmpty) { |
| | | // éåºæ¯ç©ºçï¼æå
¥å¹¶éä¸ä¸ä¸ªâ空ç½â |
| | | editor.selection.createEmptyRange(); |
| | | } |
| | | |
| | | // æ§è¡ underline å½ä»¤ |
| | | editor.cmd.do('underline'); |
| | | |
| | | if (isSeleEmpty) { |
| | | // éè¦å°éåæå èµ·æ¥ |
| | | editor.selection.collapseRange(); |
| | | editor.selection.restoreSelection(); |
| | | } |
| | | }, |
| | | |
| | | // è¯å¾æ¹å active ç¶æ |
| | | tryChangeActive: function tryChangeActive(e) { |
| | | var editor = this.editor; |
| | | var $elem = this.$elem; |
| | | if (editor.cmd.queryCommandState('underline')) { |
| | | this._active = true; |
| | | $elem.addClass('w-e-active'); |
| | | } else { |
| | | this._active = false; |
| | | $elem.removeClass('w-e-active'); |
| | | } |
| | | } |
| | | }; |
| | | |
| | | /* |
| | | undo-menu |
| | | */ |
| | | // æé 彿° |
| | | function Undo(editor) { |
| | | this.editor = editor; |
| | | this.$elem = $('<div class="w-e-menu">\n <i class="w-e-icon-undo"></i>\n </div>'); |
| | | this.type = 'click'; |
| | | |
| | | // å½åæ¯å¦ active ç¶æ |
| | | this._active = false; |
| | | } |
| | | |
| | | // åå |
| | | Undo.prototype = { |
| | | constructor: Undo, |
| | | |
| | | // ç¹å»äºä»¶ |
| | | onClick: function onClick(e) { |
| | | // ç¹å»èåå°è§¦åè¿é |
| | | |
| | | var editor = this.editor; |
| | | |
| | | // æ§è¡ undo å½ä»¤ |
| | | editor.cmd.do('undo'); |
| | | } |
| | | }; |
| | | |
| | | /* |
| | | menu - list |
| | | */ |
| | | // æé 彿° |
| | | function List(editor) { |
| | | var _this = this; |
| | | |
| | | this.editor = editor; |
| | | this.$elem = $('<div class="w-e-menu"><i class="w-e-icon-list2"></i></div>'); |
| | | this.type = 'droplist'; |
| | | |
| | | // å½åæ¯å¦ active ç¶æ |
| | | this._active = false; |
| | | |
| | | // åå§å droplist |
| | | this.droplist = new DropList(this, { |
| | | width: 120, |
| | | $title: $('<p>设置å表</p>'), |
| | | type: 'list', // droplist 以å表形å¼å±ç¤º |
| | | list: [{ $elem: $('<span><i class="w-e-icon-list-numbered"></i> æåºå表</span>'), value: 'insertOrderedList' }, { $elem: $('<span><i class="w-e-icon-list2"></i> æ åºå表</span>'), value: 'insertUnorderedList' }], |
| | | onClick: function onClick(value) { |
| | | // 注æ this æ¯æåå½åç List 对象 |
| | | _this._command(value); |
| | | } |
| | | }); |
| | | } |
| | | |
| | | // åå |
| | | List.prototype = { |
| | | constructor: List, |
| | | |
| | | // æ§è¡å½ä»¤ |
| | | _command: function _command(value) { |
| | | var editor = this.editor; |
| | | var $textElem = editor.$textElem; |
| | | editor.selection.restoreSelection(); |
| | | if (editor.cmd.queryCommandState(value)) { |
| | | return; |
| | | } |
| | | editor.cmd.do(value); |
| | | |
| | | // éªè¯å表æ¯å¦è¢«å
è£¹å¨ <p> ä¹å
|
| | | var $selectionElem = editor.selection.getSelectionContainerElem(); |
| | | if ($selectionElem.getNodeName() === 'LI') { |
| | | $selectionElem = $selectionElem.parent(); |
| | | } |
| | | if (/^ol|ul$/i.test($selectionElem.getNodeName()) === false) { |
| | | return; |
| | | } |
| | | if ($selectionElem.equal($textElem)) { |
| | | // è¯ææ¯é¡¶çº§æ ç¾ï¼æ²¡æè¢« <p> å
裹 |
| | | return; |
| | | } |
| | | var $parent = $selectionElem.parent(); |
| | | if ($parent.equal($textElem)) { |
| | | // $parent æ¯é¡¶çº§æ ç¾ï¼ä¸è½å é¤ |
| | | return; |
| | | } |
| | | |
| | | $selectionElem.insertAfter($parent); |
| | | $parent.remove(); |
| | | }, |
| | | |
| | | // è¯å¾æ¹å active ç¶æ |
| | | tryChangeActive: function tryChangeActive(e) { |
| | | var editor = this.editor; |
| | | var $elem = this.$elem; |
| | | if (editor.cmd.queryCommandState('insertUnOrderedList') || editor.cmd.queryCommandState('insertOrderedList')) { |
| | | this._active = true; |
| | | $elem.addClass('w-e-active'); |
| | | } else { |
| | | this._active = false; |
| | | $elem.removeClass('w-e-active'); |
| | | } |
| | | } |
| | | }; |
| | | |
| | | /* |
| | | menu - justify |
| | | */ |
| | | // æé 彿° |
| | | function Justify(editor) { |
| | | var _this = this; |
| | | |
| | | this.editor = editor; |
| | | this.$elem = $('<div class="w-e-menu"><i class="w-e-icon-paragraph-left"></i></div>'); |
| | | this.type = 'droplist'; |
| | | |
| | | // å½åæ¯å¦ active ç¶æ |
| | | this._active = false; |
| | | |
| | | // åå§å droplist |
| | | this.droplist = new DropList(this, { |
| | | width: 100, |
| | | $title: $('<p>坹齿¹å¼</p>'), |
| | | type: 'list', // droplist 以å表形å¼å±ç¤º |
| | | list: [{ $elem: $('<span><i class="w-e-icon-paragraph-left"></i> é å·¦</span>'), value: 'justifyLeft' }, { $elem: $('<span><i class="w-e-icon-paragraph-center"></i> å±
ä¸</span>'), value: 'justifyCenter' }, { $elem: $('<span><i class="w-e-icon-paragraph-right"></i> é å³</span>'), value: 'justifyRight' }], |
| | | onClick: function onClick(value) { |
| | | // 注æ this æ¯æåå½åç List 对象 |
| | | _this._command(value); |
| | | } |
| | | }); |
| | | } |
| | | |
| | | // åå |
| | | Justify.prototype = { |
| | | constructor: Justify, |
| | | |
| | | // æ§è¡å½ä»¤ |
| | | _command: function _command(value) { |
| | | var editor = this.editor; |
| | | editor.cmd.do(value); |
| | | } |
| | | }; |
| | | |
| | | /* |
| | | menu - Forecolor |
| | | */ |
| | | // æé 彿° |
| | | function ForeColor(editor) { |
| | | var _this = this; |
| | | |
| | | this.editor = editor; |
| | | this.$elem = $('<div class="w-e-menu"><i class="w-e-icon-pencil2"></i></div>'); |
| | | this.type = 'droplist'; |
| | | |
| | | // è·åé
ç½®çé¢è² |
| | | var config = editor.config; |
| | | var colors = config.colors || []; |
| | | |
| | | // å½åæ¯å¦ active ç¶æ |
| | | this._active = false; |
| | | |
| | | // åå§å droplist |
| | | this.droplist = new DropList(this, { |
| | | width: 120, |
| | | $title: $('<p>æåé¢è²</p>'), |
| | | type: 'inline-block', // droplist å
容以 block å½¢å¼å±ç¤º |
| | | list: colors.map(function (color) { |
| | | return { $elem: $('<i style="color:' + color + ';" class="w-e-icon-pencil2"></i>'), value: color }; |
| | | }), |
| | | onClick: function onClick(value) { |
| | | // 注æ this æ¯æåå½åç ForeColor 对象 |
| | | _this._command(value); |
| | | } |
| | | }); |
| | | } |
| | | |
| | | // åå |
| | | ForeColor.prototype = { |
| | | constructor: ForeColor, |
| | | |
| | | // æ§è¡å½ä»¤ |
| | | _command: function _command(value) { |
| | | var editor = this.editor; |
| | | editor.cmd.do('foreColor', value); |
| | | } |
| | | }; |
| | | |
| | | /* |
| | | menu - BackColor |
| | | */ |
| | | // æé 彿° |
| | | function BackColor(editor) { |
| | | var _this = this; |
| | | |
| | | this.editor = editor; |
| | | this.$elem = $('<div class="w-e-menu"><i class="w-e-icon-paint-brush"></i></div>'); |
| | | this.type = 'droplist'; |
| | | |
| | | // è·åé
ç½®çé¢è² |
| | | var config = editor.config; |
| | | var colors = config.colors || []; |
| | | |
| | | // å½åæ¯å¦ active ç¶æ |
| | | this._active = false; |
| | | |
| | | // åå§å droplist |
| | | this.droplist = new DropList(this, { |
| | | width: 120, |
| | | $title: $('<p>èæ¯è²</p>'), |
| | | type: 'inline-block', // droplist å
容以 block å½¢å¼å±ç¤º |
| | | list: colors.map(function (color) { |
| | | return { $elem: $('<i style="color:' + color + ';" class="w-e-icon-paint-brush"></i>'), value: color }; |
| | | }), |
| | | onClick: function onClick(value) { |
| | | // 注æ this æ¯æåå½åç BackColor 对象 |
| | | _this._command(value); |
| | | } |
| | | }); |
| | | } |
| | | |
| | | // åå |
| | | BackColor.prototype = { |
| | | constructor: BackColor, |
| | | |
| | | // æ§è¡å½ä»¤ |
| | | _command: function _command(value) { |
| | | var editor = this.editor; |
| | | editor.cmd.do('backColor', value); |
| | | } |
| | | }; |
| | | |
| | | /* |
| | | menu - quote |
| | | */ |
| | | // æé 彿° |
| | | function Quote(editor) { |
| | | this.editor = editor; |
| | | this.$elem = $('<div class="w-e-menu">\n <i class="w-e-icon-quotes-left"></i>\n </div>'); |
| | | this.type = 'click'; |
| | | |
| | | // å½åæ¯å¦ active ç¶æ |
| | | this._active = false; |
| | | } |
| | | |
| | | // åå |
| | | Quote.prototype = { |
| | | constructor: Quote, |
| | | |
| | | onClick: function onClick(e) { |
| | | var editor = this.editor; |
| | | var $selectionElem = editor.selection.getSelectionContainerElem(); |
| | | var nodeName = $selectionElem.getNodeName(); |
| | | |
| | | if (!UA.isIE()) { |
| | | if (nodeName === 'BLOCKQUOTE') { |
| | | // æ¤é quote |
| | | editor.cmd.do('formatBlock', '<P>'); |
| | | } else { |
| | | // 转æ¢ä¸º quote |
| | | editor.cmd.do('formatBlock', '<BLOCKQUOTE>'); |
| | | } |
| | | return; |
| | | } |
| | | |
| | | // IE ä¸ä¸æ¯æ formatBlock <BLOCKQUOTE> ï¼è¦ç¨å
¶ä»æ¹å¼å
¼å®¹ |
| | | var content = void 0, |
| | | $targetELem = void 0; |
| | | if (nodeName === 'P') { |
| | | // å° P 转æ¢ä¸º quote |
| | | content = $selectionElem.text(); |
| | | $targetELem = $('<blockquote>' + content + '</blockquote>'); |
| | | $targetELem.insertAfter($selectionElem); |
| | | $selectionElem.remove(); |
| | | return; |
| | | } |
| | | if (nodeName === 'BLOCKQUOTE') { |
| | | // æ¤é quote |
| | | content = $selectionElem.text(); |
| | | $targetELem = $('<p>' + content + '</p>'); |
| | | $targetELem.insertAfter($selectionElem); |
| | | $selectionElem.remove(); |
| | | } |
| | | }, |
| | | |
| | | tryChangeActive: function tryChangeActive(e) { |
| | | var editor = this.editor; |
| | | var $elem = this.$elem; |
| | | var reg = /^BLOCKQUOTE$/i; |
| | | var cmdValue = editor.cmd.queryCommandValue('formatBlock'); |
| | | if (reg.test(cmdValue)) { |
| | | this._active = true; |
| | | $elem.addClass('w-e-active'); |
| | | } else { |
| | | this._active = false; |
| | | $elem.removeClass('w-e-active'); |
| | | } |
| | | } |
| | | }; |
| | | |
| | | /* |
| | | menu - code |
| | | */ |
| | | // æé 彿° |
| | | function Code(editor) { |
| | | this.editor = editor; |
| | | this.$elem = $('<div class="w-e-menu">\n <i class="w-e-icon-terminal"></i>\n </div>'); |
| | | this.type = 'panel'; |
| | | |
| | | // å½åæ¯å¦ active ç¶æ |
| | | this._active = false; |
| | | } |
| | | |
| | | // åå |
| | | Code.prototype = { |
| | | constructor: Code, |
| | | |
| | | onClick: function onClick(e) { |
| | | var editor = this.editor; |
| | | var $startElem = editor.selection.getSelectionStartElem(); |
| | | var $endElem = editor.selection.getSelectionEndElem(); |
| | | var isSeleEmpty = editor.selection.isSelectionEmpty(); |
| | | var selectionText = editor.selection.getSelectionText(); |
| | | var $code = void 0; |
| | | |
| | | if (!$startElem.equal($endElem)) { |
| | | // è·¨å
ç´ éæ©ï¼ä¸åå¤ç |
| | | editor.selection.restoreSelection(); |
| | | return; |
| | | } |
| | | if (!isSeleEmpty) { |
| | | // éå䏿¯ç©ºï¼ç¨ <code> å
裹å³å¯ |
| | | $code = $('<code>' + selectionText + '</code>'); |
| | | editor.cmd.do('insertElem', $code); |
| | | editor.selection.createRangeByElem($code, false); |
| | | editor.selection.restoreSelection(); |
| | | return; |
| | | } |
| | | |
| | | // éåæ¯ç©ºï¼ä¸æ²¡æå¤¸å
ç´ éæ©ï¼åæå
¥ <pre><code></code></prev> |
| | | if (this._active) { |
| | | // éä¸ç¶æï¼å°ç¼è¾å
容 |
| | | this._createPanel($startElem.html()); |
| | | } else { |
| | | // æªéä¸ç¶æï¼å°å建å
容 |
| | | this._createPanel(); |
| | | } |
| | | }, |
| | | |
| | | _createPanel: function _createPanel(value) { |
| | | var _this = this; |
| | | |
| | | // value - è¦ç¼è¾çå
容 |
| | | value = value || ''; |
| | | var type = !value ? 'new' : 'edit'; |
| | | var textId = getRandom('texxt'); |
| | | var btnId = getRandom('btn'); |
| | | |
| | | var panel = new Panel(this, { |
| | | width: 500, |
| | | // ä¸ä¸ª Panel å
å«å¤ä¸ª tab |
| | | tabs: [{ |
| | | // æ é¢ |
| | | title: 'æå
¥ä»£ç ', |
| | | // æ¨¡æ¿ |
| | | tpl: '<div>\n <textarea id="' + textId + '" style="height:145px;;">' + value + '</textarea>\n <div class="w-e-button-container">\n <button id="' + btnId + '" class="right">\u63D2\u5165</button>\n </div>\n <div>', |
| | | // äºä»¶ç»å® |
| | | events: [ |
| | | // æå
¥ä»£ç |
| | | { |
| | | selector: '#' + btnId, |
| | | type: 'click', |
| | | fn: function fn() { |
| | | var $text = $('#' + textId); |
| | | var text = $text.val() || $text.html(); |
| | | text = replaceHtmlSymbol(text); |
| | | if (type === 'new') { |
| | | // æ°æå
¥ |
| | | _this._insertCode(text); |
| | | } else { |
| | | // ç¼è¾æ´æ° |
| | | _this._updateCode(text); |
| | | } |
| | | |
| | | // è¿å trueï¼è¡¨ç¤ºè¯¥äºä»¶æ§è¡å®ä¹åï¼panel è¦å
³éãå¦å panel ä¸ä¼å
³é |
| | | return true; |
| | | } |
| | | }] |
| | | } // first tab end |
| | | ] // tabs end |
| | | }); // new Panel end |
| | | |
| | | // æ¾ç¤º panel |
| | | panel.show(); |
| | | |
| | | // è®°å½å±æ§ |
| | | this.panel = panel; |
| | | }, |
| | | |
| | | // æå
¥ä»£ç |
| | | _insertCode: function _insertCode(value) { |
| | | var editor = this.editor; |
| | | editor.cmd.do('insertHTML', '<pre><code>' + value + '</code></pre><p><br></p>'); |
| | | }, |
| | | |
| | | // æ´æ°ä»£ç |
| | | _updateCode: function _updateCode(value) { |
| | | var editor = this.editor; |
| | | var $selectionELem = editor.selection.getSelectionContainerElem(); |
| | | if (!$selectionELem) { |
| | | return; |
| | | } |
| | | $selectionELem.html(value); |
| | | editor.selection.restoreSelection(); |
| | | }, |
| | | |
| | | // è¯å¾æ¹å active ç¶æ |
| | | tryChangeActive: function tryChangeActive(e) { |
| | | var editor = this.editor; |
| | | var $elem = this.$elem; |
| | | var $selectionELem = editor.selection.getSelectionContainerElem(); |
| | | if (!$selectionELem) { |
| | | return; |
| | | } |
| | | var $parentElem = $selectionELem.parent(); |
| | | if ($selectionELem.getNodeName() === 'CODE' && $parentElem.getNodeName() === 'PRE') { |
| | | this._active = true; |
| | | $elem.addClass('w-e-active'); |
| | | } else { |
| | | this._active = false; |
| | | $elem.removeClass('w-e-active'); |
| | | } |
| | | } |
| | | }; |
| | | |
| | | /* |
| | | menu - emoticon |
| | | */ |
| | | // æé 彿° |
| | | function Emoticon(editor) { |
| | | this.editor = editor; |
| | | this.$elem = $('<div class="w-e-menu">\n <i class="w-e-icon-happy"></i>\n </div>'); |
| | | this.type = 'panel'; |
| | | |
| | | // å½åæ¯å¦ active ç¶æ |
| | | this._active = false; |
| | | } |
| | | |
| | | // åå |
| | | Emoticon.prototype = { |
| | | constructor: Emoticon, |
| | | |
| | | onClick: function onClick() { |
| | | this._createPanel(); |
| | | }, |
| | | |
| | | _createPanel: function _createPanel() { |
| | | var _this = this; |
| | | |
| | | var editor = this.editor; |
| | | var config = editor.config; |
| | | // è·å表æ
é
ç½® |
| | | var emotions = config.emotions || []; |
| | | |
| | | // å建表æ
dropPanel çé
ç½® |
| | | var tabConfig = []; |
| | | emotions.forEach(function (emotData) { |
| | | var emotType = emotData.type; |
| | | var content = emotData.content || []; |
| | | |
| | | // è¿ä¸ç»è¡¨æ
æç»æ¼æ¥åºæ¥ç html |
| | | var faceHtml = ''; |
| | | |
| | | // emoji 表æ
|
| | | if (emotType === 'emoji') { |
| | | content.forEach(function (item) { |
| | | if (item) { |
| | | faceHtml += '<span class="w-e-item">' + item + '</span>'; |
| | | } |
| | | }); |
| | | } |
| | | // å¾ç表æ
|
| | | if (emotType === 'image') { |
| | | content.forEach(function (item) { |
| | | var src = item.src; |
| | | var alt = item.alt; |
| | | if (src) { |
| | | // å ä¸ä¸ª data-w-e 屿§ï¼ç¹å»å¾ççæ¶åä¸åæç¤ºç¼è¾å¾ç |
| | | faceHtml += '<span class="w-e-item"><img src="' + src + '" alt="' + alt + '" data-w-e="1"/></span>'; |
| | | } |
| | | }); |
| | | } |
| | | |
| | | tabConfig.push({ |
| | | title: emotData.title, |
| | | tpl: '<div class="w-e-emoticon-container">' + faceHtml + '</div>', |
| | | events: [{ |
| | | selector: 'span.w-e-item', |
| | | type: 'click', |
| | | fn: function fn(e) { |
| | | var target = e.target; |
| | | var $target = $(target); |
| | | var nodeName = $target.getNodeName(); |
| | | |
| | | var insertHtml = void 0; |
| | | if (nodeName === 'IMG') { |
| | | // æå
¥å¾ç |
| | | insertHtml = $target.parent().html(); |
| | | } else { |
| | | // æå
¥ emoji |
| | | insertHtml = '<span>' + $target.html() + '</span>'; |
| | | } |
| | | |
| | | _this._insert(insertHtml); |
| | | // è¿å trueï¼è¡¨ç¤ºè¯¥äºä»¶æ§è¡å®ä¹åï¼panel è¦å
³éãå¦å panel ä¸ä¼å
³é |
| | | return true; |
| | | } |
| | | }] |
| | | }); |
| | | }); |
| | | |
| | | var panel = new Panel(this, { |
| | | width: 300, |
| | | height: 200, |
| | | // ä¸ä¸ª Panel å
å«å¤ä¸ª tab |
| | | tabs: tabConfig |
| | | }); |
| | | |
| | | // æ¾ç¤º panel |
| | | panel.show(); |
| | | |
| | | // è®°å½å±æ§ |
| | | this.panel = panel; |
| | | }, |
| | | |
| | | // æå
¥è¡¨æ
|
| | | _insert: function _insert(emotHtml) { |
| | | var editor = this.editor; |
| | | editor.cmd.do('insertHTML', emotHtml); |
| | | } |
| | | }; |
| | | |
| | | /* |
| | | menu - table |
| | | */ |
| | | // æé 彿° |
| | | function Table(editor) { |
| | | this.editor = editor; |
| | | this.$elem = $('<div class="w-e-menu"><i class="w-e-icon-table2"></i></div>'); |
| | | this.type = 'panel'; |
| | | |
| | | // å½åæ¯å¦ active ç¶æ |
| | | this._active = false; |
| | | } |
| | | |
| | | // åå |
| | | Table.prototype = { |
| | | constructor: Table, |
| | | |
| | | onClick: function onClick() { |
| | | if (this._active) { |
| | | // ç¼è¾ç°æè¡¨æ ¼ |
| | | this._createEditPanel(); |
| | | } else { |
| | | // æå
¥æ°è¡¨æ ¼ |
| | | this._createInsertPanel(); |
| | | } |
| | | }, |
| | | |
| | | // å建æå
¥æ°è¡¨æ ¼ç panel |
| | | _createInsertPanel: function _createInsertPanel() { |
| | | var _this = this; |
| | | |
| | | // ç¨å°ç id |
| | | var btnInsertId = getRandom('btn'); |
| | | var textRowNum = getRandom('row'); |
| | | var textColNum = getRandom('col'); |
| | | |
| | | var panel = new Panel(this, { |
| | | width: 250, |
| | | // panel å
å«å¤ä¸ª tab |
| | | tabs: [{ |
| | | // æ é¢ |
| | | title: 'æå
¥è¡¨æ ¼', |
| | | // æ¨¡æ¿ |
| | | tpl: '<div>\n <p style="text-align:left; padding:5px 0;">\n \u521B\u5EFA\n <input id="' + textRowNum + '" type="text" value="5" style="width:40px;text-align:center;"/>\n \u884C\n <input id="' + textColNum + '" type="text" value="5" style="width:40px;text-align:center;"/>\n \u5217\u7684\u8868\u683C\n </p>\n <div class="w-e-button-container">\n <button id="' + btnInsertId + '" class="right">\u63D2\u5165</button>\n </div>\n </div>', |
| | | // äºä»¶ç»å® |
| | | events: [{ |
| | | // ç¹å»æé®ï¼æå
¥è¡¨æ ¼ |
| | | selector: '#' + btnInsertId, |
| | | type: 'click', |
| | | fn: function fn() { |
| | | var rowNum = parseInt($('#' + textRowNum).val()); |
| | | var colNum = parseInt($('#' + textColNum).val()); |
| | | |
| | | if (rowNum && colNum && rowNum > 0 && colNum > 0) { |
| | | // form æ°æ®ææ |
| | | _this._insert(rowNum, colNum); |
| | | } |
| | | |
| | | // è¿å trueï¼è¡¨ç¤ºè¯¥äºä»¶æ§è¡å®ä¹åï¼panel è¦å
³éãå¦å panel ä¸ä¼å
³é |
| | | return true; |
| | | } |
| | | }] |
| | | } // first tab end |
| | | ] // tabs end |
| | | }); // panel end |
| | | |
| | | // å±ç¤º panel |
| | | panel.show(); |
| | | |
| | | // è®°å½å±æ§ |
| | | this.panel = panel; |
| | | }, |
| | | |
| | | // æå
¥è¡¨æ ¼ |
| | | _insert: function _insert(rowNum, colNum) { |
| | | // æ¼æ¥ table æ¨¡æ¿ |
| | | var r = void 0, |
| | | c = void 0; |
| | | var html = '<table border="0" width="100%" cellpadding="0" cellspacing="0">'; |
| | | for (r = 0; r < rowNum; r++) { |
| | | html += '<tr>'; |
| | | if (r === 0) { |
| | | for (c = 0; c < colNum; c++) { |
| | | html += '<th> </th>'; |
| | | } |
| | | } else { |
| | | for (c = 0; c < colNum; c++) { |
| | | html += '<td> </td>'; |
| | | } |
| | | } |
| | | html += '</tr>'; |
| | | } |
| | | html += '</table><p><br></p>'; |
| | | |
| | | // æ§è¡å½ä»¤ |
| | | var editor = this.editor; |
| | | editor.cmd.do('insertHTML', html); |
| | | |
| | | // 鲿¢ firefox ä¸åºç° resize çæ§å¶ç¹ |
| | | editor.cmd.do('enableObjectResizing', false); |
| | | editor.cmd.do('enableInlineTableEditing', false); |
| | | }, |
| | | |
| | | // å建ç¼è¾è¡¨æ ¼ç panel |
| | | _createEditPanel: function _createEditPanel() { |
| | | var _this2 = this; |
| | | |
| | | // å¯ç¨ç id |
| | | var addRowBtnId = getRandom('add-row'); |
| | | var addColBtnId = getRandom('add-col'); |
| | | var delRowBtnId = getRandom('del-row'); |
| | | var delColBtnId = getRandom('del-col'); |
| | | var delTableBtnId = getRandom('del-table'); |
| | | |
| | | // å建 panel 对象 |
| | | var panel = new Panel(this, { |
| | | width: 320, |
| | | // panel å
å«å¤ä¸ª tab |
| | | tabs: [{ |
| | | // æ é¢ |
| | | title: 'ç¼è¾è¡¨æ ¼', |
| | | // æ¨¡æ¿ |
| | | tpl: '<div>\n <div class="w-e-button-container" style="border-bottom:1px solid #f1f1f1;padding-bottom:5px;margin-bottom:5px;">\n <button id="' + addRowBtnId + '" class="left">\u589E\u52A0\u884C</button>\n <button id="' + delRowBtnId + '" class="red left">\u5220\u9664\u884C</button>\n <button id="' + addColBtnId + '" class="left">\u589E\u52A0\u5217</button>\n <button id="' + delColBtnId + '" class="red left">\u5220\u9664\u5217</button>\n </div>\n <div class="w-e-button-container">\n <button id="' + delTableBtnId + '" class="gray left">\u5220\u9664\u8868\u683C</button>\n </dv>\n </div>', |
| | | // äºä»¶ç»å® |
| | | events: [{ |
| | | // å¢å è¡ |
| | | selector: '#' + addRowBtnId, |
| | | type: 'click', |
| | | fn: function fn() { |
| | | _this2._addRow(); |
| | | // è¿å trueï¼è¡¨ç¤ºè¯¥äºä»¶æ§è¡å®ä¹åï¼panel è¦å
³éãå¦å panel ä¸ä¼å
³é |
| | | return true; |
| | | } |
| | | }, { |
| | | // å¢å å |
| | | selector: '#' + addColBtnId, |
| | | type: 'click', |
| | | fn: function fn() { |
| | | _this2._addCol(); |
| | | // è¿å trueï¼è¡¨ç¤ºè¯¥äºä»¶æ§è¡å®ä¹åï¼panel è¦å
³éãå¦å panel ä¸ä¼å
³é |
| | | return true; |
| | | } |
| | | }, { |
| | | // å é¤è¡ |
| | | selector: '#' + delRowBtnId, |
| | | type: 'click', |
| | | fn: function fn() { |
| | | _this2._delRow(); |
| | | // è¿å trueï¼è¡¨ç¤ºè¯¥äºä»¶æ§è¡å®ä¹åï¼panel è¦å
³éãå¦å panel ä¸ä¼å
³é |
| | | return true; |
| | | } |
| | | }, { |
| | | // å é¤å |
| | | selector: '#' + delColBtnId, |
| | | type: 'click', |
| | | fn: function fn() { |
| | | _this2._delCol(); |
| | | // è¿å trueï¼è¡¨ç¤ºè¯¥äºä»¶æ§è¡å®ä¹åï¼panel è¦å
³éãå¦å panel ä¸ä¼å
³é |
| | | return true; |
| | | } |
| | | }, { |
| | | // å é¤è¡¨æ ¼ |
| | | selector: '#' + delTableBtnId, |
| | | type: 'click', |
| | | fn: function fn() { |
| | | _this2._delTable(); |
| | | // è¿å trueï¼è¡¨ç¤ºè¯¥äºä»¶æ§è¡å®ä¹åï¼panel è¦å
³éãå¦å panel ä¸ä¼å
³é |
| | | return true; |
| | | } |
| | | }] |
| | | }] |
| | | }); |
| | | // æ¾ç¤º panel |
| | | panel.show(); |
| | | }, |
| | | |
| | | // è·åéä¸çåå
æ ¼çä½ç½®ä¿¡æ¯ |
| | | _getLocationData: function _getLocationData() { |
| | | var result = {}; |
| | | var editor = this.editor; |
| | | var $selectionELem = editor.selection.getSelectionContainerElem(); |
| | | if (!$selectionELem) { |
| | | return; |
| | | } |
| | | var nodeName = $selectionELem.getNodeName(); |
| | | if (nodeName !== 'TD' && nodeName !== 'TH') { |
| | | return; |
| | | } |
| | | |
| | | // è·å td index |
| | | var $tr = $selectionELem.parent(); |
| | | var $tds = $tr.children(); |
| | | var tdLength = $tds.length; |
| | | $tds.forEach(function (td, index) { |
| | | if (td === $selectionELem[0]) { |
| | | // è®°å½å¹¶è·³åºå¾ªç¯ |
| | | result.td = { |
| | | index: index, |
| | | elem: td, |
| | | length: tdLength |
| | | }; |
| | | return false; |
| | | } |
| | | }); |
| | | |
| | | // è·å tr index |
| | | var $tbody = $tr.parent(); |
| | | var $trs = $tbody.children(); |
| | | var trLength = $trs.length; |
| | | $trs.forEach(function (tr, index) { |
| | | if (tr === $tr[0]) { |
| | | // è®°å½å¹¶è·³åºå¾ªç¯ |
| | | result.tr = { |
| | | index: index, |
| | | elem: tr, |
| | | length: trLength |
| | | }; |
| | | return false; |
| | | } |
| | | }); |
| | | |
| | | // è¿åç»æ |
| | | return result; |
| | | }, |
| | | |
| | | // å¢å è¡ |
| | | _addRow: function _addRow() { |
| | | // è·åå½ååå
æ ¼çä½ç½®ä¿¡æ¯ |
| | | var locationData = this._getLocationData(); |
| | | if (!locationData) { |
| | | return; |
| | | } |
| | | var trData = locationData.tr; |
| | | var $currentTr = $(trData.elem); |
| | | var tdData = locationData.td; |
| | | var tdLength = tdData.length; |
| | | |
| | | // æ¼æ¥å³å°æå
¥çå符串 |
| | | var newTr = document.createElement('tr'); |
| | | var tpl = '', |
| | | i = void 0; |
| | | for (i = 0; i < tdLength; i++) { |
| | | tpl += '<td> </td>'; |
| | | } |
| | | newTr.innerHTML = tpl; |
| | | // æå
¥ |
| | | $(newTr).insertAfter($currentTr); |
| | | }, |
| | | |
| | | // å¢å å |
| | | _addCol: function _addCol() { |
| | | // è·åå½ååå
æ ¼çä½ç½®ä¿¡æ¯ |
| | | var locationData = this._getLocationData(); |
| | | if (!locationData) { |
| | | return; |
| | | } |
| | | var trData = locationData.tr; |
| | | var tdData = locationData.td; |
| | | var tdIndex = tdData.index; |
| | | var $currentTr = $(trData.elem); |
| | | var $trParent = $currentTr.parent(); |
| | | var $trs = $trParent.children(); |
| | | |
| | | // éåææè¡ |
| | | $trs.forEach(function (tr) { |
| | | var $tr = $(tr); |
| | | var $tds = $tr.children(); |
| | | var $currentTd = $tds.get(tdIndex); |
| | | var name = $currentTd.getNodeName().toLowerCase(); |
| | | |
| | | // new ä¸ä¸ª tdï¼å¹¶æå
¥ |
| | | var newTd = document.createElement(name); |
| | | $(newTd).insertAfter($currentTd); |
| | | }); |
| | | }, |
| | | |
| | | // å é¤è¡ |
| | | _delRow: function _delRow() { |
| | | // è·åå½ååå
æ ¼çä½ç½®ä¿¡æ¯ |
| | | var locationData = this._getLocationData(); |
| | | if (!locationData) { |
| | | return; |
| | | } |
| | | var trData = locationData.tr; |
| | | var $currentTr = $(trData.elem); |
| | | $currentTr.remove(); |
| | | }, |
| | | |
| | | // å é¤å |
| | | _delCol: function _delCol() { |
| | | // è·åå½ååå
æ ¼çä½ç½®ä¿¡æ¯ |
| | | var locationData = this._getLocationData(); |
| | | if (!locationData) { |
| | | return; |
| | | } |
| | | var trData = locationData.tr; |
| | | var tdData = locationData.td; |
| | | var tdIndex = tdData.index; |
| | | var $currentTr = $(trData.elem); |
| | | var $trParent = $currentTr.parent(); |
| | | var $trs = $trParent.children(); |
| | | |
| | | // éåææè¡ |
| | | $trs.forEach(function (tr) { |
| | | var $tr = $(tr); |
| | | var $tds = $tr.children(); |
| | | var $currentTd = $tds.get(tdIndex); |
| | | // å é¤ |
| | | $currentTd.remove(); |
| | | }); |
| | | }, |
| | | |
| | | // å é¤è¡¨æ ¼ |
| | | _delTable: function _delTable() { |
| | | var editor = this.editor; |
| | | var $selectionELem = editor.selection.getSelectionContainerElem(); |
| | | if (!$selectionELem) { |
| | | return; |
| | | } |
| | | var $table = $selectionELem.parentUntil('table'); |
| | | if (!$table) { |
| | | return; |
| | | } |
| | | $table.remove(); |
| | | }, |
| | | |
| | | // è¯å¾æ¹å active ç¶æ |
| | | tryChangeActive: function tryChangeActive(e) { |
| | | var editor = this.editor; |
| | | var $elem = this.$elem; |
| | | var $selectionELem = editor.selection.getSelectionContainerElem(); |
| | | if (!$selectionELem) { |
| | | return; |
| | | } |
| | | var nodeName = $selectionELem.getNodeName(); |
| | | if (nodeName === 'TD' || nodeName === 'TH') { |
| | | this._active = true; |
| | | $elem.addClass('w-e-active'); |
| | | } else { |
| | | this._active = false; |
| | | $elem.removeClass('w-e-active'); |
| | | } |
| | | } |
| | | }; |
| | | |
| | | /* |
| | | menu - video |
| | | */ |
| | | // æé 彿° |
| | | function Video(editor) { |
| | | this.editor = editor; |
| | | this.$elem = $('<div class="w-e-menu"><i class="w-e-icon-play"></i></div>'); |
| | | this.type = 'panel'; |
| | | |
| | | // å½åæ¯å¦ active ç¶æ |
| | | this._active = false; |
| | | } |
| | | |
| | | // åå |
| | | Video.prototype = { |
| | | constructor: Video, |
| | | |
| | | onClick: function onClick() { |
| | | this._createPanel(); |
| | | }, |
| | | |
| | | _createPanel: function _createPanel() { |
| | | var _this = this; |
| | | |
| | | // å建 id |
| | | var textValId = getRandom('text-val'); |
| | | var btnId = getRandom('btn'); |
| | | |
| | | // å建 panel |
| | | var panel = new Panel(this, { |
| | | width: 350, |
| | | // ä¸ä¸ª panel å¤ä¸ª tab |
| | | tabs: [{ |
| | | // æ é¢ |
| | | title: 'æå
¥è§é¢', |
| | | // æ¨¡æ¿ |
| | | tpl: '<div>\n <input id="' + textValId + '" type="text" class="block" placeholder="\u683C\u5F0F\u5982\uFF1A<iframe src=... ></iframe>"/>\n <div class="w-e-button-container">\n <button id="' + btnId + '" class="right">\u63D2\u5165</button>\n </div>\n </div>', |
| | | // äºä»¶ç»å® |
| | | events: [{ |
| | | selector: '#' + btnId, |
| | | type: 'click', |
| | | fn: function fn() { |
| | | var $text = $('#' + textValId); |
| | | var val = $text.val().trim(); |
| | | |
| | | // æµè¯ç¨è§é¢å°å |
| | | // <iframe height=498 width=510 src='http://player.youku.com/embed/XMjcwMzc3MzM3Mg==' frameborder=0 'allowfullscreen'></iframe> |
| | | |
| | | if (val) { |
| | | // æå
¥è§é¢ |
| | | _this._insert(val); |
| | | } |
| | | |
| | | // è¿å trueï¼è¡¨ç¤ºè¯¥äºä»¶æ§è¡å®ä¹åï¼panel è¦å
³éãå¦å panel ä¸ä¼å
³é |
| | | return true; |
| | | } |
| | | }] |
| | | } // first tab end |
| | | ] // tabs end |
| | | }); // panel end |
| | | |
| | | // æ¾ç¤º panel |
| | | panel.show(); |
| | | |
| | | // è®°å½å±æ§ |
| | | this.panel = panel; |
| | | }, |
| | | |
| | | // æå
¥è§é¢ |
| | | _insert: function _insert(val) { |
| | | var editor = this.editor; |
| | | editor.cmd.do('insertHTML', val + '<p><br></p>'); |
| | | } |
| | | }; |
| | | |
| | | /* |
| | | menu - img |
| | | */ |
| | | // æé 彿° |
| | | function Image(editor) { |
| | | this.editor = editor; |
| | | var imgMenuId = getRandom('w-e-img'); |
| | | this.$elem = $('<div class="w-e-menu" id="' + imgMenuId + '"><i class="w-e-icon-image"></i></div>'); |
| | | editor.imgMenuId = imgMenuId; |
| | | this.type = 'panel'; |
| | | |
| | | // å½åæ¯å¦ active ç¶æ |
| | | this._active = false; |
| | | } |
| | | |
| | | // åå |
| | | Image.prototype = { |
| | | constructor: Image, |
| | | |
| | | onClick: function onClick() { |
| | | var editor = this.editor; |
| | | var config = editor.config; |
| | | if (config.qiniu) { |
| | | return; |
| | | } |
| | | if (this._active) { |
| | | this._createEditPanel(); |
| | | } else { |
| | | this._createInsertPanel(); |
| | | } |
| | | }, |
| | | |
| | | _createEditPanel: function _createEditPanel() { |
| | | var editor = this.editor; |
| | | |
| | | // id |
| | | var width30 = getRandom('width-30'); |
| | | var width50 = getRandom('width-50'); |
| | | var width100 = getRandom('width-100'); |
| | | var delBtn = getRandom('del-btn'); |
| | | |
| | | // tab é
ç½® |
| | | var tabsConfig = [{ |
| | | title: 'ç¼è¾å¾ç', |
| | | tpl: '<div>\n <div class="w-e-button-container" style="border-bottom:1px solid #f1f1f1;padding-bottom:5px;margin-bottom:5px;">\n <span style="float:left;font-size:14px;margin:4px 5px 0 5px;color:#333;">\u6700\u5927\u5BBD\u5EA6\uFF1A</span>\n <button id="' + width30 + '" class="left">30%</button>\n <button id="' + width50 + '" class="left">50%</button>\n <button id="' + width100 + '" class="left">100%</button>\n </div>\n <div class="w-e-button-container">\n <button id="' + delBtn + '" class="gray left">\u5220\u9664\u56FE\u7247</button>\n </dv>\n </div>', |
| | | events: [{ |
| | | selector: '#' + width30, |
| | | type: 'click', |
| | | fn: function fn() { |
| | | var $img = editor._selectedImg; |
| | | if ($img) { |
| | | $img.css('max-width', '30%'); |
| | | } |
| | | // è¿å trueï¼è¡¨ç¤ºè¯¥äºä»¶æ§è¡å®ä¹åï¼panel è¦å
³éãå¦å panel ä¸ä¼å
³é |
| | | return true; |
| | | } |
| | | }, { |
| | | selector: '#' + width50, |
| | | type: 'click', |
| | | fn: function fn() { |
| | | var $img = editor._selectedImg; |
| | | if ($img) { |
| | | $img.css('max-width', '50%'); |
| | | } |
| | | // è¿å trueï¼è¡¨ç¤ºè¯¥äºä»¶æ§è¡å®ä¹åï¼panel è¦å
³éãå¦å panel ä¸ä¼å
³é |
| | | return true; |
| | | } |
| | | }, { |
| | | selector: '#' + width100, |
| | | type: 'click', |
| | | fn: function fn() { |
| | | var $img = editor._selectedImg; |
| | | if ($img) { |
| | | $img.css('max-width', '100%'); |
| | | } |
| | | // è¿å trueï¼è¡¨ç¤ºè¯¥äºä»¶æ§è¡å®ä¹åï¼panel è¦å
³éãå¦å panel ä¸ä¼å
³é |
| | | return true; |
| | | } |
| | | }, { |
| | | selector: '#' + delBtn, |
| | | type: 'click', |
| | | fn: function fn() { |
| | | var $img = editor._selectedImg; |
| | | if ($img) { |
| | | $img.remove(); |
| | | } |
| | | // è¿å trueï¼è¡¨ç¤ºè¯¥äºä»¶æ§è¡å®ä¹åï¼panel è¦å
³éãå¦å panel ä¸ä¼å
³é |
| | | return true; |
| | | } |
| | | }] |
| | | }]; |
| | | |
| | | // å建 panel å¹¶æ¾ç¤º |
| | | var panel = new Panel(this, { |
| | | width: 300, |
| | | tabs: tabsConfig |
| | | }); |
| | | panel.show(); |
| | | |
| | | // è®°å½å±æ§ |
| | | this.panel = panel; |
| | | }, |
| | | |
| | | _createInsertPanel: function _createInsertPanel() { |
| | | var editor = this.editor; |
| | | var uploadImg = editor.uploadImg; |
| | | var config = editor.config; |
| | | |
| | | // id |
| | | var upTriggerId = getRandom('up-trigger'); |
| | | var upFileId = getRandom('up-file'); |
| | | var linkUrlId = getRandom('link-url'); |
| | | var linkBtnId = getRandom('link-btn'); |
| | | |
| | | // tabs çé
ç½® |
| | | var tabsConfig = [{ |
| | | title: 'ä¸ä¼ å¾ç', |
| | | tpl: '<div class="w-e-up-img-container">\n <div id="' + upTriggerId + '" class="w-e-up-btn">\n <i class="w-e-icon-upload2"></i>\n </div>\n <div style="display:none;">\n <input id="' + upFileId + '" type="file" multiple="multiple" accept="image/jpg,image/jpeg,image/png,image/gif,image/bmp"/>\n </div>\n </div>', |
| | | events: [{ |
| | | // 触åéæ©å¾ç |
| | | selector: '#' + upTriggerId, |
| | | type: 'click', |
| | | fn: function fn() { |
| | | var $file = $('#' + upFileId); |
| | | var fileElem = $file[0]; |
| | | if (fileElem) { |
| | | fileElem.click(); |
| | | } else { |
| | | // è¿å true å¯å
³é panel |
| | | return true; |
| | | } |
| | | } |
| | | }, { |
| | | // éæ©å¾ç宿¯ |
| | | selector: '#' + upFileId, |
| | | type: 'change', |
| | | fn: function fn() { |
| | | var $file = $('#' + upFileId); |
| | | var fileElem = $file[0]; |
| | | if (!fileElem) { |
| | | // è¿å true å¯å
³é panel |
| | | return true; |
| | | } |
| | | |
| | | // è·åéä¸ç file 对象å表 |
| | | var fileList = fileElem.files; |
| | | if (fileList.length) { |
| | | uploadImg.uploadImg(fileList); |
| | | } |
| | | |
| | | // è¿å true å¯å
³é panel |
| | | return true; |
| | | } |
| | | }] |
| | | }, // first tab end |
| | | { |
| | | title: 'ç½ç»å¾ç', |
| | | tpl: '<div>\n <input id="' + linkUrlId + '" type="text" class="block" placeholder="\u56FE\u7247\u94FE\u63A5"/></td>\n <div class="w-e-button-container">\n <button id="' + linkBtnId + '" class="right">\u63D2\u5165</button>\n </div>\n </div>', |
| | | events: [{ |
| | | selector: '#' + linkBtnId, |
| | | type: 'click', |
| | | fn: function fn() { |
| | | var $linkUrl = $('#' + linkUrlId); |
| | | var url = $linkUrl.val().trim(); |
| | | |
| | | if (url) { |
| | | uploadImg.insertLinkImg(url); |
| | | } |
| | | |
| | | // è¿å true è¡¨ç¤ºå½æ°æ§è¡ç»æä¹åå
³é panel |
| | | return true; |
| | | } |
| | | }] |
| | | } // second tab end |
| | | ]; // tabs end |
| | | |
| | | // 夿 tabs çæ¾ç¤º |
| | | var tabsConfigResult = []; |
| | | if ((config.uploadImgShowBase64 || config.uploadImgServer || config.customUploadImg) && window.FileReader) { |
| | | // æ¾ç¤ºâä¸ä¼ å¾çâ |
| | | tabsConfigResult.push(tabsConfig[0]); |
| | | } |
| | | if (config.showLinkImg) { |
| | | // æ¾ç¤ºâç½ç»å¾çâ |
| | | tabsConfigResult.push(tabsConfig[1]); |
| | | } |
| | | |
| | | // å建 panel å¹¶æ¾ç¤º |
| | | var panel = new Panel(this, { |
| | | width: 300, |
| | | tabs: tabsConfigResult |
| | | }); |
| | | panel.show(); |
| | | |
| | | // è®°å½å±æ§ |
| | | this.panel = panel; |
| | | }, |
| | | |
| | | // è¯å¾æ¹å active ç¶æ |
| | | tryChangeActive: function tryChangeActive(e) { |
| | | var editor = this.editor; |
| | | var $elem = this.$elem; |
| | | if (editor._selectedImg) { |
| | | this._active = true; |
| | | $elem.addClass('w-e-active'); |
| | | } else { |
| | | this._active = false; |
| | | $elem.removeClass('w-e-active'); |
| | | } |
| | | } |
| | | }; |
| | | |
| | | /* |
| | | ææèåçæ±æ» |
| | | */ |
| | | |
| | | // åå¨èåçæé 彿° |
| | | var MenuConstructors = {}; |
| | | |
| | | MenuConstructors.bold = Bold; |
| | | |
| | | MenuConstructors.head = Head; |
| | | |
| | | MenuConstructors.fontSize = FontSize; |
| | | |
| | | MenuConstructors.fontName = FontName; |
| | | |
| | | MenuConstructors.link = Link; |
| | | |
| | | MenuConstructors.italic = Italic; |
| | | |
| | | MenuConstructors.redo = Redo; |
| | | |
| | | MenuConstructors.strikeThrough = StrikeThrough; |
| | | |
| | | MenuConstructors.underline = Underline; |
| | | |
| | | MenuConstructors.undo = Undo; |
| | | |
| | | MenuConstructors.list = List; |
| | | |
| | | MenuConstructors.justify = Justify; |
| | | |
| | | MenuConstructors.foreColor = ForeColor; |
| | | |
| | | MenuConstructors.backColor = BackColor; |
| | | |
| | | MenuConstructors.quote = Quote; |
| | | |
| | | MenuConstructors.code = Code; |
| | | |
| | | MenuConstructors.emoticon = Emoticon; |
| | | |
| | | MenuConstructors.table = Table; |
| | | |
| | | MenuConstructors.video = Video; |
| | | |
| | | MenuConstructors.image = Image; |
| | | |
| | | /* |
| | | èåéå |
| | | */ |
| | | // æé 彿° |
| | | function Menus(editor) { |
| | | this.editor = editor; |
| | | this.menus = {}; |
| | | } |
| | | |
| | | // ä¿®æ¹åå |
| | | Menus.prototype = { |
| | | constructor: Menus, |
| | | |
| | | // åå§åèå |
| | | init: function init() { |
| | | var _this = this; |
| | | |
| | | var editor = this.editor; |
| | | var config = editor.config || {}; |
| | | var configMenus = config.menus || []; // è·åé
ç½®ä¸çèå |
| | | |
| | | // æ ¹æ®é
置信æ¯ï¼å建èå |
| | | configMenus.forEach(function (menuKey) { |
| | | var MenuConstructor = MenuConstructors[menuKey]; |
| | | if (MenuConstructor && typeof MenuConstructor === 'function') { |
| | | // å建å个èå |
| | | _this.menus[menuKey] = new MenuConstructor(editor); |
| | | } |
| | | }); |
| | | |
| | | // æ·»å å°èåæ |
| | | this._addToToolbar(); |
| | | |
| | | // ç»å®äºä»¶ |
| | | this._bindEvent(); |
| | | }, |
| | | |
| | | // æ·»å å°èåæ |
| | | _addToToolbar: function _addToToolbar() { |
| | | var editor = this.editor; |
| | | var $toolbarElem = editor.$toolbarElem; |
| | | var menus = this.menus; |
| | | var config = editor.config; |
| | | // config.zIndex æ¯é
ç½®çç¼è¾åºåç z-indexï¼èåç z-index å¾å¨å
¶åºç¡ä¸ +1 |
| | | var zIndex = config.zIndex + 1; |
| | | objForEach(menus, function (key, menu) { |
| | | var $elem = menu.$elem; |
| | | if ($elem) { |
| | | // 设置 z-index |
| | | $elem.css('z-index', zIndex); |
| | | $toolbarElem.append($elem); |
| | | } |
| | | }); |
| | | }, |
| | | |
| | | // ç»å®èå click mouseenter äºä»¶ |
| | | _bindEvent: function _bindEvent() { |
| | | var menus = this.menus; |
| | | var editor = this.editor; |
| | | objForEach(menus, function (key, menu) { |
| | | var type = menu.type; |
| | | if (!type) { |
| | | return; |
| | | } |
| | | var $elem = menu.$elem; |
| | | var droplist = menu.droplist; |
| | | var panel = menu.panel; |
| | | |
| | | // ç¹å»ç±»åï¼ä¾å¦ bold |
| | | if (type === 'click' && menu.onClick) { |
| | | $elem.on('click', function (e) { |
| | | if (editor.selection.getRange() == null) { |
| | | return; |
| | | } |
| | | menu.onClick(e); |
| | | }); |
| | | } |
| | | |
| | | // 䏿æ¡ï¼ä¾å¦ head |
| | | if (type === 'droplist' && droplist) { |
| | | $elem.on('mouseenter', function (e) { |
| | | if (editor.selection.getRange() == null) { |
| | | return; |
| | | } |
| | | // æ¾ç¤º |
| | | droplist.showTimeoutId = setTimeout(function () { |
| | | droplist.show(); |
| | | }, 200); |
| | | }).on('mouseleave', function (e) { |
| | | // éè |
| | | droplist.hideTimeoutId = setTimeout(function () { |
| | | droplist.hide(); |
| | | }, 0); |
| | | }); |
| | | } |
| | | |
| | | // å¼¹æ¡ç±»åï¼ä¾å¦ link |
| | | if (type === 'panel' && menu.onClick) { |
| | | $elem.on('click', function (e) { |
| | | e.stopPropagation(); |
| | | if (editor.selection.getRange() == null) { |
| | | return; |
| | | } |
| | | // å¨èªå®ä¹äºä»¶ä¸æ¾ç¤º panel |
| | | menu.onClick(e); |
| | | }); |
| | | } |
| | | }); |
| | | }, |
| | | |
| | | // å°è¯ä¿®æ¹èåç¶æ |
| | | changeActive: function changeActive() { |
| | | var menus = this.menus; |
| | | objForEach(menus, function (key, menu) { |
| | | if (menu.tryChangeActive) { |
| | | setTimeout(function () { |
| | | menu.tryChangeActive(); |
| | | }, 100); |
| | | } |
| | | }); |
| | | } |
| | | }; |
| | | |
| | | /* |
| | | ç²è´´ä¿¡æ¯çå¤ç |
| | | */ |
| | | |
| | | // è·åç²è´´ççº¯ææ¬ |
| | | function getPasteText(e) { |
| | | var clipboardData = e.clipboardData || e.originalEvent && e.originalEvent.clipboardData; |
| | | var pasteText = void 0; |
| | | if (clipboardData == null) { |
| | | pasteText = window.clipboardData && window.clipboardData.getData('text'); |
| | | } else { |
| | | pasteText = clipboardData.getData('text/plain'); |
| | | } |
| | | |
| | | return replaceHtmlSymbol(pasteText); |
| | | } |
| | | |
| | | // è·åç²è´´çhtml |
| | | function getPasteHtml(e, filterStyle, ignoreImg) { |
| | | var clipboardData = e.clipboardData || e.originalEvent && e.originalEvent.clipboardData; |
| | | var pasteText = void 0, |
| | | pasteHtml = void 0; |
| | | if (clipboardData == null) { |
| | | pasteText = window.clipboardData && window.clipboardData.getData('text'); |
| | | } else { |
| | | pasteText = clipboardData.getData('text/plain'); |
| | | pasteHtml = clipboardData.getData('text/html'); |
| | | } |
| | | if (!pasteHtml && pasteText) { |
| | | pasteHtml = '<p>' + replaceHtmlSymbol(pasteText) + '</p>'; |
| | | } |
| | | if (!pasteHtml) { |
| | | return; |
| | | } |
| | | |
| | | // è¿æ»¤wordä¸ç¶æè¿æ¥çæ ç¨å符 |
| | | var docSplitHtml = pasteHtml.split('</html>'); |
| | | if (docSplitHtml.length === 2) { |
| | | pasteHtml = docSplitHtml[0]; |
| | | } |
| | | |
| | | // è¿æ»¤æ ç¨æ ç¾ |
| | | pasteHtml = pasteHtml.replace(/<(meta|script|link).+?>/igm, ''); |
| | | // å»ææ³¨é |
| | | pasteHtml = pasteHtml.replace(/<!--.*?-->/mg, ''); |
| | | // è¿æ»¤ data-xxx 屿§ |
| | | pasteHtml = pasteHtml.replace(/\s?data-.+?=('|").+?('|")/igm, ''); |
| | | |
| | | if (ignoreImg) { |
| | | // 忽ç¥å¾ç |
| | | pasteHtml = pasteHtml.replace(/<img.+?>/igm, ''); |
| | | } |
| | | |
| | | if (filterStyle) { |
| | | // è¿æ»¤æ ·å¼ |
| | | pasteHtml = pasteHtml.replace(/\s?(class|style)=('|").*?('|")/igm, ''); |
| | | } else { |
| | | // ä¿çæ ·å¼ |
| | | pasteHtml = pasteHtml.replace(/\s?class=('|").*?('|")/igm, ''); |
| | | } |
| | | |
| | | return pasteHtml; |
| | | } |
| | | |
| | | // è·åç²è´´çå¾çæä»¶ |
| | | function getPasteImgs(e) { |
| | | var result = []; |
| | | var txt = getPasteText(e); |
| | | if (txt) { |
| | | // ææåï¼å°±å¿½ç¥å¾ç |
| | | return result; |
| | | } |
| | | |
| | | var clipboardData = e.clipboardData || e.originalEvent && e.originalEvent.clipboardData || {}; |
| | | var items = clipboardData.items; |
| | | if (!items) { |
| | | return result; |
| | | } |
| | | |
| | | objForEach(items, function (key, value) { |
| | | var type = value.type; |
| | | if (/image/i.test(type)) { |
| | | result.push(value.getAsFile()); |
| | | } |
| | | }); |
| | | |
| | | return result; |
| | | } |
| | | |
| | | /* |
| | | ç¼è¾åºå |
| | | */ |
| | | |
| | | // è·åä¸ä¸ª elem.childNodes ç JSON æ°æ® |
| | | function getChildrenJSON($elem) { |
| | | var result = []; |
| | | var $children = $elem.childNodes() || []; // 注æ childNodes() å¯ä»¥è·åææ¬èç¹ |
| | | $children.forEach(function (curElem) { |
| | | var elemResult = void 0; |
| | | var nodeType = curElem.nodeType; |
| | | |
| | | // ææ¬èç¹ |
| | | if (nodeType === 3) { |
| | | elemResult = curElem.textContent; |
| | | elemResult = replaceHtmlSymbol(elemResult); |
| | | } |
| | | |
| | | // æ®é DOM èç¹ |
| | | if (nodeType === 1) { |
| | | elemResult = {}; |
| | | |
| | | // tag |
| | | elemResult.tag = curElem.nodeName.toLowerCase(); |
| | | // attr |
| | | var attrData = []; |
| | | var attrList = curElem.attributes || {}; |
| | | var attrListLength = attrList.length || 0; |
| | | for (var i = 0; i < attrListLength; i++) { |
| | | var attr = attrList[i]; |
| | | attrData.push({ |
| | | name: attr.name, |
| | | value: attr.value |
| | | }); |
| | | } |
| | | elemResult.attrs = attrData; |
| | | // childrenï¼éå½ï¼ |
| | | elemResult.children = getChildrenJSON($(curElem)); |
| | | } |
| | | |
| | | result.push(elemResult); |
| | | }); |
| | | return result; |
| | | } |
| | | |
| | | // æé 彿° |
| | | function Text(editor) { |
| | | this.editor = editor; |
| | | } |
| | | |
| | | // ä¿®æ¹åå |
| | | Text.prototype = { |
| | | constructor: Text, |
| | | |
| | | // åå§å |
| | | init: function init() { |
| | | // ç»å®äºä»¶ |
| | | this._bindEvent(); |
| | | }, |
| | | |
| | | // æ¸
空å
容 |
| | | clear: function clear() { |
| | | this.html('<p><br></p>'); |
| | | }, |
| | | |
| | | // è·å 设置 html |
| | | html: function html(val) { |
| | | var editor = this.editor; |
| | | var $textElem = editor.$textElem; |
| | | var html = void 0; |
| | | if (val == null) { |
| | | html = $textElem.html(); |
| | | // æªéä¸ä»»ä½å
å®¹çæ¶åç¹å»âå ç²âæè
âæä½âçæé®ï¼å°±å¾éè¦ä¸ä¸ªç©ºçå ä½ç¬¦ ​ ï¼è¿éæ¿æ¢æ |
| | | html = html.replace(/\u200b/gm, ''); |
| | | return html; |
| | | } else { |
| | | $textElem.html(val); |
| | | |
| | | // åå§åéåï¼å°å
æ å®ä½å°å
å®¹å°¾é¨ |
| | | editor.initSelection(); |
| | | } |
| | | }, |
| | | |
| | | // è·å JSON |
| | | getJSON: function getJSON() { |
| | | var editor = this.editor; |
| | | var $textElem = editor.$textElem; |
| | | return getChildrenJSON($textElem); |
| | | }, |
| | | |
| | | // è·å 设置 text |
| | | text: function text(val) { |
| | | var editor = this.editor; |
| | | var $textElem = editor.$textElem; |
| | | var text = void 0; |
| | | if (val == null) { |
| | | text = $textElem.text(); |
| | | // æªéä¸ä»»ä½å
å®¹çæ¶åç¹å»âå ç²âæè
âæä½âçæé®ï¼å°±å¾éè¦ä¸ä¸ªç©ºçå ä½ç¬¦ ​ ï¼è¿éæ¿æ¢æ |
| | | text = text.replace(/\u200b/gm, ''); |
| | | return text; |
| | | } else { |
| | | $textElem.text('<p>' + val + '</p>'); |
| | | |
| | | // åå§åéåï¼å°å
æ å®ä½å°å
å®¹å°¾é¨ |
| | | editor.initSelection(); |
| | | } |
| | | }, |
| | | |
| | | // 追å å
容 |
| | | append: function append(html) { |
| | | var editor = this.editor; |
| | | var $textElem = editor.$textElem; |
| | | $textElem.append($(html)); |
| | | |
| | | // åå§åéåï¼å°å
æ å®ä½å°å
å®¹å°¾é¨ |
| | | editor.initSelection(); |
| | | }, |
| | | |
| | | // ç»å®äºä»¶ |
| | | _bindEvent: function _bindEvent() { |
| | | // 宿¶ä¿åéå |
| | | this._saveRangeRealTime(); |
| | | |
| | | // æå车建æ¶çç¹æ®å¤ç |
| | | this._enterKeyHandle(); |
| | | |
| | | // æ¸
空æ¶ä¿ç <p><br></p> |
| | | this._clearHandle(); |
| | | |
| | | // ç²è´´äºä»¶ï¼ç²è´´æåï¼ç²è´´å¾çï¼ |
| | | this._pasteHandle(); |
| | | |
| | | // tab ç¹æ®å¤ç |
| | | this._tabHandle(); |
| | | |
| | | // img ç¹å» |
| | | this._imgHandle(); |
| | | |
| | | // ææ½äºä»¶ |
| | | this._dragHandle(); |
| | | }, |
| | | |
| | | // 宿¶ä¿åéå |
| | | _saveRangeRealTime: function _saveRangeRealTime() { |
| | | var editor = this.editor; |
| | | var $textElem = editor.$textElem; |
| | | |
| | | // ä¿åå½åçéåº |
| | | function saveRange(e) { |
| | | // éæ¶ä¿åéåº |
| | | editor.selection.saveRange(); |
| | | // æ´æ°æé® ative ç¶æ |
| | | editor.menus.changeActive(); |
| | | } |
| | | // æé®åä¿å |
| | | $textElem.on('keyup', saveRange); |
| | | $textElem.on('mousedown', function (e) { |
| | | // mousedown ç¶æä¸ï¼é¼ æ æ»å¨å°ç¼è¾åºåå¤é¢ï¼ä¹éè¦ä¿åéåº |
| | | $textElem.on('mouseleave', saveRange); |
| | | }); |
| | | $textElem.on('mouseup', function (e) { |
| | | saveRange(); |
| | | // å¨ç¼è¾å¨åºåä¹å
宿ç¹å»ï¼åæ¶é¼ æ æ»å¨å°ç¼è¾åºå¤é¢çäºä»¶ |
| | | $textElem.off('mouseleave', saveRange); |
| | | }); |
| | | }, |
| | | |
| | | // æåè½¦é®æ¶çç¹æ®å¤ç |
| | | _enterKeyHandle: function _enterKeyHandle() { |
| | | var editor = this.editor; |
| | | var $textElem = editor.$textElem; |
| | | |
| | | function insertEmptyP($selectionElem) { |
| | | var $p = $('<p><br></p>'); |
| | | $p.insertBefore($selectionElem); |
| | | editor.selection.createRangeByElem($p, true); |
| | | editor.selection.restoreSelection(); |
| | | $selectionElem.remove(); |
| | | } |
| | | |
| | | // å°å车ä¹åçæçé <p> ç顶级æ ç¾ï¼æ¹ä¸º <p> |
| | | function pHandle(e) { |
| | | var $selectionElem = editor.selection.getSelectionContainerElem(); |
| | | var $parentElem = $selectionElem.parent(); |
| | | |
| | | if ($parentElem.html() === '<code><br></code>') { |
| | | // å车ä¹åå
æ æå¨ä¸ä¸ª <p><code>.....</code></p> ï¼å¿½ç¶å车çæä¸ä¸ªç©ºç <p><code><br></code></p> |
| | | // èä¸ç»§ç»å车跳ä¸åºå»ï¼å æ¤åªè½ç¹æ®å¤ç |
| | | insertEmptyP($selectionElem); |
| | | return; |
| | | } |
| | | |
| | | if (!$parentElem.equal($textElem)) { |
| | | // 䏿¯é¡¶çº§æ ç¾ |
| | | return; |
| | | } |
| | | |
| | | var nodeName = $selectionElem.getNodeName(); |
| | | if (nodeName === 'P') { |
| | | // å½åçæ ç¾æ¯ P ï¼ä¸ç¨åå¤ç |
| | | return; |
| | | } |
| | | |
| | | if ($selectionElem.text()) { |
| | | // æå
容ï¼ä¸åå¤ç |
| | | return; |
| | | } |
| | | |
| | | // æå
¥ <p> ï¼å¹¶å°éåå®ä½å° <p>ï¼å é¤å½åæ ç¾ |
| | | insertEmptyP($selectionElem); |
| | | } |
| | | |
| | | $textElem.on('keyup', function (e) { |
| | | if (e.keyCode !== 13) { |
| | | // 䏿¯åè½¦é® |
| | | return; |
| | | } |
| | | // å°å车ä¹åçæçé <p> ç顶级æ ç¾ï¼æ¹ä¸º <p> |
| | | pHandle(e); |
| | | }); |
| | | |
| | | // <pre><code></code></pre> åè½¦æ¶ ç¹æ®å¤ç |
| | | function codeHandle(e) { |
| | | var $selectionElem = editor.selection.getSelectionContainerElem(); |
| | | if (!$selectionElem) { |
| | | return; |
| | | } |
| | | var $parentElem = $selectionElem.parent(); |
| | | var selectionNodeName = $selectionElem.getNodeName(); |
| | | var parentNodeName = $parentElem.getNodeName(); |
| | | |
| | | if (selectionNodeName !== 'CODE' || parentNodeName !== 'PRE') { |
| | | // ä¸ç¬¦åè¦æ± å¿½ç¥ |
| | | return; |
| | | } |
| | | |
| | | if (!editor.cmd.queryCommandSupported('insertHTML')) { |
| | | // å¿
é¡»åçæ¯æ insertHTML å½ä»¤ |
| | | return; |
| | | } |
| | | |
| | | // å¤çï¼å
æ å®ä½å°ä»£ç æ«å°¾ï¼èç³»ç¹å»ä¸¤æ¬¡å车ï¼å³è·³åºä»£ç å |
| | | if (editor._willBreakCode === true) { |
| | | // æ¤æ¶å¯ä»¥è·³åºä»£ç å |
| | | // æå
¥ <p> ï¼å¹¶å°éåå®ä½å° <p> |
| | | var $p = $('<p><br></p>'); |
| | | $p.insertAfter($parentElem); |
| | | editor.selection.createRangeByElem($p, true); |
| | | editor.selection.restoreSelection(); |
| | | |
| | | // ä¿®æ¹ç¶æ |
| | | editor._willBreakCode = false; |
| | | |
| | | e.preventDefault(); |
| | | return; |
| | | } |
| | | |
| | | var _startOffset = editor.selection.getRange().startOffset; |
| | | |
| | | // å¤çï¼å车æ¶ï¼ä¸è½æå
¥ <br> èæ¯æå
¥ \n ï¼å 为æ¯å¨ pre æ ç¾éé¢ |
| | | editor.cmd.do('insertHTML', '\n'); |
| | | editor.selection.saveRange(); |
| | | if (editor.selection.getRange().startOffset === _startOffset) { |
| | | // 没起ä½ç¨ï¼åæ¥ä¸é |
| | | editor.cmd.do('insertHTML', '\n'); |
| | | } |
| | | |
| | | var codeLength = $selectionElem.html().length; |
| | | if (editor.selection.getRange().startOffset + 1 === codeLength) { |
| | | // 说æå
æ å¨ä»£ç æåçä½ç½®ï¼æ§è¡äºå车æä½ |
| | | // è®°å½ä¸æ¥ï¼ä»¥ä¾¿ä¸æ¬¡å车æ¶åè·³åº code |
| | | editor._willBreakCode = true; |
| | | } |
| | | |
| | | // 黿¢é»è®¤è¡ä¸º |
| | | e.preventDefault(); |
| | | } |
| | | |
| | | $textElem.on('keydown', function (e) { |
| | | if (e.keyCode !== 13) { |
| | | // 䏿¯åè½¦é® |
| | | // åæ¶å³å°è·³è½¬ä»£ç åçè®°å½ |
| | | editor._willBreakCode = false; |
| | | return; |
| | | } |
| | | // <pre><code></code></pre> åè½¦æ¶ ç¹æ®å¤ç |
| | | codeHandle(e); |
| | | }); |
| | | }, |
| | | |
| | | // æ¸
空æ¶ä¿ç <p><br></p> |
| | | _clearHandle: function _clearHandle() { |
| | | var editor = this.editor; |
| | | var $textElem = editor.$textElem; |
| | | |
| | | $textElem.on('keydown', function (e) { |
| | | if (e.keyCode !== 8) { |
| | | return; |
| | | } |
| | | var txtHtml = $textElem.html().toLowerCase().trim(); |
| | | if (txtHtml === '<p><br></p>') { |
| | | // æåå©ä¸ä¸ä¸ªç©ºè¡ï¼å°±ä¸åå é¤äº |
| | | e.preventDefault(); |
| | | return; |
| | | } |
| | | }); |
| | | |
| | | $textElem.on('keyup', function (e) { |
| | | if (e.keyCode !== 8) { |
| | | return; |
| | | } |
| | | var $p = void 0; |
| | | var txtHtml = $textElem.html().toLowerCase().trim(); |
| | | |
| | | // firefox æ¶ç¨ txtHtml === '<br>' 夿ï¼å
¶ä»ç¨ !txtHtml 夿 |
| | | if (!txtHtml || txtHtml === '<br>') { |
| | | // å
å®¹ç©ºäº |
| | | $p = $('<p><br/></p>'); |
| | | $textElem.html(''); // ä¸å®è¦å
æ¸
空ï¼å¦åå¨ firefox 䏿é®é¢ |
| | | $textElem.append($p); |
| | | editor.selection.createRangeByElem($p, false, true); |
| | | editor.selection.restoreSelection(); |
| | | } |
| | | }); |
| | | }, |
| | | |
| | | // ç²è´´äºä»¶ï¼ç²è´´æå ç²è´´å¾çï¼ |
| | | _pasteHandle: function _pasteHandle() { |
| | | var editor = this.editor; |
| | | var config = editor.config; |
| | | var pasteFilterStyle = config.pasteFilterStyle; |
| | | var pasteTextHandle = config.pasteTextHandle; |
| | | var ignoreImg = config.pasteIgnoreImg; |
| | | var $textElem = editor.$textElem; |
| | | |
| | | // ç²è´´å¾çãææ¬çäºä»¶ï¼æ¯æ¬¡åªè½æ§è¡ä¸ä¸ª |
| | | // å¤æè¯¥æ¬¡ç²è´´äºä»¶æ¯å¦å¯ä»¥æ§è¡ |
| | | var pasteTime = 0; |
| | | function canDo() { |
| | | var now = Date.now(); |
| | | var flag = false; |
| | | if (now - pasteTime >= 100) { |
| | | // é´éå¤§äº 100 ms ï¼å¯ä»¥æ§è¡ |
| | | flag = true; |
| | | } |
| | | pasteTime = now; |
| | | return flag; |
| | | } |
| | | function resetTime() { |
| | | pasteTime = 0; |
| | | } |
| | | |
| | | // ç²è´´æå |
| | | $textElem.on('paste', function (e) { |
| | | if (UA.isIE()) { |
| | | return; |
| | | } else { |
| | | // 黿¢é»è®¤è¡ä¸ºï¼ä½¿ç¨ execCommand çç²è´´å½ä»¤ |
| | | e.preventDefault(); |
| | | } |
| | | |
| | | // ç²è´´å¾çåææ¬ï¼åªè½åæ¶ä½¿ç¨ä¸ä¸ª |
| | | if (!canDo()) { |
| | | return; |
| | | } |
| | | |
| | | // è·åç²è´´çæå |
| | | var pasteHtml = getPasteHtml(e, pasteFilterStyle, ignoreImg); |
| | | var pasteText = getPasteText(e); |
| | | pasteText = pasteText.replace(/\n/gm, '<br>'); |
| | | |
| | | var $selectionElem = editor.selection.getSelectionContainerElem(); |
| | | if (!$selectionElem) { |
| | | return; |
| | | } |
| | | var nodeName = $selectionElem.getNodeName(); |
| | | |
| | | // code ä¸åªè½ç²è´´çº¯ææ¬ |
| | | if (nodeName === 'CODE' || nodeName === 'PRE') { |
| | | if (pasteTextHandle && isFunction(pasteTextHandle)) { |
| | | // ç¨æ·èªå®ä¹è¿æ»¤å¤çç²è´´å
容 |
| | | pasteText = '' + (pasteTextHandle(pasteText) || ''); |
| | | } |
| | | editor.cmd.do('insertHTML', '<p>' + pasteText + '</p>'); |
| | | return; |
| | | } |
| | | |
| | | // å
æ¾å¼æ³¨éï¼æé®é¢åè¿½æ¥ ââââ |
| | | // // è¡¨æ ¼ä¸å¿½ç¥ï¼å¯è½ä¼åºç°å¼å¸¸é®é¢ |
| | | // if (nodeName === 'TD' || nodeName === 'TH') { |
| | | // return |
| | | // } |
| | | |
| | | if (!pasteHtml) { |
| | | // 没æå
容ï¼å¯ç»§ç»æ§è¡ä¸é¢çå¾çç²è´´ |
| | | resetTime(); |
| | | return; |
| | | } |
| | | try { |
| | | // firefox ä¸ï¼è·åç pasteHtml å¯è½æ¯æ²¡æ <ul> å
裹ç <li> |
| | | // å æ¤æ§è¡ insertHTML 伿¥é |
| | | if (pasteTextHandle && isFunction(pasteTextHandle)) { |
| | | // ç¨æ·èªå®ä¹è¿æ»¤å¤çç²è´´å
容 |
| | | pasteHtml = '' + (pasteTextHandle(pasteHtml) || ''); |
| | | } |
| | | editor.cmd.do('insertHTML', pasteHtml); |
| | | } catch (ex) { |
| | | // æ¤æ¶ä½¿ç¨ pasteText æ¥å
¼å®¹ä¸ä¸ |
| | | if (pasteTextHandle && isFunction(pasteTextHandle)) { |
| | | // ç¨æ·èªå®ä¹è¿æ»¤å¤çç²è´´å
容 |
| | | pasteText = '' + (pasteTextHandle(pasteText) || ''); |
| | | } |
| | | editor.cmd.do('insertHTML', '<p>' + pasteText + '</p>'); |
| | | } |
| | | }); |
| | | |
| | | // ç²è´´å¾ç |
| | | $textElem.on('paste', function (e) { |
| | | if (UA.isIE()) { |
| | | return; |
| | | } else { |
| | | e.preventDefault(); |
| | | } |
| | | |
| | | // ç²è´´å¾çåææ¬ï¼åªè½åæ¶ä½¿ç¨ä¸ä¸ª |
| | | if (!canDo()) { |
| | | return; |
| | | } |
| | | |
| | | // è·åç²è´´çå¾ç |
| | | var pasteFiles = getPasteImgs(e); |
| | | if (!pasteFiles || !pasteFiles.length) { |
| | | return; |
| | | } |
| | | |
| | | // è·åå½åçå
ç´ |
| | | var $selectionElem = editor.selection.getSelectionContainerElem(); |
| | | if (!$selectionElem) { |
| | | return; |
| | | } |
| | | var nodeName = $selectionElem.getNodeName(); |
| | | |
| | | // code ä¸ç²è´´å¿½ç¥ |
| | | if (nodeName === 'CODE' || nodeName === 'PRE') { |
| | | return; |
| | | } |
| | | |
| | | // ä¸ä¼ å¾ç |
| | | var uploadImg = editor.uploadImg; |
| | | uploadImg.uploadImg(pasteFiles); |
| | | }); |
| | | }, |
| | | |
| | | // tab ç¹æ®å¤ç |
| | | _tabHandle: function _tabHandle() { |
| | | var editor = this.editor; |
| | | var $textElem = editor.$textElem; |
| | | |
| | | $textElem.on('keydown', function (e) { |
| | | if (e.keyCode !== 9) { |
| | | return; |
| | | } |
| | | if (!editor.cmd.queryCommandSupported('insertHTML')) { |
| | | // å¿
é¡»åçæ¯æ insertHTML å½ä»¤ |
| | | return; |
| | | } |
| | | var $selectionElem = editor.selection.getSelectionContainerElem(); |
| | | if (!$selectionElem) { |
| | | return; |
| | | } |
| | | var $parentElem = $selectionElem.parent(); |
| | | var selectionNodeName = $selectionElem.getNodeName(); |
| | | var parentNodeName = $parentElem.getNodeName(); |
| | | |
| | | if (selectionNodeName === 'CODE' && parentNodeName === 'PRE') { |
| | | // <pre><code> éé¢ |
| | | editor.cmd.do('insertHTML', ' '); |
| | | } else { |
| | | // æ®éæå |
| | | editor.cmd.do('insertHTML', ' '); |
| | | } |
| | | |
| | | e.preventDefault(); |
| | | }); |
| | | }, |
| | | |
| | | // img ç¹å» |
| | | _imgHandle: function _imgHandle() { |
| | | var editor = this.editor; |
| | | var $textElem = editor.$textElem; |
| | | |
| | | // 为å¾çå¢å selected æ ·å¼ |
| | | $textElem.on('click', 'img', function (e) { |
| | | var img = this; |
| | | var $img = $(img); |
| | | |
| | | if ($img.attr('data-w-e') === '1') { |
| | | // æ¯è¡¨æ
å¾çï¼å¿½ç¥ |
| | | return; |
| | | } |
| | | |
| | | // è®°å½å½åç¹å»è¿çå¾ç |
| | | editor._selectedImg = $img; |
| | | |
| | | // ä¿®æ¹éåºå¹¶ restore ï¼é²æ¢ç¨æ·æ¤æ¶ç¹å»éæ ¼é®ï¼ä¼å é¤å
¶ä»å
容 |
| | | editor.selection.createRangeByElem($img); |
| | | editor.selection.restoreSelection(); |
| | | }); |
| | | |
| | | // 廿å¾çç selected æ ·å¼ |
| | | $textElem.on('click keyup', function (e) { |
| | | if (e.target.matches('img')) { |
| | | // ç¹å»çæ¯å¾çï¼å¿½ç¥ |
| | | return; |
| | | } |
| | | // å é¤è®°å½ |
| | | editor._selectedImg = null; |
| | | }); |
| | | }, |
| | | |
| | | // ææ½äºä»¶ |
| | | _dragHandle: function _dragHandle() { |
| | | var editor = this.editor; |
| | | |
| | | // ç¦ç¨ document ææ½äºä»¶ |
| | | var $document = $(document); |
| | | $document.on('dragleave drop dragenter dragover', function (e) { |
| | | e.preventDefault(); |
| | | }); |
| | | |
| | | // æ·»å ç¼è¾åºåææ½äºä»¶ |
| | | var $textElem = editor.$textElem; |
| | | $textElem.on('drop', function (e) { |
| | | e.preventDefault(); |
| | | var files = e.dataTransfer && e.dataTransfer.files; |
| | | if (!files || !files.length) { |
| | | return; |
| | | } |
| | | |
| | | // ä¸ä¼ å¾ç |
| | | var uploadImg = editor.uploadImg; |
| | | uploadImg.uploadImg(files); |
| | | }); |
| | | } |
| | | }; |
| | | |
| | | /* |
| | | å½ä»¤ï¼å°è£
document.execCommand |
| | | */ |
| | | |
| | | // æé 彿° |
| | | function Command(editor) { |
| | | this.editor = editor; |
| | | } |
| | | |
| | | // ä¿®æ¹åå |
| | | Command.prototype = { |
| | | constructor: Command, |
| | | |
| | | // æ§è¡å½ä»¤ |
| | | do: function _do(name, value) { |
| | | var editor = this.editor; |
| | | |
| | | // ä½¿ç¨ styleWithCSS |
| | | if (!editor._useStyleWithCSS) { |
| | | document.execCommand('styleWithCSS', null, true); |
| | | editor._useStyleWithCSS = true; |
| | | } |
| | | |
| | | // 妿æ éåºï¼å¿½ç¥ |
| | | if (!editor.selection.getRange()) { |
| | | return; |
| | | } |
| | | |
| | | // æ¢å¤éå |
| | | editor.selection.restoreSelection(); |
| | | |
| | | // æ§è¡ |
| | | var _name = '_' + name; |
| | | if (this[_name]) { |
| | | // æèªå®ä¹äºä»¶ |
| | | this[_name](value); |
| | | } else { |
| | | // é»è®¤ command |
| | | this._execCommand(name, value); |
| | | } |
| | | |
| | | // ä¿®æ¹èåç¶æ |
| | | editor.menus.changeActive(); |
| | | |
| | | // æåï¼æ¢å¤éåä¿è¯å
æ å¨åæ¥çä½ç½®éªç |
| | | editor.selection.saveRange(); |
| | | editor.selection.restoreSelection(); |
| | | |
| | | // 触å onchange |
| | | editor.change && editor.change(); |
| | | }, |
| | | |
| | | // èªå®ä¹ insertHTML äºä»¶ |
| | | _insertHTML: function _insertHTML(html) { |
| | | var editor = this.editor; |
| | | var range = editor.selection.getRange(); |
| | | |
| | | if (this.queryCommandSupported('insertHTML')) { |
| | | // W3C |
| | | this._execCommand('insertHTML', html); |
| | | } else if (range.insertNode) { |
| | | // IE |
| | | range.deleteContents(); |
| | | range.insertNode($(html)[0]); |
| | | } else if (range.pasteHTML) { |
| | | // IE <= 10 |
| | | range.pasteHTML(html); |
| | | } |
| | | }, |
| | | |
| | | // æå
¥ elem |
| | | _insertElem: function _insertElem($elem) { |
| | | var editor = this.editor; |
| | | var range = editor.selection.getRange(); |
| | | |
| | | if (range.insertNode) { |
| | | range.deleteContents(); |
| | | range.insertNode($elem[0]); |
| | | } |
| | | }, |
| | | |
| | | // å°è£
execCommand |
| | | _execCommand: function _execCommand(name, value) { |
| | | document.execCommand(name, false, value); |
| | | }, |
| | | |
| | | // å°è£
document.queryCommandValue |
| | | queryCommandValue: function queryCommandValue(name) { |
| | | return document.queryCommandValue(name); |
| | | }, |
| | | |
| | | // å°è£
document.queryCommandState |
| | | queryCommandState: function queryCommandState(name) { |
| | | return document.queryCommandState(name); |
| | | }, |
| | | |
| | | // å°è£
document.queryCommandSupported |
| | | queryCommandSupported: function queryCommandSupported(name) { |
| | | return document.queryCommandSupported(name); |
| | | } |
| | | }; |
| | | |
| | | /* |
| | | selection range API |
| | | */ |
| | | |
| | | // æé 彿° |
| | | function API(editor) { |
| | | this.editor = editor; |
| | | this._currentRange = null; |
| | | } |
| | | |
| | | // ä¿®æ¹åå |
| | | API.prototype = { |
| | | constructor: API, |
| | | |
| | | // è·å range 对象 |
| | | getRange: function getRange() { |
| | | return this._currentRange; |
| | | }, |
| | | |
| | | // ä¿åéåº |
| | | saveRange: function saveRange(_range) { |
| | | if (_range) { |
| | | // ä¿åå·²æéåº |
| | | this._currentRange = _range; |
| | | return; |
| | | } |
| | | |
| | | // è·åå½åçéåº |
| | | var selection = window.getSelection(); |
| | | if (selection.rangeCount === 0) { |
| | | return; |
| | | } |
| | | var range = selection.getRangeAt(0); |
| | | |
| | | // 夿éåºå
容æ¯å¦å¨ç¼è¾å
容ä¹å
|
| | | var $containerElem = this.getSelectionContainerElem(range); |
| | | if (!$containerElem) { |
| | | return; |
| | | } |
| | | |
| | | // 夿éåºå
容æ¯å¦å¨ä¸å¯ç¼è¾åºåä¹å
|
| | | if ($containerElem.attr('contenteditable') === 'false' || $containerElem.parentUntil('[contenteditable=false]')) { |
| | | return; |
| | | } |
| | | |
| | | var editor = this.editor; |
| | | var $textElem = editor.$textElem; |
| | | if ($textElem.isContain($containerElem)) { |
| | | // æ¯ç¼è¾å
容ä¹å
ç |
| | | this._currentRange = range; |
| | | } |
| | | }, |
| | | |
| | | // æå éåº |
| | | collapseRange: function collapseRange(toStart) { |
| | | if (toStart == null) { |
| | | // é»è®¤ä¸º false |
| | | toStart = false; |
| | | } |
| | | var range = this._currentRange; |
| | | if (range) { |
| | | range.collapse(toStart); |
| | | } |
| | | }, |
| | | |
| | | // éä¸åºåçæå |
| | | getSelectionText: function getSelectionText() { |
| | | var range = this._currentRange; |
| | | if (range) { |
| | | return this._currentRange.toString(); |
| | | } else { |
| | | return ''; |
| | | } |
| | | }, |
| | | |
| | | // éåºç $Elem |
| | | getSelectionContainerElem: function getSelectionContainerElem(range) { |
| | | range = range || this._currentRange; |
| | | var elem = void 0; |
| | | if (range) { |
| | | elem = range.commonAncestorContainer; |
| | | return $(elem.nodeType === 1 ? elem : elem.parentNode); |
| | | } |
| | | }, |
| | | getSelectionStartElem: function getSelectionStartElem(range) { |
| | | range = range || this._currentRange; |
| | | var elem = void 0; |
| | | if (range) { |
| | | elem = range.startContainer; |
| | | return $(elem.nodeType === 1 ? elem : elem.parentNode); |
| | | } |
| | | }, |
| | | getSelectionEndElem: function getSelectionEndElem(range) { |
| | | range = range || this._currentRange; |
| | | var elem = void 0; |
| | | if (range) { |
| | | elem = range.endContainer; |
| | | return $(elem.nodeType === 1 ? elem : elem.parentNode); |
| | | } |
| | | }, |
| | | |
| | | // éåºæ¯å¦ä¸ºç©º |
| | | isSelectionEmpty: function isSelectionEmpty() { |
| | | var range = this._currentRange; |
| | | if (range && range.startContainer) { |
| | | if (range.startContainer === range.endContainer) { |
| | | if (range.startOffset === range.endOffset) { |
| | | return true; |
| | | } |
| | | } |
| | | } |
| | | return false; |
| | | }, |
| | | |
| | | // æ¢å¤éåº |
| | | restoreSelection: function restoreSelection() { |
| | | var selection = window.getSelection(); |
| | | selection.removeAllRanges(); |
| | | selection.addRange(this._currentRange); |
| | | }, |
| | | |
| | | // å建ä¸ä¸ªç©ºç½ï¼å³ ​ å符ï¼éåº |
| | | createEmptyRange: function createEmptyRange() { |
| | | var editor = this.editor; |
| | | var range = this.getRange(); |
| | | var $elem = void 0; |
| | | |
| | | if (!range) { |
| | | // å½åæ range |
| | | return; |
| | | } |
| | | if (!this.isSelectionEmpty()) { |
| | | // å½åéåºå¿
须没æå
容æå¯ä»¥ |
| | | return; |
| | | } |
| | | |
| | | try { |
| | | // ç®ååªæ¯æ webkit å
æ ¸ |
| | | if (UA.isWebkit()) { |
| | | // æå
¥ ​ |
| | | editor.cmd.do('insertHTML', '​'); |
| | | // ä¿®æ¹ offset ä½ç½® |
| | | range.setEnd(range.endContainer, range.endOffset + 1); |
| | | // åå¨ |
| | | this.saveRange(range); |
| | | } else { |
| | | $elem = $('<strong>​</strong>'); |
| | | editor.cmd.do('insertElem', $elem); |
| | | this.createRangeByElem($elem, true); |
| | | } |
| | | } catch (ex) { |
| | | // é¨åæ
åµä¸ä¼æ¥éï¼å
¼å®¹ä¸ä¸ |
| | | } |
| | | }, |
| | | |
| | | // æ ¹æ® $Elem 设置éåº |
| | | createRangeByElem: function createRangeByElem($elem, toStart, isContent) { |
| | | // $elem - ç»è¿å°è£
ç elem |
| | | // toStart - true å¼å§ä½ç½®ï¼false ç»æä½ç½® |
| | | // isContent - æ¯å¦éä¸Elemçå
容 |
| | | if (!$elem.length) { |
| | | return; |
| | | } |
| | | |
| | | var elem = $elem[0]; |
| | | var range = document.createRange(); |
| | | |
| | | if (isContent) { |
| | | range.selectNodeContents(elem); |
| | | } else { |
| | | range.selectNode(elem); |
| | | } |
| | | |
| | | if (typeof toStart === 'boolean') { |
| | | range.collapse(toStart); |
| | | } |
| | | |
| | | // åå¨ range |
| | | this.saveRange(range); |
| | | } |
| | | }; |
| | | |
| | | /* |
| | | ä¸ä¼ è¿åº¦æ¡ |
| | | */ |
| | | |
| | | function Progress(editor) { |
| | | this.editor = editor; |
| | | this._time = 0; |
| | | this._isShow = false; |
| | | this._isRender = false; |
| | | this._timeoutId = 0; |
| | | this.$textContainer = editor.$textContainerElem; |
| | | this.$bar = $('<div class="w-e-progress"></div>'); |
| | | } |
| | | |
| | | Progress.prototype = { |
| | | constructor: Progress, |
| | | |
| | | show: function show(progress) { |
| | | var _this = this; |
| | | |
| | | // ç¶æå¤ç |
| | | if (this._isShow) { |
| | | return; |
| | | } |
| | | this._isShow = true; |
| | | |
| | | // 渲æ |
| | | var $bar = this.$bar; |
| | | if (!this._isRender) { |
| | | var $textContainer = this.$textContainer; |
| | | $textContainer.append($bar); |
| | | } else { |
| | | this._isRender = true; |
| | | } |
| | | |
| | | // æ¹åè¿åº¦ï¼èæµï¼100ms 渲æä¸æ¬¡ï¼ |
| | | if (Date.now() - this._time > 100) { |
| | | if (progress <= 1) { |
| | | $bar.css('width', progress * 100 + '%'); |
| | | this._time = Date.now(); |
| | | } |
| | | } |
| | | |
| | | // éè |
| | | var timeoutId = this._timeoutId; |
| | | if (timeoutId) { |
| | | clearTimeout(timeoutId); |
| | | } |
| | | timeoutId = setTimeout(function () { |
| | | _this._hide(); |
| | | }, 500); |
| | | }, |
| | | |
| | | _hide: function _hide() { |
| | | var $bar = this.$bar; |
| | | $bar.remove(); |
| | | |
| | | // ä¿®æ¹ç¶æ |
| | | this._time = 0; |
| | | this._isShow = false; |
| | | this._isRender = false; |
| | | } |
| | | }; |
| | | |
| | | var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { |
| | | return typeof obj; |
| | | } : function (obj) { |
| | | return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; |
| | | }; |
| | | |
| | | /* |
| | | ä¸ä¼ å¾ç |
| | | */ |
| | | |
| | | // æé 彿° |
| | | function UploadImg(editor) { |
| | | this.editor = editor; |
| | | } |
| | | |
| | | // åå |
| | | UploadImg.prototype = { |
| | | constructor: UploadImg, |
| | | |
| | | // æ ¹æ® debug å¼¹åºä¸åçä¿¡æ¯ |
| | | _alert: function _alert(alertInfo, debugInfo) { |
| | | var editor = this.editor; |
| | | var debug = editor.config.debug; |
| | | var customAlert = editor.config.customAlert; |
| | | |
| | | if (debug) { |
| | | throw new Error('wangEditor: ' + (debugInfo || alertInfo)); |
| | | } else { |
| | | if (customAlert && typeof customAlert === 'function') { |
| | | customAlert(alertInfo); |
| | | } else { |
| | | alert(alertInfo); |
| | | } |
| | | } |
| | | }, |
| | | |
| | | // æ ¹æ®é¾æ¥æå
¥å¾ç |
| | | insertLinkImg: function insertLinkImg(link) { |
| | | var _this2 = this; |
| | | |
| | | if (!link) { |
| | | return; |
| | | } |
| | | var editor = this.editor; |
| | | var config = editor.config; |
| | | |
| | | // æ ¡éªæ ¼å¼ |
| | | var linkImgCheck = config.linkImgCheck; |
| | | var checkResult = void 0; |
| | | if (linkImgCheck && typeof linkImgCheck === 'function') { |
| | | checkResult = linkImgCheck(link); |
| | | if (typeof checkResult === 'string') { |
| | | // æ ¡éªå¤±è´¥ï¼æç¤ºä¿¡æ¯ |
| | | alert(checkResult); |
| | | return; |
| | | } |
| | | } |
| | | |
| | | editor.cmd.do('insertHTML', '<img src="' + link + '" style="max-width:100%;"/>'); |
| | | |
| | | // éªè¯å¾ç url æ¯å¦ææï¼æ æçè¯ç»åºæç¤º |
| | | var img = document.createElement('img'); |
| | | img.onload = function () { |
| | | var callback = config.linkImgCallback; |
| | | if (callback && typeof callback === 'function') { |
| | | callback(link); |
| | | } |
| | | |
| | | img = null; |
| | | }; |
| | | img.onerror = function () { |
| | | img = null; |
| | | // æ æ³æåä¸è½½å¾ç |
| | | _this2._alert('æå
¥å¾çé误', 'wangEditor: \u63D2\u5165\u56FE\u7247\u51FA\u9519\uFF0C\u56FE\u7247\u94FE\u63A5\u662F "' + link + '"\uFF0C\u4E0B\u8F7D\u8BE5\u94FE\u63A5\u5931\u8D25'); |
| | | return; |
| | | }; |
| | | img.onabort = function () { |
| | | img = null; |
| | | }; |
| | | img.src = link; |
| | | }, |
| | | |
| | | // ä¸ä¼ å¾ç |
| | | uploadImg: function uploadImg(files) { |
| | | var _this3 = this; |
| | | |
| | | if (!files || !files.length) { |
| | | return; |
| | | } |
| | | |
| | | // ------------------------------ è·åé
ç½®ä¿¡æ¯ ------------------------------ |
| | | var editor = this.editor; |
| | | var config = editor.config; |
| | | var uploadImgServer = config.uploadImgServer; |
| | | var uploadImgShowBase64 = config.uploadImgShowBase64; |
| | | |
| | | var maxSize = config.uploadImgMaxSize; |
| | | var maxSizeM = maxSize / 1024 / 1024; |
| | | var maxLength = config.uploadImgMaxLength || 10000; |
| | | var uploadFileName = config.uploadFileName || ''; |
| | | var uploadImgParams = config.uploadImgParams || {}; |
| | | var uploadImgParamsWithUrl = config.uploadImgParamsWithUrl; |
| | | var uploadImgHeaders = config.uploadImgHeaders || {}; |
| | | var hooks = config.uploadImgHooks || {}; |
| | | var timeout = config.uploadImgTimeout || 3000; |
| | | var withCredentials = config.withCredentials; |
| | | if (withCredentials == null) { |
| | | withCredentials = false; |
| | | } |
| | | var customUploadImg = config.customUploadImg; |
| | | |
| | | if (!customUploadImg) { |
| | | // 没æ customUploadImg çæ
åµä¸ï¼éè¦å¦ä¸ä¸¤ä¸ªé
ç½®æè½ç»§ç»è¿è¡å¾çä¸ä¼ |
| | | if (!uploadImgServer && !uploadImgShowBase64) { |
| | | return; |
| | | } |
| | | } |
| | | |
| | | // ------------------------------ éªè¯æä»¶ä¿¡æ¯ ------------------------------ |
| | | var resultFiles = []; |
| | | var errInfo = []; |
| | | arrForEach(files, function (file) { |
| | | var name = file.name; |
| | | var size = file.size; |
| | | |
| | | // chrome ä½çæ¬ name === undefined |
| | | if (!name || !size) { |
| | | return; |
| | | } |
| | | |
| | | if (/\.(jpg|jpeg|png|bmp|gif|webp)$/i.test(name) === false) { |
| | | // åç¼åä¸åæ³ï¼ä¸æ¯å¾ç |
| | | errInfo.push('\u3010' + name + '\u3011\u4E0D\u662F\u56FE\u7247'); |
| | | return; |
| | | } |
| | | if (maxSize < size) { |
| | | // ä¸ä¼ å¾çè¿å¤§ |
| | | errInfo.push('\u3010' + name + '\u3011\u5927\u4E8E ' + maxSizeM + 'M'); |
| | | return; |
| | | } |
| | | |
| | | // éªè¯éè¿çå å
¥ç»æå表 |
| | | resultFiles.push(file); |
| | | }); |
| | | // æåºéªè¯ä¿¡æ¯ |
| | | if (errInfo.length) { |
| | | this._alert('å¾çéªè¯æªéè¿: \n' + errInfo.join('\n')); |
| | | return; |
| | | } |
| | | if (resultFiles.length > maxLength) { |
| | | this._alert('䏿¬¡æå¤ä¸ä¼ ' + maxLength + 'å¼ å¾ç'); |
| | | return; |
| | | } |
| | | |
| | | // ------------------------------ èªå®ä¹ä¸ä¼ ------------------------------ |
| | | if (customUploadImg && typeof customUploadImg === 'function') { |
| | | customUploadImg(resultFiles, this.insertLinkImg.bind(this)); |
| | | |
| | | // 黿¢ä»¥ä¸ä»£ç æ§è¡ |
| | | return; |
| | | } |
| | | |
| | | // æ·»å å¾çæ°æ® |
| | | var formdata = new FormData(); |
| | | arrForEach(resultFiles, function (file) { |
| | | var name = uploadFileName || file.name; |
| | | formdata.append(name, file); |
| | | }); |
| | | |
| | | // ------------------------------ ä¸ä¼ å¾ç ------------------------------ |
| | | if (uploadImgServer && typeof uploadImgServer === 'string') { |
| | | // æ·»å åæ° |
| | | var uploadImgServerArr = uploadImgServer.split('#'); |
| | | uploadImgServer = uploadImgServerArr[0]; |
| | | var uploadImgServerHash = uploadImgServerArr[1] || ''; |
| | | objForEach(uploadImgParams, function (key, val) { |
| | | // å 使ç¨è
ååºï¼èªå®ä¹åæ°ä¸è½é»è®¤ encode ï¼ç± v3.1.1 çæ¬å¼å§æ³¨éæ |
| | | // val = encodeURIComponent(val) |
| | | |
| | | // 第ä¸ï¼å°åæ°æ¼æ¥å° url ä¸ |
| | | if (uploadImgParamsWithUrl) { |
| | | if (uploadImgServer.indexOf('?') > 0) { |
| | | uploadImgServer += '&'; |
| | | } else { |
| | | uploadImgServer += '?'; |
| | | } |
| | | uploadImgServer = uploadImgServer + key + '=' + val; |
| | | } |
| | | |
| | | // 第äºï¼å°åæ°æ·»å å° formdata ä¸ |
| | | formdata.append(key, val); |
| | | }); |
| | | if (uploadImgServerHash) { |
| | | uploadImgServer += '#' + uploadImgServerHash; |
| | | } |
| | | |
| | | // å®ä¹ xhr |
| | | var xhr = new XMLHttpRequest(); |
| | | xhr.open('POST', uploadImgServer); |
| | | |
| | | // 设置è¶
æ¶ |
| | | xhr.timeout = timeout; |
| | | xhr.ontimeout = function () { |
| | | // hook - timeout |
| | | if (hooks.timeout && typeof hooks.timeout === 'function') { |
| | | hooks.timeout(xhr, editor); |
| | | } |
| | | |
| | | _this3._alert('ä¸ä¼ å¾çè¶
æ¶'); |
| | | }; |
| | | |
| | | // çæ§ progress |
| | | if (xhr.upload) { |
| | | xhr.upload.onprogress = function (e) { |
| | | var percent = void 0; |
| | | // è¿åº¦æ¡ |
| | | var progressBar = new Progress(editor); |
| | | if (e.lengthComputable) { |
| | | percent = e.loaded / e.total; |
| | | progressBar.show(percent); |
| | | } |
| | | }; |
| | | } |
| | | |
| | | // è¿åæ°æ® |
| | | xhr.onreadystatechange = function () { |
| | | var result = void 0; |
| | | if (xhr.readyState === 4) { |
| | | if (xhr.status < 200 || xhr.status >= 300) { |
| | | // hook - error |
| | | if (hooks.error && typeof hooks.error === 'function') { |
| | | hooks.error(xhr, editor); |
| | | } |
| | | |
| | | // xhr è¿åç¶æé误 |
| | | _this3._alert('ä¸ä¼ å¾çåçé误', '\u4E0A\u4F20\u56FE\u7247\u53D1\u751F\u9519\u8BEF\uFF0C\u670D\u52A1\u5668\u8FD4\u56DE\u72B6\u6001\u662F ' + xhr.status); |
| | | return; |
| | | } |
| | | |
| | | result = xhr.responseText; |
| | | if ((typeof result === 'undefined' ? 'undefined' : _typeof(result)) !== 'object') { |
| | | try { |
| | | result = JSON.parse(result); |
| | | } catch (ex) { |
| | | // hook - fail |
| | | if (hooks.fail && typeof hooks.fail === 'function') { |
| | | hooks.fail(xhr, editor, result); |
| | | } |
| | | |
| | | _this3._alert('ä¸ä¼ å¾ç失败', 'ä¸ä¼ å¾çè¿åç»æé误ï¼è¿åç»ææ¯: ' + result); |
| | | return; |
| | | } |
| | | } |
| | | if (!hooks.customInsert && result.errno != '0') { |
| | | // hook - fail |
| | | if (hooks.fail && typeof hooks.fail === 'function') { |
| | | hooks.fail(xhr, editor, result); |
| | | } |
| | | |
| | | // æ°æ®é误 |
| | | _this3._alert('ä¸ä¼ å¾ç失败', 'ä¸ä¼ å¾çè¿åç»æé误ï¼è¿åç»æ errno=' + result.errno); |
| | | } else { |
| | | if (hooks.customInsert && typeof hooks.customInsert === 'function') { |
| | | // 使ç¨è
èªå®ä¹æå
¥æ¹æ³ |
| | | hooks.customInsert(_this3.insertLinkImg.bind(_this3), result, editor); |
| | | } else { |
| | | // å°å¾çæå
¥ç¼è¾å¨ |
| | | var data = result.data || []; |
| | | data.forEach(function (link) { |
| | | _this3.insertLinkImg(link); |
| | | }); |
| | | } |
| | | |
| | | // hook - success |
| | | if (hooks.success && typeof hooks.success === 'function') { |
| | | hooks.success(xhr, editor, result); |
| | | } |
| | | } |
| | | } |
| | | }; |
| | | |
| | | // hook - before |
| | | if (hooks.before && typeof hooks.before === 'function') { |
| | | var beforeResult = hooks.before(xhr, editor, resultFiles); |
| | | if (beforeResult && (typeof beforeResult === 'undefined' ? 'undefined' : _typeof(beforeResult)) === 'object') { |
| | | if (beforeResult.prevent) { |
| | | // 妿è¿åçç»ææ¯ {prevent: true, msg: 'xxxx'} åè¡¨ç¤ºç¨æ·æ¾å¼ä¸ä¼ |
| | | this._alert(beforeResult.msg); |
| | | return; |
| | | } |
| | | } |
| | | } |
| | | |
| | | // èªå®ä¹ headers |
| | | objForEach(uploadImgHeaders, function (key, val) { |
| | | xhr.setRequestHeader(key, val); |
| | | }); |
| | | |
| | | // è·¨åä¼ cookie |
| | | xhr.withCredentials = withCredentials; |
| | | |
| | | // åéè¯·æ± |
| | | xhr.send(formdata); |
| | | |
| | | // 注æï¼è¦ return ãä¸å»æä½æ¥ä¸æ¥ç base64 æ¾ç¤ºæ¹å¼ |
| | | return; |
| | | } |
| | | |
| | | // ------------------------------ æ¾ç¤º base64 æ ¼å¼ ------------------------------ |
| | | if (uploadImgShowBase64) { |
| | | arrForEach(files, function (file) { |
| | | var _this = _this3; |
| | | var reader = new FileReader(); |
| | | reader.readAsDataURL(file); |
| | | reader.onload = function () { |
| | | _this.insertLinkImg(this.result); |
| | | }; |
| | | }); |
| | | } |
| | | } |
| | | }; |
| | | |
| | | /* |
| | | ç¼è¾å¨æé 彿° |
| | | */ |
| | | |
| | | // idï¼ç´¯å |
| | | var editorId = 1; |
| | | |
| | | // æé 彿° |
| | | function Editor(toolbarSelector, textSelector) { |
| | | if (toolbarSelector == null) { |
| | | // 没æä¼ å
¥ä»»ä½åæ°ï¼æ¥é |
| | | throw new Error('é误ï¼åå§åç¼è¾å¨æ¶åæªä¼ å
¥ä»»ä½åæ°ï¼è¯·æ¥é
ææ¡£'); |
| | | } |
| | | // idï¼ç¨ä»¥åºåå个页é¢ä¸åçç¼è¾å¨å¯¹è±¡ |
| | | this.id = 'wangEditor-' + editorId++; |
| | | |
| | | this.toolbarSelector = toolbarSelector; |
| | | this.textSelector = textSelector; |
| | | |
| | | // èªå®ä¹é
ç½® |
| | | this.customConfig = {}; |
| | | } |
| | | |
| | | // ä¿®æ¹åå |
| | | Editor.prototype = { |
| | | constructor: Editor, |
| | | |
| | | // åå§åé
ç½® |
| | | _initConfig: function _initConfig() { |
| | | // _config æ¯é»è®¤é
ç½®ï¼this.customConfig æ¯ç¨æ·èªå®ä¹é
ç½®ï¼å°å®ä»¬ merge ä¹ååèµå¼ |
| | | var target = {}; |
| | | this.config = Object.assign(target, config, this.customConfig); |
| | | |
| | | // å°è¯è¨é
ç½®ï¼çææ£åè¡¨è¾¾å¼ |
| | | var langConfig = this.config.lang || {}; |
| | | var langArgs = []; |
| | | objForEach(langConfig, function (key, val) { |
| | | // key å³éè¦çææ£å表达å¼çè§åï¼å¦âæå
¥é¾æ¥â |
| | | // val å³éè¦è¢«æ¿æ¢æçè¯è¨ï¼å¦âinsert linkâ |
| | | langArgs.push({ |
| | | reg: new RegExp(key, 'img'), |
| | | val: val |
| | | |
| | | }); |
| | | }); |
| | | this.config.langArgs = langArgs; |
| | | }, |
| | | |
| | | // åå§å DOM |
| | | _initDom: function _initDom() { |
| | | var _this = this; |
| | | |
| | | var toolbarSelector = this.toolbarSelector; |
| | | var $toolbarSelector = $(toolbarSelector); |
| | | var textSelector = this.textSelector; |
| | | |
| | | var config$$1 = this.config; |
| | | var zIndex = config$$1.zIndex; |
| | | |
| | | // å®ä¹åé |
| | | var $toolbarElem = void 0, |
| | | $textContainerElem = void 0, |
| | | $textElem = void 0, |
| | | $children = void 0; |
| | | |
| | | if (textSelector == null) { |
| | | // åªä¼ å
¥ä¸ä¸ªåæ°ï¼å³æ¯å®¹å¨ç鿩卿å
ç´ ï¼toolbar å text çå
ç´ èªè¡å建 |
| | | $toolbarElem = $('<div></div>'); |
| | | $textContainerElem = $('<div></div>'); |
| | | |
| | | // å°ç¼è¾å¨åºååæçå
å®¹ï¼æåèµ·æ¥ |
| | | $children = $toolbarSelector.children(); |
| | | |
| | | // æ·»å å° DOM ç»æä¸ |
| | | $toolbarSelector.append($toolbarElem).append($textContainerElem); |
| | | |
| | | // èªè¡å建çï¼éè¦é
ç½®é»è®¤çæ ·å¼ |
| | | $toolbarElem.css('background-color', '#f1f1f1').css('border', '1px solid #ccc'); |
| | | $textContainerElem.css('border', '1px solid #ccc').css('border-top', 'none').css('height', '300px'); |
| | | } else { |
| | | // toolbar å text çéæ©å¨é½æå¼ï¼è®°å½å±æ§ |
| | | $toolbarElem = $toolbarSelector; |
| | | $textContainerElem = $(textSelector); |
| | | // å°ç¼è¾å¨åºååæçå
å®¹ï¼æåèµ·æ¥ |
| | | $children = $textContainerElem.children(); |
| | | } |
| | | |
| | | // ç¼è¾åºå |
| | | $textElem = $('<div></div>'); |
| | | $textElem.attr('contenteditable', 'true').css('width', '100%').css('height', '100%'); |
| | | |
| | | // åå§åç¼è¾åºåå
容 |
| | | if ($children && $children.length) { |
| | | $textElem.append($children); |
| | | } else { |
| | | $textElem.append($('<p><br></p>')); |
| | | } |
| | | |
| | | // ç¼è¾åºåå å
¥DOM |
| | | $textContainerElem.append($textElem); |
| | | |
| | | // 设置éç¨ç class |
| | | $toolbarElem.addClass('w-e-toolbar'); |
| | | $textContainerElem.addClass('w-e-text-container'); |
| | | $textContainerElem.css('z-index', zIndex); |
| | | $textElem.addClass('w-e-text'); |
| | | |
| | | // æ·»å ID |
| | | var toolbarElemId = getRandom('toolbar-elem'); |
| | | $toolbarElem.attr('id', toolbarElemId); |
| | | var textElemId = getRandom('text-elem'); |
| | | $textElem.attr('id', textElemId); |
| | | |
| | | // è®°å½å±æ§ |
| | | this.$toolbarElem = $toolbarElem; |
| | | this.$textContainerElem = $textContainerElem; |
| | | this.$textElem = $textElem; |
| | | this.toolbarElemId = toolbarElemId; |
| | | this.textElemId = textElemId; |
| | | |
| | | // è®°å½è¾å
¥æ³çå¼å§åç»æ |
| | | var compositionEnd = true; |
| | | $textContainerElem.on('compositionstart', function () { |
| | | // è¾å
¥æ³å¼å§è¾å
¥ |
| | | compositionEnd = false; |
| | | }); |
| | | $textContainerElem.on('compositionend', function () { |
| | | // è¾å
¥æ³ç»æè¾å
¥ |
| | | compositionEnd = true; |
| | | }); |
| | | |
| | | // ç»å® onchange |
| | | $textContainerElem.on('click keyup', function () { |
| | | // è¾å
¥æ³ç»ææåºå onchange |
| | | compositionEnd && _this.change && _this.change(); |
| | | }); |
| | | $toolbarElem.on('click', function () { |
| | | this.change && this.change(); |
| | | }); |
| | | |
| | | //ç»å® onfocus ä¸ onblur äºä»¶ |
| | | if (config$$1.onfocus || config$$1.onblur) { |
| | | // å½åç¼è¾å¨æ¯å¦æ¯ç¦ç¹ç¶æ |
| | | this.isFocus = false; |
| | | |
| | | $(document).on('click', function (e) { |
| | | //夿å½åç¹å»å
ç´ æ¯å¦å¨ç¼è¾å¨å
|
| | | var isChild = $textElem.isContain($(e.target)); |
| | | |
| | | //夿å½åç¹å»å
ç´ æ¯å¦ä¸ºå·¥å
·æ |
| | | var isToolbar = $toolbarElem.isContain($(e.target)); |
| | | var isMenu = $toolbarElem[0] == e.target ? true : false; |
| | | |
| | | if (!isChild) { |
| | | //è¥ä¸ºéæ©å·¥å
·æ ä¸çåè½ï¼åä¸è§ä¸ºæbluræä½ |
| | | if (isToolbar && !isMenu) { |
| | | return; |
| | | } |
| | | |
| | | if (_this.isFocus) { |
| | | _this.onblur && _this.onblur(); |
| | | } |
| | | _this.isFocus = false; |
| | | } else { |
| | | if (!_this.isFocus) { |
| | | _this.onfocus && _this.onfocus(); |
| | | } |
| | | _this.isFocus = true; |
| | | } |
| | | }); |
| | | } |
| | | }, |
| | | |
| | | // å°è£
command |
| | | _initCommand: function _initCommand() { |
| | | this.cmd = new Command(this); |
| | | }, |
| | | |
| | | // å°è£
selection range API |
| | | _initSelectionAPI: function _initSelectionAPI() { |
| | | this.selection = new API(this); |
| | | }, |
| | | |
| | | // æ·»å å¾çä¸ä¼ |
| | | _initUploadImg: function _initUploadImg() { |
| | | this.uploadImg = new UploadImg(this); |
| | | }, |
| | | |
| | | // åå§åèå |
| | | _initMenus: function _initMenus() { |
| | | this.menus = new Menus(this); |
| | | this.menus.init(); |
| | | }, |
| | | |
| | | // æ·»å text åºå |
| | | _initText: function _initText() { |
| | | this.txt = new Text(this); |
| | | this.txt.init(); |
| | | }, |
| | | |
| | | // åå§åéåºï¼å°å
æ å®ä½å°å
å®¹å°¾é¨ |
| | | initSelection: function initSelection(newLine) { |
| | | var $textElem = this.$textElem; |
| | | var $children = $textElem.children(); |
| | | if (!$children.length) { |
| | | // 妿ç¼è¾å¨åºåæ å
å®¹ï¼æ·»å ä¸ä¸ªç©ºè¡ï¼éæ°è®¾ç½®éåº |
| | | $textElem.append($('<p><br></p>')); |
| | | this.initSelection(); |
| | | return; |
| | | } |
| | | |
| | | var $last = $children.last(); |
| | | |
| | | if (newLine) { |
| | | // æ°å¢ä¸ä¸ªç©ºè¡ |
| | | var html = $last.html().toLowerCase(); |
| | | var nodeName = $last.getNodeName(); |
| | | if (html !== '<br>' && html !== '<br\/>' || nodeName !== 'P') { |
| | | // æåä¸ä¸ªå
ç´ ä¸æ¯ <p><br></p>ï¼æ·»å ä¸ä¸ªç©ºè¡ï¼éæ°è®¾ç½®éåº |
| | | $textElem.append($('<p><br></p>')); |
| | | this.initSelection(); |
| | | return; |
| | | } |
| | | } |
| | | |
| | | this.selection.createRangeByElem($last, false, true); |
| | | this.selection.restoreSelection(); |
| | | }, |
| | | |
| | | // ç»å®äºä»¶ |
| | | _bindEvent: function _bindEvent() { |
| | | // -------- ç»å® onchange äºä»¶ -------- |
| | | var onChangeTimeoutId = 0; |
| | | var beforeChangeHtml = this.txt.html(); |
| | | var config$$1 = this.config; |
| | | |
| | | // onchange 触åå»¶è¿æ¶é´ |
| | | var onchangeTimeout = config$$1.onchangeTimeout; |
| | | onchangeTimeout = parseInt(onchangeTimeout, 10); |
| | | if (!onchangeTimeout || onchangeTimeout <= 0) { |
| | | onchangeTimeout = 200; |
| | | } |
| | | |
| | | var onchange = config$$1.onchange; |
| | | if (onchange && typeof onchange === 'function') { |
| | | // 触å change çæä¸ä¸ªåºæ¯ï¼ |
| | | // 1. $textContainerElem.on('click keyup') |
| | | // 2. $toolbarElem.on('click') |
| | | // 3. editor.cmd.do() |
| | | this.change = function () { |
| | | // 夿æ¯å¦æåå |
| | | var currentHtml = this.txt.html(); |
| | | |
| | | if (currentHtml.length === beforeChangeHtml.length) { |
| | | // éè¦æ¯è¾æ¯ä¸ä¸ªå符 |
| | | if (currentHtml === beforeChangeHtml) { |
| | | return; |
| | | } |
| | | } |
| | | |
| | | // æ§è¡ï¼ä½¿ç¨èæµ |
| | | if (onChangeTimeoutId) { |
| | | clearTimeout(onChangeTimeoutId); |
| | | } |
| | | onChangeTimeoutId = setTimeout(function () { |
| | | // 触åé
ç½®ç onchange 彿° |
| | | onchange(currentHtml); |
| | | beforeChangeHtml = currentHtml; |
| | | }, onchangeTimeout); |
| | | }; |
| | | } |
| | | |
| | | // -------- ç»å® onblur äºä»¶ -------- |
| | | var onblur = config$$1.onblur; |
| | | if (onblur && typeof onblur === 'function') { |
| | | this.onblur = function () { |
| | | var currentHtml = this.txt.html(); |
| | | onblur(currentHtml); |
| | | }; |
| | | } |
| | | |
| | | // -------- ç»å® onfocus äºä»¶ -------- |
| | | var onfocus = config$$1.onfocus; |
| | | if (onfocus && typeof onfocus === 'function') { |
| | | this.onfocus = function () { |
| | | onfocus(); |
| | | }; |
| | | } |
| | | }, |
| | | |
| | | // å建ç¼è¾å¨ |
| | | create: function create() { |
| | | // åå§åé
ç½®ä¿¡æ¯ |
| | | this._initConfig(); |
| | | |
| | | // åå§å DOM |
| | | this._initDom(); |
| | | |
| | | // å°è£
command API |
| | | this._initCommand(); |
| | | |
| | | // å°è£
selection range API |
| | | this._initSelectionAPI(); |
| | | |
| | | // æ·»å text |
| | | this._initText(); |
| | | |
| | | // åå§åèå |
| | | this._initMenus(); |
| | | |
| | | // æ·»å å¾çä¸ä¼ |
| | | this._initUploadImg(); |
| | | |
| | | // åå§åéåºï¼å°å
æ å®ä½å°å
å®¹å°¾é¨ |
| | | this.initSelection(true); |
| | | |
| | | // ç»å®äºä»¶ |
| | | this._bindEvent(); |
| | | }, |
| | | |
| | | // è§£ç»ææäºä»¶ï¼ææ¶ä¸å¯¹å¤å¼æ¾ï¼ |
| | | _offAllEvent: function _offAllEvent() { |
| | | $.offAll(); |
| | | } |
| | | }; |
| | | |
| | | // æ£éªæ¯å¦æµè§å¨ç¯å¢ |
| | | try { |
| | | document; |
| | | } catch (ex) { |
| | | throw new Error('è¯·å¨æµè§å¨ç¯å¢ä¸è¿è¡'); |
| | | } |
| | | |
| | | // polyfill |
| | | polyfill(); |
| | | |
| | | // è¿éç `inlinecss` å°è¢«æ¿æ¢æ css 代ç çå
容ï¼è¯¦æ
å¯å» ./gulpfile.js ä¸æç´¢ `inlinecss` å
³é®å |
| | | var inlinecss = '.w-e-toolbar,.w-e-text-container,.w-e-menu-panel { padding: 0; margin: 0; box-sizing: border-box;}.w-e-toolbar *,.w-e-text-container *,.w-e-menu-panel * { padding: 0; margin: 0; box-sizing: border-box;}.w-e-clear-fix:after { content: ""; display: table; clear: both;}.w-e-toolbar .w-e-droplist { position: absolute; left: 0; top: 0; background-color: #fff; border: 1px solid #f1f1f1; border-right-color: #ccc; border-bottom-color: #ccc;}.w-e-toolbar .w-e-droplist .w-e-dp-title { text-align: center; color: #999; line-height: 2; border-bottom: 1px solid #f1f1f1; font-size: 13px;}.w-e-toolbar .w-e-droplist ul.w-e-list { list-style: none; line-height: 1;}.w-e-toolbar .w-e-droplist ul.w-e-list li.w-e-item { color: #333; padding: 5px 0;}.w-e-toolbar .w-e-droplist ul.w-e-list li.w-e-item:hover { background-color: #f1f1f1;}.w-e-toolbar .w-e-droplist ul.w-e-block { list-style: none; text-align: left; padding: 5px;}.w-e-toolbar .w-e-droplist ul.w-e-block li.w-e-item { display: inline-block; *display: inline; *zoom: 1; padding: 3px 5px;}.w-e-toolbar .w-e-droplist ul.w-e-block li.w-e-item:hover { background-color: #f1f1f1;}@font-face { font-family: \'w-e-icon\'; src: url(data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAABhQAAsAAAAAGAQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABPUy8yAAABCAAAAGAAAABgDxIPBGNtYXAAAAFoAAABBAAAAQQrSf4BZ2FzcAAAAmwAAAAIAAAACAAAABBnbHlmAAACdAAAEvAAABLwfpUWUWhlYWQAABVkAAAANgAAADYQp00kaGhlYQAAFZwAAAAkAAAAJAfEA+FobXR4AAAVwAAAAIQAAACEeAcD7GxvY2EAABZEAAAARAAAAERBSEX+bWF4cAAAFogAAAAgAAAAIAAsALZuYW1lAAAWqAAAAYYAAAGGmUoJ+3Bvc3QAABgwAAAAIAAAACAAAwAAAAMD3gGQAAUAAAKZAswAAACPApkCzAAAAesAMwEJAAAAAAAAAAAAAAAAAAAAARAAAAAAAAAAAAAAAAAAAAAAQAAA8fwDwP/AAEADwABAAAAAAQAAAAAAAAAAAAAAIAAAAAAAAwAAAAMAAAAcAAEAAwAAABwAAwABAAAAHAAEAOgAAAA2ACAABAAWAAEAIOkG6Q3pEulH6Wbpd+m56bvpxunL6d/qDepc6l/qZepo6nHqefAN8BTxIPHc8fz//f//AAAAAAAg6QbpDekS6UfpZel36bnpu+nG6cvp3+oN6lzqX+pi6mjqcep38A3wFPEg8dzx/P/9//8AAf/jFv4W+Bb0FsAWoxaTFlIWURZHFkMWMBYDFbUVsxWxFa8VpxWiEA8QCQ7+DkMOJAADAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQAB//8ADwABAAAAAAAAAAAAAgAANzkBAAAAAAEAAAAAAAAAAAACAAA3OQEAAAAAAQAAAAAAAAAAAAIAADc5AQAAAAACAAD/wAQAA8AABAATAAABNwEnAQMuAScTNwEjAQMlATUBBwGAgAHAQP5Anxc7MmOAAYDA/oDAAoABgP6ATgFAQAHAQP5A/p0yOxcBEU4BgP6A/YDAAYDA/oCAAAQAAAAABAADgAAQACEALQA0AAABOAExETgBMSE4ATEROAExITUhIgYVERQWMyEyNjURNCYjBxQGIyImNTQ2MzIWEyE1EwEzNwPA/IADgPyAGiYmGgOAGiYmGoA4KCg4OCgoOED9AOABAEDgA0D9AAMAQCYa/QAaJiYaAwAaJuAoODgoKDg4/biAAYD+wMAAAAIAAABABAADQAA4ADwAAAEmJy4BJyYjIgcOAQcGBwYHDgEHBhUUFx4BFxYXFhceARcWMzI3PgE3Njc2Nz4BNzY1NCcuAScmJwERDQED1TY4OXY8PT8/PTx2OTg2CwcICwMDAwMLCAcLNjg5djw9Pz89PHY5ODYLBwgLAwMDAwsIBwv9qwFA/sADIAgGBggCAgICCAYGCCkqKlktLi8vLi1ZKiopCAYGCAICAgIIBgYIKSoqWS0uLy8uLVkqKin94AGAwMAAAAAAAgDA/8ADQAPAABsAJwAAASIHDgEHBhUUFx4BFxYxMDc+ATc2NTQnLgEnJgMiJjU0NjMyFhUUBgIAQjs6VxkZMjJ4MjIyMngyMhkZVzo7QlBwcFBQcHADwBkZVzo7Qnh9fcxBQUFBzH19eEI7OlcZGf4AcFBQcHBQUHAAAAEAAAAABAADgAArAAABIgcOAQcGBycRISc+ATMyFx4BFxYVFAcOAQcGBxc2Nz4BNzY1NCcuAScmIwIANTIyXCkpI5YBgJA1i1BQRUZpHh4JCSIYGB5VKCAgLQwMKCiLXl1qA4AKCycbHCOW/oCQNDweHmlGRVArKClJICEaYCMrK2I2NjlqXV6LKCgAAQAAAAAEAAOAACoAABMUFx4BFxYXNyYnLgEnJjU0Nz4BNzYzMhYXByERByYnLgEnJiMiBw4BBwYADAwtICAoVR4YGCIJCR4eaUZFUFCLNZABgJYjKSlcMjI1al1eiygoAYA5NjZiKysjYBohIEkpKCtQRUZpHh48NJABgJYjHBsnCwooKIteXQAAAAACAAAAQAQBAwAAJgBNAAATMhceARcWFRQHDgEHBiMiJy4BJyY1JzQ3PgE3NjMVIgYHDgEHPgEhMhceARcWFRQHDgEHBiMiJy4BJyY1JzQ3PgE3NjMVIgYHDgEHPgHhLikpPRESEhE9KSkuLikpPRESASMjelJRXUB1LQkQBwgSAkkuKSk9ERISET0pKS4uKSk9ERIBIyN6UlFdQHUtCRAHCBICABIRPSkpLi4pKT0REhIRPSkpLiBdUVJ6IyOAMC4IEwoCARIRPSkpLi4pKT0REhIRPSkpLiBdUVJ6IyOAMC4IEwoCAQAABgBA/8AEAAPAAAMABwALABEAHQApAAAlIRUhESEVIREhFSEnESM1IzUTFTMVIzU3NSM1MxUVESM1MzUjNTM1IzUBgAKA/YACgP2AAoD9gMBAQECAwICAwMCAgICAgIACAIACAIDA/wDAQP3yMkCSPDJAku7+wEBAQEBAAAYAAP/ABAADwAADAAcACwAXACMALwAAASEVIREhFSERIRUhATQ2MzIWFRQGIyImETQ2MzIWFRQGIyImETQ2MzIWFRQGIyImAYACgP2AAoD9gAKA/YD+gEs1NUtLNTVLSzU1S0s1NUtLNTVLSzU1SwOAgP8AgP8AgANANUtLNTVLS/61NUtLNTVLS/61NUtLNTVLSwADAAAAAAQAA6AAAwANABQAADchFSElFSE1EyEVITUhJQkBIxEjEQAEAPwABAD8AIABAAEAAQD9YAEgASDggEBAwEBAAQCAgMABIP7g/wABAAAAAAACAB7/zAPiA7QAMwBkAAABIiYnJicmNDc2PwE+ATMyFhcWFxYUBwYPAQYiJyY0PwE2NCcuASMiBg8BBhQXFhQHDgEjAyImJyYnJjQ3Nj8BNjIXFhQPAQYUFx4BMzI2PwE2NCcmNDc2MhcWFxYUBwYPAQ4BIwG4ChMIIxISEhIjwCNZMTFZIyMSEhISI1gPLA8PD1gpKRQzHBwzFMApKQ8PCBMKuDFZIyMSEhISI1gPLA8PD1gpKRQzHBwzFMApKQ8PDysQIxISEhIjwCNZMQFECAckLS1eLS0kwCIlJSIkLS1eLS0kVxAQDysPWCl0KRQVFRTAKXQpDysQBwj+iCUiJC0tXi0tJFcQEA8rD1gpdCkUFRUUwCl0KQ8rEA8PJC0tXi0tJMAiJQAAAAAFAAD/wAQAA8AAGwA3AFMAXwBrAAAFMjc+ATc2NTQnLgEnJiMiBw4BBwYVFBceARcWEzIXHgEXFhUUBw4BBwYjIicuAScmNTQ3PgE3NhMyNz4BNzY3BgcOAQcGIyInLgEnJicWFx4BFxYnNDYzMhYVFAYjIiYlNDYzMhYVFAYjIiYCAGpdXosoKCgoi15dampdXosoKCgoi15dalZMTHEgISEgcUxMVlZMTHEgISEgcUxMVisrKlEmJiMFHBtWODc/Pzc4VhscBSMmJlEqK9UlGxslJRsbJQGAJRsbJSUbGyVAKCiLXl1qal1eiygoKCiLXl1qal1eiygoA6AhIHFMTFZWTExxICEhIHFMTFZWTExxICH+CQYGFRAQFEM6OlYYGRkYVjo6QxQQEBUGBvcoODgoKDg4KCg4OCgoODgAAAMAAP/ABAADwAAbADcAQwAAASIHDgEHBhUUFx4BFxYzMjc+ATc2NTQnLgEnJgMiJy4BJyY1NDc+ATc2MzIXHgEXFhUUBw4BBwYTBycHFwcXNxc3JzcCAGpdXosoKCgoi15dampdXosoKCgoi15dalZMTHEgISEgcUxMVlZMTHEgISEgcUxMSqCgYKCgYKCgYKCgA8AoKIteXWpqXV6LKCgoKIteXWpqXV6LKCj8YCEgcUxMVlZMTHEgISEgcUxMVlZMTHEgIQKgoKBgoKBgoKBgoKAAAQBl/8ADmwPAACkAAAEiJiMiBw4BBwYVFBYzLgE1NDY3MAcGAgcGBxUhEzM3IzceATMyNjcOAQMgRGhGcVNUbRobSUgGDWVKEBBLPDxZAT1sxizXNC1VJi5QGB09A7AQHh1hPj9BTTsLJjeZbwN9fv7Fj5AjGQIAgPYJDzdrCQcAAAAAAgAAAAAEAAOAAAkAFwAAJTMHJzMRIzcXIyURJyMRMxUhNTMRIwcRA4CAoKCAgKCggP8AQMCA/oCAwEDAwMACAMDAwP8AgP1AQEACwIABAAADAMAAAANAA4AAFgAfACgAAAE+ATU0Jy4BJyYjIREhMjc+ATc2NTQmATMyFhUUBisBEyMRMzIWFRQGAsQcIBQURi4vNf7AAYA1Ly5GFBRE/oRlKjw8KWafn58sPj4B2yJULzUvLkYUFPyAFBRGLi81RnQBRks1NUv+gAEASzU1SwAAAAACAMAAAANAA4AAHwAjAAABMxEUBw4BBwYjIicuAScmNREzERQWFx4BMzI2Nz4BNQEhFSECwIAZGVc6O0JCOzpXGRmAGxgcSSgoSRwYG/4AAoD9gAOA/mA8NDVOFhcXFk41NDwBoP5gHjgXGBsbGBc4Hv6ggAAAAAABAIAAAAOAA4AACwAAARUjATMVITUzASM1A4CA/sCA/kCAAUCAA4BA/QBAQAMAQAABAAAAAAQAA4AAPQAAARUjHgEVFAYHDgEjIiYnLgE1MxQWMzI2NTQmIyE1IS4BJy4BNTQ2Nz4BMzIWFx4BFSM0JiMiBhUUFjMyFhcEAOsVFjUwLHE+PnEsMDWAck5OcnJO/gABLAIEATA1NTAscT4+cSwwNYByTk5yck47bisBwEAdQSI1YiQhJCQhJGI1NExMNDRMQAEDASRiNTViJCEkJCEkYjU0TEw0NEwhHwAAAAcAAP/ABAADwAADAAcACwAPABMAGwAjAAATMxUjNzMVIyUzFSM3MxUjJTMVIwMTIRMzEyETAQMhAyMDIQMAgIDAwMABAICAwMDAAQCAgBAQ/QAQIBACgBD9QBADABAgEP2AEAHAQEBAQEBAQEBAAkD+QAHA/oABgPwAAYD+gAFA/sAAAAoAAAAABAADgAADAAcACwAPABMAFwAbAB8AIwAnAAATESERATUhFR0BITUBFSE1IxUhNREhFSElIRUhETUhFQEhFSEhNSEVAAQA/YABAP8AAQD/AED/AAEA/wACgAEA/wABAPyAAQD/AAKAAQADgPyAA4D9wMDAQMDAAgDAwMDA/wDAwMABAMDA/sDAwMAAAAUAAAAABAADgAADAAcACwAPABMAABMhFSEVIRUhESEVIREhFSERIRUhAAQA/AACgP2AAoD9gAQA/AAEAPwAA4CAQID/AIABQID/AIAAAAAABQAAAAAEAAOAAAMABwALAA8AEwAAEyEVIRchFSERIRUhAyEVIREhFSEABAD8AMACgP2AAoD9gMAEAPwABAD8AAOAgECA/wCAAUCA/wCAAAAFAAAAAAQAA4AAAwAHAAsADwATAAATIRUhBSEVIREhFSEBIRUhESEVIQAEAPwAAYACgP2AAoD9gP6ABAD8AAQA/AADgIBAgP8AgAFAgP8AgAAAAAABAD8APwLmAuYALAAAJRQPAQYjIi8BBwYjIi8BJjU0PwEnJjU0PwE2MzIfATc2MzIfARYVFA8BFxYVAuYQThAXFxCoqBAXFhBOEBCoqBAQThAWFxCoqBAXFxBOEBCoqBDDFhBOEBCoqBAQThAWFxCoqBAXFxBOEBCoqBAQThAXFxCoqBAXAAAABgAAAAADJQNuABQAKAA8AE0AVQCCAAABERQHBisBIicmNRE0NzY7ATIXFhUzERQHBisBIicmNRE0NzY7ATIXFhcRFAcGKwEiJyY1ETQ3NjsBMhcWExEhERQXFhcWMyEyNzY3NjUBIScmJyMGBwUVFAcGKwERFAcGIyEiJyY1ESMiJyY9ATQ3NjsBNzY3NjsBMhcWHwEzMhcWFQElBgUIJAgFBgYFCCQIBQaSBQUIJQgFBQUFCCUIBQWSBQUIJQgFBQUFCCUIBQVJ/gAEBAUEAgHbAgQEBAT+gAEAGwQGtQYEAfcGBQg3Ghsm/iUmGxs3CAUFBQUIsSgIFxYXtxcWFgkosAgFBgIS/rcIBQUFBQgBSQgFBgYFCP63CAUFBQUIAUkIBQYGBQj+twgFBQUFCAFJCAUGBgX+WwId/eMNCwoFBQUFCgsNAmZDBQICBVUkCAYF/eMwIiMhIi8CIAUGCCQIBQVgFQ8PDw8VYAUFCAACAAcASQO3Aq8AGgAuAAAJAQYjIi8BJjU0PwEnJjU0PwE2MzIXARYVFAcBFRQHBiMhIicmPQE0NzYzITIXFgFO/vYGBwgFHQYG4eEGBh0FCAcGAQoGBgJpBQUI/dsIBQUFBQgCJQgFBQGF/vYGBhwGCAcG4OEGBwcGHQUF/vUFCAcG/vslCAUFBQUIJQgFBQUFAAAAAQAjAAAD3QNuALMAACUiJyYjIgcGIyInJjU0NzY3Njc2NzY9ATQnJiMhIgcGHQEUFxYXFjMWFxYVFAcGIyInJiMiBwYjIicmNTQ3Njc2NzY3Nj0BETQ1NDU0JzQnJicmJyYnJicmIyInJjU0NzYzMhcWMzI3NjMyFxYVFAcGIwYHBgcGHQEUFxYzITI3Nj0BNCcmJyYnJjU0NzYzMhcWMzI3NjMyFxYVFAcGByIHBgcGFREUFxYXFhcyFxYVFAcGIwPBGTMyGhkyMxkNCAcJCg0MERAKEgEHFf5+FgcBFQkSEw4ODAsHBw4bNTUaGDExGA0HBwkJCwwQDwkSAQIBAgMEBAUIEhENDQoLBwcOGjU1GhgwMRgOBwcJCgwNEBAIFAEHDwGQDgcBFAoXFw8OBwcOGTMyGRkxMRkOBwcKCg0NEBEIFBQJEREODQoLBwcOAAICAgIMCw8RCQkBAQMDBQxE4AwFAwMFDNRRDQYBAgEICBIPDA0CAgICDAwOEQgJAQIDAwUNRSEB0AINDQgIDg4KCgsLBwcDBgEBCAgSDwwNAgICAg0MDxEICAECAQYMULYMBwEBBwy2UAwGAQEGBxYPDA0CAgICDQwPEQgIAQECBg1P/eZEDAYCAgEJCBEPDA0AAAIAAP+3A/8DtwATADkAAAEyFxYVFAcCBwYjIicmNTQ3ATYzARYXFh8BFgcGIyInJicmJyY1FhcWFxYXFjMyNzY3Njc2NzY3NjcDmygeHhq+TDdFSDQ0NQFtISn9+BcmJy8BAkxMe0c2NiEhEBEEExQQEBIRCRcIDxITFRUdHR4eKQO3GxooJDP+mUY0NTRJSTABSx/9sSsfHw0oek1MGhsuLzo6RAMPDgsLCgoWJRsaEREKCwQEAgABAAAAAAAA9evv618PPPUACwQAAAAAANbEBFgAAAAA1sQEWAAA/7cEAQPAAAAACAACAAAAAAAAAAEAAAPA/8AAAAQAAAD//wQBAAEAAAAAAAAAAAAAAAAAAAAhBAAAAAAAAAAAAAAAAgAAAAQAAAAEAAAABAAAAAQAAMAEAAAABAAAAAQAAAAEAABABAAAAAQAAAAEAAAeBAAAAAQAAAAEAABlBAAAAAQAAMAEAADABAAAgAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAMlAD8DJQAAA74ABwQAACMD/wAAAAAAAAAKABQAHgBMAJQA+AE2AXwBwgI2AnQCvgLoA34EHgSIBMoE8gU0BXAFiAXgBiIGagaSBroG5AcoB+AIKgkcCXgAAQAAACEAtAAKAAAAAAACAAAAAAAAAAAAAAAAAAAAAAAAAA4ArgABAAAAAAABAAcAAAABAAAAAAACAAcAYAABAAAAAAADAAcANgABAAAAAAAEAAcAdQABAAAAAAAFAAsAFQABAAAAAAAGAAcASwABAAAAAAAKABoAigADAAEECQABAA4ABwADAAEECQACAA4AZwADAAEECQADAA4APQADAAEECQAEAA4AfAADAAEECQAFABYAIAADAAEECQAGAA4AUgADAAEECQAKADQApGljb21vb24AaQBjAG8AbQBvAG8AblZlcnNpb24gMS4wAFYAZQByAHMAaQBvAG4AIAAxAC4AMGljb21vb24AaQBjAG8AbQBvAG8Abmljb21vb24AaQBjAG8AbQBvAG8AblJlZ3VsYXIAUgBlAGcAdQBsAGEAcmljb21vb24AaQBjAG8AbQBvAG8AbkZvbnQgZ2VuZXJhdGVkIGJ5IEljb01vb24uAEYAbwBuAHQAIABnAGUAbgBlAHIAYQB0AGUAZAAgAGIAeQAgAEkAYwBvAE0AbwBvAG4ALgAAAAMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA=) format(\'truetype\'); font-weight: normal; font-style: normal;}[class^="w-e-icon-"],[class*=" w-e-icon-"] { /* use !important to prevent issues with browser extensions that change fonts */ font-family: \'w-e-icon\' !important; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}.w-e-icon-close:before { content: "\\f00d";}.w-e-icon-upload2:before { content: "\\e9c6";}.w-e-icon-trash-o:before { content: "\\f014";}.w-e-icon-header:before { content: "\\f1dc";}.w-e-icon-pencil2:before { content: "\\e906";}.w-e-icon-paint-brush:before { content: "\\f1fc";}.w-e-icon-image:before { content: "\\e90d";}.w-e-icon-play:before { content: "\\e912";}.w-e-icon-location:before { content: "\\e947";}.w-e-icon-undo:before { content: "\\e965";}.w-e-icon-redo:before { content: "\\e966";}.w-e-icon-quotes-left:before { content: "\\e977";}.w-e-icon-list-numbered:before { content: "\\e9b9";}.w-e-icon-list2:before { content: "\\e9bb";}.w-e-icon-link:before { content: "\\e9cb";}.w-e-icon-happy:before { content: "\\e9df";}.w-e-icon-bold:before { content: "\\ea62";}.w-e-icon-underline:before { content: "\\ea63";}.w-e-icon-italic:before { content: "\\ea64";}.w-e-icon-strikethrough:before { content: "\\ea65";}.w-e-icon-table2:before { content: "\\ea71";}.w-e-icon-paragraph-left:before { content: "\\ea77";}.w-e-icon-paragraph-center:before { content: "\\ea78";}.w-e-icon-paragraph-right:before { content: "\\ea79";}.w-e-icon-terminal:before { content: "\\f120";}.w-e-icon-page-break:before { content: "\\ea68";}.w-e-icon-cancel-circle:before { content: "\\ea0d";}.w-e-icon-font:before { content: "\\ea5c";}.w-e-icon-text-heigh:before { content: "\\ea5f";}.w-e-toolbar { display: -webkit-box; display: -ms-flexbox; display: flex; padding: 0 5px; /* flex-wrap: wrap; */ /* å个èå */}.w-e-toolbar .w-e-menu { position: relative; text-align: center; padding: 5px 10px; cursor: pointer;}.w-e-toolbar .w-e-menu i { color: #999;}.w-e-toolbar .w-e-menu:hover i { color: #333;}.w-e-toolbar .w-e-active i { color: #1e88e5;}.w-e-toolbar .w-e-active:hover i { color: #1e88e5;}.w-e-text-container .w-e-panel-container { position: absolute; top: 0; left: 50%; border: 1px solid #ccc; border-top: 0; box-shadow: 1px 1px 2px #ccc; color: #333; background-color: #fff; /* 为 emotion panel å®å¶çæ ·å¼ */ /* ä¸ä¼ å¾çç panel å®å¶æ ·å¼ */}.w-e-text-container .w-e-panel-container .w-e-panel-close { position: absolute; right: 0; top: 0; padding: 5px; margin: 2px 5px 0 0; cursor: pointer; color: #999;}.w-e-text-container .w-e-panel-container .w-e-panel-close:hover { color: #333;}.w-e-text-container .w-e-panel-container .w-e-panel-tab-title { list-style: none; display: -webkit-box; display: -ms-flexbox; display: flex; font-size: 14px; margin: 2px 10px 0 10px; border-bottom: 1px solid #f1f1f1;}.w-e-text-container .w-e-panel-container .w-e-panel-tab-title .w-e-item { padding: 3px 5px; color: #999; cursor: pointer; margin: 0 3px; position: relative; top: 1px;}.w-e-text-container .w-e-panel-container .w-e-panel-tab-title .w-e-active { color: #333; border-bottom: 1px solid #333; cursor: default; font-weight: 700;}.w-e-text-container .w-e-panel-container .w-e-panel-tab-content { padding: 10px 15px 10px 15px; font-size: 16px; /* è¾å
¥æ¡çæ ·å¼ */ /* æé®çæ ·å¼ */}.w-e-text-container .w-e-panel-container .w-e-panel-tab-content input:focus,.w-e-text-container .w-e-panel-container .w-e-panel-tab-content textarea:focus,.w-e-text-container .w-e-panel-container .w-e-panel-tab-content button:focus { outline: none;}.w-e-text-container .w-e-panel-container .w-e-panel-tab-content textarea { width: 100%; border: 1px solid #ccc; padding: 5px;}.w-e-text-container .w-e-panel-container .w-e-panel-tab-content textarea:focus { border-color: #1e88e5;}.w-e-text-container .w-e-panel-container .w-e-panel-tab-content input[type=text] { border: none; border-bottom: 1px solid #ccc; font-size: 14px; height: 20px; color: #333; text-align: left;}.w-e-text-container .w-e-panel-container .w-e-panel-tab-content input[type=text].small { width: 30px; text-align: center;}.w-e-text-container .w-e-panel-container .w-e-panel-tab-content input[type=text].block { display: block; width: 100%; margin: 10px 0;}.w-e-text-container .w-e-panel-container .w-e-panel-tab-content input[type=text]:focus { border-bottom: 2px solid #1e88e5;}.w-e-text-container .w-e-panel-container .w-e-panel-tab-content .w-e-button-container button { font-size: 14px; color: #1e88e5; border: none; padding: 5px 10px; background-color: #fff; cursor: pointer; border-radius: 3px;}.w-e-text-container .w-e-panel-container .w-e-panel-tab-content .w-e-button-container button.left { float: left; margin-right: 10px;}.w-e-text-container .w-e-panel-container .w-e-panel-tab-content .w-e-button-container button.right { float: right; margin-left: 10px;}.w-e-text-container .w-e-panel-container .w-e-panel-tab-content .w-e-button-container button.gray { color: #999;}.w-e-text-container .w-e-panel-container .w-e-panel-tab-content .w-e-button-container button.red { color: #c24f4a;}.w-e-text-container .w-e-panel-container .w-e-panel-tab-content .w-e-button-container button:hover { background-color: #f1f1f1;}.w-e-text-container .w-e-panel-container .w-e-panel-tab-content .w-e-button-container:after { content: ""; display: table; clear: both;}.w-e-text-container .w-e-panel-container .w-e-emoticon-container .w-e-item { cursor: pointer; font-size: 18px; padding: 0 3px; display: inline-block; *display: inline; *zoom: 1;}.w-e-text-container .w-e-panel-container .w-e-up-img-container { text-align: center;}.w-e-text-container .w-e-panel-container .w-e-up-img-container .w-e-up-btn { display: inline-block; *display: inline; *zoom: 1; color: #999; cursor: pointer; font-size: 60px; line-height: 1;}.w-e-text-container .w-e-panel-container .w-e-up-img-container .w-e-up-btn:hover { color: #333;}.w-e-text-container { position: relative;}.w-e-text-container .w-e-progress { position: absolute; background-color: #1e88e5; bottom: 0; left: 0; height: 1px;}.w-e-text { padding: 0 10px; overflow-y: scroll;}.w-e-text p,.w-e-text h1,.w-e-text h2,.w-e-text h3,.w-e-text h4,.w-e-text h5,.w-e-text table,.w-e-text pre { margin: 10px 0; line-height: 1.5;}.w-e-text ul,.w-e-text ol { margin: 10px 0 10px 20px;}.w-e-text blockquote { display: block; border-left: 8px solid #d0e5f2; padding: 5px 10px; margin: 10px 0; line-height: 1.4; font-size: 100%; background-color: #f1f1f1;}.w-e-text code { display: inline-block; *display: inline; *zoom: 1; background-color: #f1f1f1; border-radius: 3px; padding: 3px 5px; margin: 0 3px;}.w-e-text pre code { display: block;}.w-e-text table { border-top: 1px solid #ccc; border-left: 1px solid #ccc;}.w-e-text table td,.w-e-text table th { border-bottom: 1px solid #ccc; border-right: 1px solid #ccc; padding: 3px 5px;}.w-e-text table th { border-bottom: 2px solid #ccc; text-align: center;}.w-e-text:focus { outline: none;}.w-e-text img { cursor: pointer;}.w-e-text img:hover { box-shadow: 0 0 5px #333;}'; |
| | | |
| | | // å° css ä»£ç æ·»å å° <style> ä¸ |
| | | var style = document.createElement('style'); |
| | | style.type = 'text/css'; |
| | | style.innerHTML = inlinecss; |
| | | document.getElementsByTagName('HEAD').item(0).appendChild(style); |
| | | |
| | | // è¿å |
| | | var index = window.wangEditor || Editor; |
| | | |
| | | return index; |
| | | |
| | | }))); |
| | | |
| | | layui.define(function(exports) { |
| | | exports('wangEditor', window.wangEditor); |
| | | }); |