wangEditor.js 148 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522152315241525152615271528152915301531153215331534153515361537153815391540154115421543154415451546154715481549155015511552155315541555155615571558155915601561156215631564156515661567156815691570157115721573157415751576157715781579158015811582158315841585158615871588158915901591159215931594159515961597159815991600160116021603160416051606160716081609161016111612161316141615161616171618161916201621162216231624162516261627162816291630163116321633163416351636163716381639164016411642164316441645164616471648164916501651165216531654165516561657165816591660166116621663166416651666166716681669167016711672167316741675167616771678167916801681168216831684168516861687168816891690169116921693169416951696169716981699170017011702170317041705170617071708170917101711171217131714171517161717171817191720172117221723172417251726172717281729173017311732173317341735173617371738173917401741174217431744174517461747174817491750175117521753175417551756175717581759176017611762176317641765176617671768176917701771177217731774177517761777177817791780178117821783178417851786178717881789179017911792179317941795179617971798179918001801180218031804180518061807180818091810181118121813181418151816181718181819182018211822182318241825182618271828182918301831183218331834183518361837183818391840184118421843184418451846184718481849185018511852185318541855185618571858185918601861186218631864186518661867186818691870187118721873187418751876187718781879188018811882188318841885188618871888188918901891189218931894189518961897189818991900190119021903190419051906190719081909191019111912191319141915191619171918191919201921192219231924192519261927192819291930193119321933193419351936193719381939194019411942194319441945194619471948194919501951195219531954195519561957195819591960196119621963196419651966196719681969197019711972197319741975197619771978197919801981198219831984198519861987198819891990199119921993199419951996199719981999200020012002200320042005200620072008200920102011201220132014201520162017201820192020202120222023202420252026202720282029203020312032203320342035203620372038203920402041204220432044204520462047204820492050205120522053205420552056205720582059206020612062206320642065206620672068206920702071207220732074207520762077207820792080208120822083208420852086208720882089209020912092209320942095209620972098209921002101210221032104210521062107210821092110211121122113211421152116211721182119212021212122212321242125212621272128212921302131213221332134213521362137213821392140214121422143214421452146214721482149215021512152215321542155215621572158215921602161216221632164216521662167216821692170217121722173217421752176217721782179218021812182218321842185218621872188218921902191219221932194219521962197219821992200220122022203220422052206220722082209221022112212221322142215221622172218221922202221222222232224222522262227222822292230223122322233223422352236223722382239224022412242224322442245224622472248224922502251225222532254225522562257225822592260226122622263226422652266226722682269227022712272227322742275227622772278227922802281228222832284228522862287228822892290229122922293229422952296229722982299230023012302230323042305230623072308230923102311231223132314231523162317231823192320232123222323232423252326232723282329233023312332233323342335233623372338233923402341234223432344234523462347234823492350235123522353235423552356235723582359236023612362236323642365236623672368236923702371237223732374237523762377237823792380238123822383238423852386238723882389239023912392239323942395239623972398239924002401240224032404240524062407240824092410241124122413241424152416241724182419242024212422242324242425242624272428242924302431243224332434243524362437243824392440244124422443244424452446244724482449245024512452245324542455245624572458245924602461246224632464246524662467246824692470247124722473247424752476247724782479248024812482248324842485248624872488248924902491249224932494249524962497249824992500250125022503250425052506250725082509251025112512251325142515251625172518251925202521252225232524252525262527252825292530253125322533253425352536253725382539254025412542254325442545254625472548254925502551255225532554255525562557255825592560256125622563256425652566256725682569257025712572257325742575257625772578257925802581258225832584258525862587258825892590259125922593259425952596259725982599260026012602260326042605260626072608260926102611261226132614261526162617261826192620262126222623262426252626262726282629263026312632263326342635263626372638263926402641264226432644264526462647264826492650265126522653265426552656265726582659266026612662266326642665266626672668266926702671267226732674267526762677267826792680268126822683268426852686268726882689269026912692269326942695269626972698269927002701270227032704270527062707270827092710271127122713271427152716271727182719272027212722272327242725272627272728272927302731273227332734273527362737273827392740274127422743274427452746274727482749275027512752275327542755275627572758275927602761276227632764276527662767276827692770277127722773277427752776277727782779278027812782278327842785278627872788278927902791279227932794279527962797279827992800280128022803280428052806280728082809281028112812281328142815281628172818281928202821282228232824282528262827282828292830283128322833283428352836283728382839284028412842284328442845284628472848284928502851285228532854285528562857285828592860286128622863286428652866286728682869287028712872287328742875287628772878287928802881288228832884288528862887288828892890289128922893289428952896289728982899290029012902290329042905290629072908290929102911291229132914291529162917291829192920292129222923292429252926292729282929293029312932293329342935293629372938293929402941294229432944294529462947294829492950295129522953295429552956295729582959296029612962296329642965296629672968296929702971297229732974297529762977297829792980298129822983298429852986298729882989299029912992299329942995299629972998299930003001300230033004300530063007300830093010301130123013301430153016301730183019302030213022302330243025302630273028302930303031303230333034303530363037303830393040304130423043304430453046304730483049305030513052305330543055305630573058305930603061306230633064306530663067306830693070307130723073307430753076307730783079308030813082308330843085308630873088308930903091309230933094309530963097309830993100310131023103310431053106310731083109311031113112311331143115311631173118311931203121312231233124312531263127312831293130313131323133313431353136313731383139314031413142314331443145314631473148314931503151315231533154315531563157315831593160316131623163316431653166316731683169317031713172317331743175317631773178317931803181318231833184318531863187318831893190319131923193319431953196319731983199320032013202320332043205320632073208320932103211321232133214321532163217321832193220322132223223322432253226322732283229323032313232323332343235323632373238323932403241324232433244324532463247324832493250325132523253325432553256325732583259326032613262326332643265326632673268326932703271327232733274327532763277327832793280328132823283328432853286328732883289329032913292329332943295329632973298329933003301330233033304330533063307330833093310331133123313331433153316331733183319332033213322332333243325332633273328332933303331333233333334333533363337333833393340334133423343334433453346334733483349335033513352335333543355335633573358335933603361336233633364336533663367336833693370337133723373337433753376337733783379338033813382338333843385338633873388338933903391339233933394339533963397339833993400340134023403340434053406340734083409341034113412341334143415341634173418341934203421342234233424342534263427342834293430343134323433343434353436343734383439344034413442344334443445344634473448344934503451345234533454345534563457345834593460346134623463346434653466346734683469347034713472347334743475347634773478347934803481348234833484348534863487348834893490349134923493349434953496349734983499350035013502350335043505350635073508350935103511351235133514351535163517351835193520352135223523352435253526352735283529353035313532353335343535353635373538353935403541354235433544354535463547354835493550355135523553355435553556355735583559356035613562356335643565356635673568356935703571357235733574357535763577357835793580358135823583358435853586358735883589359035913592359335943595359635973598359936003601360236033604360536063607360836093610361136123613361436153616361736183619362036213622362336243625362636273628362936303631363236333634363536363637363836393640364136423643364436453646364736483649365036513652365336543655365636573658365936603661366236633664366536663667366836693670367136723673367436753676367736783679368036813682368336843685368636873688368936903691369236933694369536963697369836993700370137023703370437053706370737083709371037113712371337143715371637173718371937203721372237233724372537263727372837293730373137323733373437353736373737383739374037413742374337443745374637473748374937503751375237533754375537563757375837593760376137623763376437653766376737683769377037713772377337743775377637773778377937803781378237833784378537863787378837893790379137923793379437953796379737983799380038013802380338043805380638073808380938103811381238133814381538163817381838193820382138223823382438253826382738283829383038313832383338343835383638373838383938403841384238433844384538463847384838493850385138523853385438553856385738583859386038613862386338643865386638673868386938703871387238733874387538763877387838793880388138823883388438853886388738883889389038913892389338943895389638973898389939003901390239033904390539063907390839093910391139123913391439153916391739183919392039213922392339243925392639273928392939303931393239333934393539363937393839393940394139423943394439453946394739483949395039513952395339543955395639573958395939603961396239633964396539663967
  1. (function (global, factory) {
  2. typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
  3. typeof define === 'function' && define.amd ? define(factory) :
  4. (global.wangEditor = factory());
  5. }(this, (function () { 'use strict';
  6. /*
  7. poly-fill
  8. */
  9. var polyfill = function () {
  10. // Object.assign
  11. if (typeof Object.assign != 'function') {
  12. Object.assign = function (target, varArgs) {
  13. // .length of function is 2
  14. if (target == null) {
  15. // TypeError if undefined or null
  16. throw new TypeError('Cannot convert undefined or null to object');
  17. }
  18. var to = Object(target);
  19. for (var index = 1; index < arguments.length; index++) {
  20. var nextSource = arguments[index];
  21. if (nextSource != null) {
  22. // Skip over if undefined or null
  23. for (var nextKey in nextSource) {
  24. // Avoid bugs when hasOwnProperty is shadowed
  25. if (Object.prototype.hasOwnProperty.call(nextSource, nextKey)) {
  26. to[nextKey] = nextSource[nextKey];
  27. }
  28. }
  29. }
  30. }
  31. return to;
  32. };
  33. }
  34. // IE 中兼容 Element.prototype.matches
  35. if (!Element.prototype.matches) {
  36. Element.prototype.matches = Element.prototype.matchesSelector || Element.prototype.mozMatchesSelector || Element.prototype.msMatchesSelector || Element.prototype.oMatchesSelector || Element.prototype.webkitMatchesSelector || function (s) {
  37. var matches = (this.document || this.ownerDocument).querySelectorAll(s),
  38. i = matches.length;
  39. while (--i >= 0 && matches.item(i) !== this) {}
  40. return i > -1;
  41. };
  42. }
  43. };
  44. /*
  45. DOM 操作 API
  46. */
  47. // 根据 html 代码片段创建 dom 对象
  48. function createElemByHTML(html) {
  49. var div = void 0;
  50. div = document.createElement('div');
  51. div.innerHTML = html;
  52. return div.children;
  53. }
  54. // 是否是 DOM List
  55. function isDOMList(selector) {
  56. if (!selector) {
  57. return false;
  58. }
  59. if (selector instanceof HTMLCollection || selector instanceof NodeList) {
  60. return true;
  61. }
  62. return false;
  63. }
  64. // 封装 document.querySelectorAll
  65. function querySelectorAll(selector) {
  66. var result = document.querySelectorAll(selector);
  67. if (isDOMList(result)) {
  68. return result;
  69. } else {
  70. return [result];
  71. }
  72. }
  73. // 创建构造函数
  74. function DomElement(selector) {
  75. if (!selector) {
  76. return;
  77. }
  78. // selector 本来就是 DomElement 对象,直接返回
  79. if (selector instanceof DomElement) {
  80. return selector;
  81. }
  82. this.selector = selector;
  83. // 根据 selector 得出的结果(如 DOM,DOM List)
  84. var selectorResult = [];
  85. if (selector.nodeType === 1) {
  86. // 单个 DOM 节点
  87. selectorResult = [selector];
  88. } else if (isDOMList(selector)) {
  89. // DOM List
  90. selectorResult = selector;
  91. } else if (typeof selector === 'string') {
  92. // 字符串
  93. selector = selector.replace('/\n/mg', '').trim();
  94. if (selector.indexOf('<') === 0) {
  95. // 如 <div>
  96. selectorResult = createElemByHTML(selector);
  97. } else {
  98. // 如 #id .class
  99. selectorResult = querySelectorAll(selector);
  100. }
  101. }
  102. var length = selectorResult.length;
  103. if (!length) {
  104. // 空数组
  105. return this;
  106. }
  107. // 加入 DOM 节点
  108. var i = void 0;
  109. for (i = 0; i < length; i++) {
  110. this[i] = selectorResult[i];
  111. }
  112. this.length = length;
  113. }
  114. // 修改原型
  115. DomElement.prototype = {
  116. constructor: DomElement,
  117. // 类数组,forEach
  118. forEach: function forEach(fn) {
  119. var i = void 0;
  120. for (i = 0; i < this.length; i++) {
  121. var elem = this[i];
  122. var result = fn.call(elem, elem, i);
  123. if (result === false) {
  124. break;
  125. }
  126. }
  127. return this;
  128. },
  129. // 获取第几个元素
  130. get: function get(index) {
  131. var length = this.length;
  132. if (index >= length) {
  133. index = index % length;
  134. }
  135. return $(this[index]);
  136. },
  137. // 第一个
  138. first: function first() {
  139. return this.get(0);
  140. },
  141. // 最后一个
  142. last: function last() {
  143. var length = this.length;
  144. return this.get(length - 1);
  145. },
  146. // 绑定事件
  147. on: function on(type, selector, fn) {
  148. // selector 不为空,证明绑定事件要加代理
  149. if (!fn) {
  150. fn = selector;
  151. selector = null;
  152. }
  153. // type 是否有多个
  154. var types = [];
  155. types = type.split(/\s+/);
  156. return this.forEach(function (elem) {
  157. types.forEach(function (type) {
  158. if (!type) {
  159. return;
  160. }
  161. if (!selector) {
  162. // 无代理
  163. elem.addEventListener(type, fn, false);
  164. return;
  165. }
  166. // 有代理
  167. elem.addEventListener(type, function (e) {
  168. var target = e.target;
  169. if (target.matches(selector)) {
  170. fn.call(target, e);
  171. }
  172. }, false);
  173. });
  174. });
  175. },
  176. // 取消事件绑定
  177. off: function off(type, fn) {
  178. return this.forEach(function (elem) {
  179. elem.removeEventListener(type, fn, false);
  180. });
  181. },
  182. // 获取/设置 属性
  183. attr: function attr(key, val) {
  184. if (val == null) {
  185. // 获取值
  186. return this[0].getAttribute(key);
  187. } else {
  188. // 设置值
  189. return this.forEach(function (elem) {
  190. elem.setAttribute(key, val);
  191. });
  192. }
  193. },
  194. // 添加 class
  195. addClass: function addClass(className) {
  196. if (!className) {
  197. return this;
  198. }
  199. return this.forEach(function (elem) {
  200. var arr = void 0;
  201. if (elem.className) {
  202. // 解析当前 className 转换为数组
  203. arr = elem.className.split(/\s/);
  204. arr = arr.filter(function (item) {
  205. return !!item.trim();
  206. });
  207. // 添加 class
  208. if (arr.indexOf(className) < 0) {
  209. arr.push(className);
  210. }
  211. // 修改 elem.class
  212. elem.className = arr.join(' ');
  213. } else {
  214. elem.className = className;
  215. }
  216. });
  217. },
  218. // 删除 class
  219. removeClass: function removeClass(className) {
  220. if (!className) {
  221. return this;
  222. }
  223. return this.forEach(function (elem) {
  224. var arr = void 0;
  225. if (elem.className) {
  226. // 解析当前 className 转换为数组
  227. arr = elem.className.split(/\s/);
  228. arr = arr.filter(function (item) {
  229. item = item.trim();
  230. // 删除 class
  231. if (!item || item === className) {
  232. return false;
  233. }
  234. return true;
  235. });
  236. // 修改 elem.class
  237. elem.className = arr.join(' ');
  238. }
  239. });
  240. },
  241. // 修改 css
  242. css: function css(key, val) {
  243. var currentStyle = key + ':' + val + ';';
  244. return this.forEach(function (elem) {
  245. var style = (elem.getAttribute('style') || '').trim();
  246. var styleArr = void 0,
  247. resultArr = [];
  248. if (style) {
  249. // 将 style 按照 ; 拆分为数组
  250. styleArr = style.split(';');
  251. styleArr.forEach(function (item) {
  252. // 对每项样式,按照 : 拆分为 key 和 value
  253. var arr = item.split(':').map(function (i) {
  254. return i.trim();
  255. });
  256. if (arr.length === 2) {
  257. resultArr.push(arr[0] + ':' + arr[1]);
  258. }
  259. });
  260. // 替换或者新增
  261. resultArr = resultArr.map(function (item) {
  262. if (item.indexOf(key) === 0) {
  263. return currentStyle;
  264. } else {
  265. return item;
  266. }
  267. });
  268. if (resultArr.indexOf(currentStyle) < 0) {
  269. resultArr.push(currentStyle);
  270. }
  271. // 结果
  272. elem.setAttribute('style', resultArr.join('; '));
  273. } else {
  274. // style 无值
  275. elem.setAttribute('style', currentStyle);
  276. }
  277. });
  278. },
  279. // 显示
  280. show: function show() {
  281. return this.css('display', 'block');
  282. },
  283. // 隐藏
  284. hide: function hide() {
  285. return this.css('display', 'none');
  286. },
  287. // 获取子节点
  288. children: function children() {
  289. var elem = this[0];
  290. if (!elem) {
  291. return null;
  292. }
  293. return $(elem.children);
  294. },
  295. // 增加子节点
  296. append: function append($children) {
  297. return this.forEach(function (elem) {
  298. $children.forEach(function (child) {
  299. elem.appendChild(child);
  300. });
  301. });
  302. },
  303. // 移除当前节点
  304. remove: function remove() {
  305. return this.forEach(function (elem) {
  306. if (elem.remove) {
  307. elem.remove();
  308. } else {
  309. var parent = elem.parentElement;
  310. parent && parent.removeChild(elem);
  311. }
  312. });
  313. },
  314. // 是否包含某个子节点
  315. isContain: function isContain($child) {
  316. var elem = this[0];
  317. var child = $child[0];
  318. return elem.contains(child);
  319. },
  320. // 尺寸数据
  321. getSizeData: function getSizeData() {
  322. var elem = this[0];
  323. return elem.getBoundingClientRect(); // 可得到 bottom height left right top width 的数据
  324. },
  325. // 封装 nodeName
  326. getNodeName: function getNodeName() {
  327. var elem = this[0];
  328. return elem.nodeName;
  329. },
  330. // 从当前元素查找
  331. find: function find(selector) {
  332. var elem = this[0];
  333. return $(elem.querySelectorAll(selector));
  334. },
  335. // 获取当前元素的 text
  336. text: function text(val) {
  337. if (!val) {
  338. // 获取 text
  339. var elem = this[0];
  340. return elem.innerHTML.replace(/<.*?>/g, function () {
  341. return '';
  342. });
  343. } else {
  344. // 设置 text
  345. return this.forEach(function (elem) {
  346. elem.innerHTML = val;
  347. });
  348. }
  349. },
  350. // 获取 html
  351. html: function html(value) {
  352. var elem = this[0];
  353. if (value == null) {
  354. return elem.innerHTML;
  355. } else {
  356. elem.innerHTML = value;
  357. return this;
  358. }
  359. },
  360. // 获取 value
  361. val: function val() {
  362. var elem = this[0];
  363. return elem.value.trim();
  364. },
  365. // focus
  366. focus: function focus() {
  367. return this.forEach(function (elem) {
  368. elem.focus();
  369. });
  370. },
  371. // parent
  372. parent: function parent() {
  373. var elem = this[0];
  374. return $(elem.parentElement);
  375. },
  376. // parentUntil 找到符合 selector 的父节点
  377. parentUntil: function parentUntil(selector, _currentElem) {
  378. var results = document.querySelectorAll(selector);
  379. var length = results.length;
  380. if (!length) {
  381. // 传入的 selector 无效
  382. return null;
  383. }
  384. var elem = _currentElem || this[0];
  385. if (elem.nodeName === 'BODY') {
  386. return null;
  387. }
  388. var parent = elem.parentElement;
  389. var i = void 0;
  390. for (i = 0; i < length; i++) {
  391. if (parent === results[i]) {
  392. // 找到,并返回
  393. return $(parent);
  394. }
  395. }
  396. // 继续查找
  397. return this.parentUntil(selector, parent);
  398. },
  399. // 判断两个 elem 是否相等
  400. equal: function equal($elem) {
  401. if ($elem.nodeType === 1) {
  402. return this[0] === $elem;
  403. } else {
  404. return this[0] === $elem[0];
  405. }
  406. },
  407. // 将该元素插入到某个元素前面
  408. insertBefore: function insertBefore(selector) {
  409. var $referenceNode = $(selector);
  410. var referenceNode = $referenceNode[0];
  411. if (!referenceNode) {
  412. return this;
  413. }
  414. return this.forEach(function (elem) {
  415. var parent = referenceNode.parentNode;
  416. parent.insertBefore(elem, referenceNode);
  417. });
  418. },
  419. // 将该元素插入到某个元素后面
  420. insertAfter: function insertAfter(selector) {
  421. var $referenceNode = $(selector);
  422. var referenceNode = $referenceNode[0];
  423. if (!referenceNode) {
  424. return this;
  425. }
  426. return this.forEach(function (elem) {
  427. var parent = referenceNode.parentNode;
  428. if (parent.lastChild === referenceNode) {
  429. // 最后一个元素
  430. parent.appendChild(elem);
  431. } else {
  432. // 不是最后一个元素
  433. parent.insertBefore(elem, referenceNode.nextSibling);
  434. }
  435. });
  436. }
  437. };
  438. // new 一个对象
  439. function $(selector) {
  440. return new DomElement(selector);
  441. }
  442. /*
  443. 配置信息
  444. */
  445. var config = {
  446. // 默认菜单配置
  447. menus: ['head', 'bold', 'italic', 'underline', 'strikeThrough', 'foreColor', 'backColor', 'link', 'list', 'justify', 'quote', 'emoticon', 'image', 'table', 'video', 'code', 'undo', 'redo'],
  448. // 编辑区域的 z-index
  449. zIndex: 10000,
  450. // 是否开启 debug 模式(debug 模式下错误会 throw error 形式抛出)
  451. debug: false,
  452. // onchange 事件
  453. // onchange: function (html) {
  454. // // html 即变化之后的内容
  455. // console.log(html)
  456. // },
  457. // 是否显示添加网络图片的 tab
  458. showLinkImg: true,
  459. // 默认上传图片 max size: 5M
  460. uploadImgMaxSize: 5 * 1024 * 1024,
  461. // 配置一次最多上传几个图片
  462. // uploadImgMaxLength: 5,
  463. // 上传图片,是否显示 base64 格式
  464. uploadImgShowBase64: false,
  465. // 上传图片,server 地址(如果有值,则 base64 格式的配置则失效)
  466. // uploadImgServer: '/upload',
  467. // 自定义配置 filename
  468. uploadFileName: '',
  469. // 上传图片的自定义参数
  470. uploadImgParams: {
  471. token: 'abcdef12345'
  472. },
  473. // 上传图片的自定义header
  474. uploadImgHeaders: {
  475. // 'Accept': 'text/x-json'
  476. },
  477. // 配置 XHR withCredentials
  478. withCredentials: false,
  479. // 自定义上传图片超时时间 ms
  480. uploadImgTimeout: 5000,
  481. // 上传图片 hook
  482. uploadImgHooks: {
  483. // customInsert: function (insertLinkImg, result, editor) {
  484. // console.log('customInsert')
  485. // // 图片上传并返回结果,自定义插入图片的事件,而不是编辑器自动插入图片
  486. // const data = result.data1 || []
  487. // data.forEach(link => {
  488. // insertLinkImg(link)
  489. // })
  490. // },
  491. before: function before(xhr, editor, files) {
  492. // 图片上传之前触发
  493. },
  494. success: function success(xhr, editor, result) {
  495. // 图片上传并返回结果,图片插入成功之后触发
  496. },
  497. fail: function fail(xhr, editor, result) {
  498. // 图片上传并返回结果,但图片插入错误时触发
  499. },
  500. error: function error(xhr, editor) {
  501. // 图片上传出错时触发
  502. },
  503. timeout: function timeout(xhr, editor) {
  504. // 图片上传超时时触发
  505. }
  506. }
  507. };
  508. /*
  509. 工具
  510. */
  511. // 和 UA 相关的属性
  512. var UA = {
  513. _ua: navigator.userAgent,
  514. // 是否 webkit
  515. isWebkit: function isWebkit() {
  516. var reg = /webkit/i;
  517. return reg.test(this._ua);
  518. },
  519. // 是否 IE
  520. isIE: function isIE() {
  521. return 'ActiveXObject' in window;
  522. }
  523. };
  524. // 遍历对象
  525. function objForEach(obj, fn) {
  526. var key = void 0,
  527. result = void 0;
  528. for (key in obj) {
  529. if (obj.hasOwnProperty(key)) {
  530. result = fn.call(obj, key, obj[key]);
  531. if (result === false) {
  532. break;
  533. }
  534. }
  535. }
  536. }
  537. // 遍历类数组
  538. function arrForEach(fakeArr, fn) {
  539. var i = void 0,
  540. item = void 0,
  541. result = void 0;
  542. var length = fakeArr.length || 0;
  543. for (i = 0; i < length; i++) {
  544. item = fakeArr[i];
  545. result = fn.call(fakeArr, item, i);
  546. if (result === false) {
  547. break;
  548. }
  549. }
  550. }
  551. // 获取随机数
  552. function getRandom(prefix) {
  553. return prefix + Math.random().toString().slice(2);
  554. }
  555. // 替换 html 特殊字符
  556. function replaceHtmlSymbol(html) {
  557. if (html == null) {
  558. return '';
  559. }
  560. return html.replace(/</gm, '&lt;').replace(/>/gm, '&gt;').replace(/"/gm, '&quot;');
  561. }
  562. // 返回百分比的格式
  563. /*
  564. bold-menu
  565. */
  566. // 构造函数
  567. function Bold(editor) {
  568. this.editor = editor;
  569. this.$elem = $('<div class="w-e-menu">\n <i class="w-e-icon-bold"><i/>\n </div>');
  570. this.type = 'click';
  571. // 当前是否 active 状态
  572. this._active = false;
  573. }
  574. // 原型
  575. Bold.prototype = {
  576. constructor: Bold,
  577. // 点击事件
  578. onClick: function onClick(e) {
  579. // 点击菜单将触发这里
  580. var editor = this.editor;
  581. var isSeleEmpty = editor.selection.isSelectionEmpty();
  582. if (isSeleEmpty) {
  583. // 选区是空的,插入并选中一个“空白”
  584. editor.selection.createEmptyRange();
  585. }
  586. // 执行 bold 命令
  587. editor.cmd.do('bold');
  588. if (isSeleEmpty) {
  589. // 需要将选取折叠起来
  590. editor.selection.collapseRange();
  591. editor.selection.restoreSelection();
  592. }
  593. },
  594. // 试图改变 active 状态
  595. tryChangeActive: function tryChangeActive(e) {
  596. var editor = this.editor;
  597. var $elem = this.$elem;
  598. if (editor.cmd.queryCommandState('bold')) {
  599. this._active = true;
  600. $elem.addClass('w-e-active');
  601. } else {
  602. this._active = false;
  603. $elem.removeClass('w-e-active');
  604. }
  605. }
  606. };
  607. /*
  608. droplist
  609. */
  610. var _emptyFn = function _emptyFn() {};
  611. // 构造函数
  612. function DropList(menu, opt) {
  613. var _this = this;
  614. // droplist 所依附的菜单
  615. this.menu = menu;
  616. this.opt = opt;
  617. // 容器
  618. var $container = $('<div class="w-e-droplist"></div>');
  619. // 标题
  620. var $title = opt.$title;
  621. if ($title) {
  622. $title.addClass('w-e-dp-title');
  623. $container.append($title);
  624. }
  625. var list = opt.list || [];
  626. var type = opt.type || 'list'; // 'list' 列表形式(如“标题”菜单) / 'inline-block' 块状形式(如“颜色”菜单)
  627. var onClick = opt.onClick || _emptyFn;
  628. // 加入 DOM 并绑定事件
  629. var $list = $('<ul class="' + (type === 'list' ? 'w-e-list' : 'w-e-block') + '"></ul>');
  630. $container.append($list);
  631. list.forEach(function (item) {
  632. var $elem = item.$elem;
  633. var value = item.value;
  634. var $li = $('<li class="w-e-item"></li>');
  635. if ($elem) {
  636. $li.append($elem);
  637. $list.append($li);
  638. $elem.on('click', function (e) {
  639. onClick(value);
  640. // 隐藏
  641. _this.hideTimeoutId = setTimeout(function () {
  642. _this.hide();
  643. }, 0);
  644. });
  645. }
  646. });
  647. // 绑定隐藏事件
  648. $container.on('mouseleave', function (e) {
  649. _this.hideTimeoutId = setTimeout(function () {
  650. _this.hide();
  651. }, 0);
  652. });
  653. // 记录属性
  654. this.$container = $container;
  655. // 基本属性
  656. this._rendered = false;
  657. this._show = false;
  658. }
  659. // 原型
  660. DropList.prototype = {
  661. constructor: DropList,
  662. // 显示(插入DOM)
  663. show: function show() {
  664. if (this.hideTimeoutId) {
  665. // 清除之前的定时隐藏
  666. clearTimeout(this.hideTimeoutId);
  667. }
  668. var menu = this.menu;
  669. var $menuELem = menu.$elem;
  670. var $container = this.$container;
  671. if (this._show) {
  672. return;
  673. }
  674. if (this._rendered) {
  675. // 显示
  676. $container.show();
  677. } else {
  678. // 加入 DOM 之前先定位位置
  679. var menuHeight = $menuELem.getSizeData().height || 0;
  680. var width = this.opt.width || 100; // 默认为 100
  681. $container.css('margin-top', menuHeight + 'px').css('width', width + 'px');
  682. // 加入到 DOM
  683. $menuELem.append($container);
  684. this._rendered = true;
  685. }
  686. // 修改属性
  687. this._show = true;
  688. },
  689. // 隐藏(移除DOM)
  690. hide: function hide() {
  691. if (this.showTimeoutId) {
  692. // 清除之前的定时显示
  693. clearTimeout(this.showTimeoutId);
  694. }
  695. var $container = this.$container;
  696. if (!this._show) {
  697. return;
  698. }
  699. // 隐藏并需改属性
  700. $container.hide();
  701. this._show = false;
  702. }
  703. };
  704. /*
  705. menu - header
  706. */
  707. // 构造函数
  708. function Head(editor) {
  709. var _this = this;
  710. this.editor = editor;
  711. this.$elem = $('<div class="w-e-menu"><i class="w-e-icon-header"><i/></div>');
  712. this.type = 'droplist';
  713. // 当前是否 active 状态
  714. this._active = false;
  715. // 初始化 droplist
  716. this.droplist = new DropList(this, {
  717. width: 100,
  718. $title: $('<p>设置标题</p>'),
  719. type: 'list', // droplist 以列表形式展示
  720. 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>' }],
  721. onClick: function onClick(value) {
  722. // 注意 this 是指向当前的 Head 对象
  723. _this._command(value);
  724. }
  725. });
  726. }
  727. // 原型
  728. Head.prototype = {
  729. constructor: Head,
  730. // 执行命令
  731. _command: function _command(value) {
  732. var editor = this.editor;
  733. editor.cmd.do('formatBlock', value);
  734. },
  735. // 试图改变 active 状态
  736. tryChangeActive: function tryChangeActive(e) {
  737. var editor = this.editor;
  738. var $elem = this.$elem;
  739. var reg = /^h/i;
  740. var cmdValue = editor.cmd.queryCommandValue('formatBlock');
  741. if (reg.test(cmdValue)) {
  742. this._active = true;
  743. $elem.addClass('w-e-active');
  744. } else {
  745. this._active = false;
  746. $elem.removeClass('w-e-active');
  747. }
  748. }
  749. };
  750. /*
  751. panel
  752. */
  753. var emptyFn = function emptyFn() {};
  754. // 记录已经显示 panel 的菜单
  755. var _isCreatedPanelMenus = [];
  756. // 构造函数
  757. function Panel(menu, opt) {
  758. this.menu = menu;
  759. this.opt = opt;
  760. }
  761. // 原型
  762. Panel.prototype = {
  763. constructor: Panel,
  764. // 显示(插入DOM)
  765. show: function show() {
  766. var _this = this;
  767. var menu = this.menu;
  768. if (_isCreatedPanelMenus.indexOf(menu) >= 0) {
  769. // 该菜单已经创建了 panel 不能再创建
  770. return;
  771. }
  772. var editor = menu.editor;
  773. var $body = $('body');
  774. var $textContainerElem = editor.$textContainerElem;
  775. var opt = this.opt;
  776. // panel 的容器
  777. var $container = $('<div class="w-e-panel-container"></div>');
  778. var width = opt.width || 300; // 默认 300px
  779. $container.css('width', width + 'px').css('margin-left', (0 - width) / 2 + 'px');
  780. // 添加关闭按钮
  781. var $closeBtn = $('<i class="w-e-icon-close w-e-panel-close"></i>');
  782. $container.append($closeBtn);
  783. $closeBtn.on('click', function () {
  784. _this.hide();
  785. });
  786. // 准备 tabs 容器
  787. var $tabTitleContainer = $('<ul class="w-e-panel-tab-title"></ul>');
  788. var $tabContentContainer = $('<div class="w-e-panel-tab-content"></div>');
  789. $container.append($tabTitleContainer).append($tabContentContainer);
  790. // 设置高度
  791. var height = opt.height;
  792. if (height) {
  793. $tabContentContainer.css('height', height + 'px').css('overflow-y', 'auto');
  794. }
  795. // tabs
  796. var tabs = opt.tabs || [];
  797. var tabTitleArr = [];
  798. var tabContentArr = [];
  799. tabs.forEach(function (tab, tabIndex) {
  800. if (!tab) {
  801. return;
  802. }
  803. var title = tab.title || '';
  804. var tpl = tab.tpl || '';
  805. // 添加到 DOM
  806. var $title = $('<li class="w-e-item">' + title + '</li>');
  807. $tabTitleContainer.append($title);
  808. var $content = $(tpl);
  809. $tabContentContainer.append($content);
  810. // 记录到内存
  811. $title._index = tabIndex;
  812. tabTitleArr.push($title);
  813. tabContentArr.push($content);
  814. // 设置 active 项
  815. if (tabIndex === 0) {
  816. $title._active = true;
  817. $title.addClass('w-e-active');
  818. } else {
  819. $content.hide();
  820. }
  821. // 绑定 tab 的事件
  822. $title.on('click', function (e) {
  823. if ($title._active) {
  824. return;
  825. }
  826. // 隐藏所有的 tab
  827. tabTitleArr.forEach(function ($title) {
  828. $title._active = false;
  829. $title.removeClass('w-e-active');
  830. });
  831. tabContentArr.forEach(function ($content) {
  832. $content.hide();
  833. });
  834. // 显示当前的 tab
  835. $title._active = true;
  836. $title.addClass('w-e-active');
  837. $content.show();
  838. });
  839. });
  840. // 绑定关闭事件
  841. $container.on('click', function (e) {
  842. // 点击时阻止冒泡
  843. e.stopPropagation();
  844. });
  845. $body.on('click', function (e) {
  846. _this.hide();
  847. });
  848. // 添加到 DOM
  849. $textContainerElem.append($container);
  850. // 绑定 opt 的事件,只有添加到 DOM 之后才能绑定成功
  851. tabs.forEach(function (tab, index) {
  852. if (!tab) {
  853. return;
  854. }
  855. var events = tab.events || [];
  856. events.forEach(function (event) {
  857. var selector = event.selector;
  858. var type = event.type;
  859. var fn = event.fn || emptyFn;
  860. var $content = tabContentArr[index];
  861. $content.find(selector).on(type, function (e) {
  862. e.stopPropagation();
  863. var needToHide = fn(e);
  864. // 执行完事件之后,是否要关闭 panel
  865. if (needToHide) {
  866. _this.hide();
  867. }
  868. });
  869. });
  870. });
  871. // focus 第一个 elem
  872. var $inputs = $container.find('input[type=text],textarea');
  873. if ($inputs.length) {
  874. $inputs.get(0).focus();
  875. }
  876. // 添加到属性
  877. this.$container = $container;
  878. // 隐藏其他 panel
  879. this._hideOtherPanels();
  880. // 记录该 menu 已经创建了 panel
  881. _isCreatedPanelMenus.push(menu);
  882. },
  883. // 隐藏(移除DOM)
  884. hide: function hide() {
  885. var menu = this.menu;
  886. var $container = this.$container;
  887. if ($container) {
  888. $container.remove();
  889. }
  890. // 将该 menu 记录中移除
  891. _isCreatedPanelMenus = _isCreatedPanelMenus.filter(function (item) {
  892. if (item === menu) {
  893. return false;
  894. } else {
  895. return true;
  896. }
  897. });
  898. },
  899. // 一个 panel 展示时,隐藏其他 panel
  900. _hideOtherPanels: function _hideOtherPanels() {
  901. if (!_isCreatedPanelMenus.length) {
  902. return;
  903. }
  904. _isCreatedPanelMenus.forEach(function (menu) {
  905. var panel = menu.panel || {};
  906. if (panel.hide) {
  907. panel.hide();
  908. }
  909. });
  910. }
  911. };
  912. /*
  913. menu - link
  914. */
  915. // 构造函数
  916. function Link(editor) {
  917. this.editor = editor;
  918. this.$elem = $('<div class="w-e-menu"><i class="w-e-icon-link"><i/></div>');
  919. this.type = 'panel';
  920. // 当前是否 active 状态
  921. this._active = false;
  922. }
  923. // 原型
  924. Link.prototype = {
  925. constructor: Link,
  926. // 点击事件
  927. onClick: function onClick(e) {
  928. var editor = this.editor;
  929. var $linkelem = void 0;
  930. if (this._active) {
  931. // 当前选区在链接里面
  932. $linkelem = editor.selection.getSelectionContainerElem();
  933. if (!$linkelem) {
  934. return;
  935. }
  936. // 将该元素都包含在选取之内,以便后面整体替换
  937. editor.selection.createRangeByElem($linkelem);
  938. editor.selection.restoreSelection();
  939. // 显示 panel
  940. this._createPanel($linkelem.text(), $linkelem.attr('href'));
  941. } else {
  942. // 当前选区不在链接里面
  943. if (editor.selection.isSelectionEmpty()) {
  944. // 选区是空的,未选中内容
  945. this._createPanel('', '');
  946. } else {
  947. // 选中内容了
  948. this._createPanel(editor.selection.getSelectionText(), '');
  949. }
  950. }
  951. },
  952. // 创建 panel
  953. _createPanel: function _createPanel(text, link) {
  954. var _this = this;
  955. // panel 中需要用到的id
  956. var inputLinkId = getRandom('input-link');
  957. var inputTextId = getRandom('input-text');
  958. var btnOkId = getRandom('btn-ok');
  959. var btnDelId = getRandom('btn-del');
  960. // 是否显示“删除链接”
  961. var delBtnDisplay = this._active ? 'inline-block' : 'none';
  962. // 初始化并显示 panel
  963. var panel = new Panel(this, {
  964. width: 300,
  965. // panel 中可包含多个 tab
  966. tabs: [{
  967. // tab 的标题
  968. title: '链接',
  969. // 模板
  970. 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>',
  971. // 事件绑定
  972. events: [
  973. // 插入链接
  974. {
  975. selector: '#' + btnOkId,
  976. type: 'click',
  977. fn: function fn() {
  978. // 执行插入链接
  979. var $link = $('#' + inputLinkId);
  980. var $text = $('#' + inputTextId);
  981. var link = $link.val();
  982. var text = $text.val();
  983. _this._insertLink(text, link);
  984. // 返回 true,表示该事件执行完之后,panel 要关闭。否则 panel 不会关闭
  985. return true;
  986. }
  987. },
  988. // 删除链接
  989. {
  990. selector: '#' + btnDelId,
  991. type: 'click',
  992. fn: function fn() {
  993. // 执行删除链接
  994. _this._delLink();
  995. // 返回 true,表示该事件执行完之后,panel 要关闭。否则 panel 不会关闭
  996. return true;
  997. }
  998. }]
  999. } // tab end
  1000. ] // tabs end
  1001. });
  1002. // 显示 panel
  1003. panel.show();
  1004. // 记录属性
  1005. this.panel = panel;
  1006. },
  1007. // 删除当前链接
  1008. _delLink: function _delLink() {
  1009. if (!this._active) {
  1010. return;
  1011. }
  1012. var editor = this.editor;
  1013. var $selectionELem = editor.selection.getSelectionContainerElem();
  1014. if (!$selectionELem) {
  1015. return;
  1016. }
  1017. var selectionText = editor.selection.getSelectionText();
  1018. editor.cmd.do('insertHTML', '<span>' + selectionText + '</span>');
  1019. },
  1020. // 插入链接
  1021. _insertLink: function _insertLink(text, link) {
  1022. if (!text || !link) {
  1023. return;
  1024. }
  1025. var editor = this.editor;
  1026. editor.cmd.do('insertHTML', '<a href="' + link + '" target="_blank">' + text + '</a>');
  1027. },
  1028. // 试图改变 active 状态
  1029. tryChangeActive: function tryChangeActive(e) {
  1030. var editor = this.editor;
  1031. var $elem = this.$elem;
  1032. var $selectionELem = editor.selection.getSelectionContainerElem();
  1033. if (!$selectionELem) {
  1034. return;
  1035. }
  1036. if ($selectionELem.getNodeName() === 'A') {
  1037. this._active = true;
  1038. $elem.addClass('w-e-active');
  1039. } else {
  1040. this._active = false;
  1041. $elem.removeClass('w-e-active');
  1042. }
  1043. }
  1044. };
  1045. /*
  1046. italic-menu
  1047. */
  1048. // 构造函数
  1049. function Italic(editor) {
  1050. this.editor = editor;
  1051. this.$elem = $('<div class="w-e-menu">\n <i class="w-e-icon-italic"><i/>\n </div>');
  1052. this.type = 'click';
  1053. // 当前是否 active 状态
  1054. this._active = false;
  1055. }
  1056. // 原型
  1057. Italic.prototype = {
  1058. constructor: Italic,
  1059. // 点击事件
  1060. onClick: function onClick(e) {
  1061. // 点击菜单将触发这里
  1062. var editor = this.editor;
  1063. var isSeleEmpty = editor.selection.isSelectionEmpty();
  1064. if (isSeleEmpty) {
  1065. // 选区是空的,插入并选中一个“空白”
  1066. editor.selection.createEmptyRange();
  1067. }
  1068. // 执行 italic 命令
  1069. editor.cmd.do('italic');
  1070. if (isSeleEmpty) {
  1071. // 需要将选取折叠起来
  1072. editor.selection.collapseRange();
  1073. editor.selection.restoreSelection();
  1074. }
  1075. },
  1076. // 试图改变 active 状态
  1077. tryChangeActive: function tryChangeActive(e) {
  1078. var editor = this.editor;
  1079. var $elem = this.$elem;
  1080. if (editor.cmd.queryCommandState('italic')) {
  1081. this._active = true;
  1082. $elem.addClass('w-e-active');
  1083. } else {
  1084. this._active = false;
  1085. $elem.removeClass('w-e-active');
  1086. }
  1087. }
  1088. };
  1089. /*
  1090. redo-menu
  1091. */
  1092. // 构造函数
  1093. function Redo(editor) {
  1094. this.editor = editor;
  1095. this.$elem = $('<div class="w-e-menu">\n <i class="w-e-icon-redo"><i/>\n </div>');
  1096. this.type = 'click';
  1097. // 当前是否 active 状态
  1098. this._active = false;
  1099. }
  1100. // 原型
  1101. Redo.prototype = {
  1102. constructor: Redo,
  1103. // 点击事件
  1104. onClick: function onClick(e) {
  1105. // 点击菜单将触发这里
  1106. var editor = this.editor;
  1107. // 执行 redo 命令
  1108. editor.cmd.do('redo');
  1109. }
  1110. };
  1111. /*
  1112. strikeThrough-menu
  1113. */
  1114. // 构造函数
  1115. function StrikeThrough(editor) {
  1116. this.editor = editor;
  1117. this.$elem = $('<div class="w-e-menu">\n <i class="w-e-icon-strikethrough"><i/>\n </div>');
  1118. this.type = 'click';
  1119. // 当前是否 active 状态
  1120. this._active = false;
  1121. }
  1122. // 原型
  1123. StrikeThrough.prototype = {
  1124. constructor: StrikeThrough,
  1125. // 点击事件
  1126. onClick: function onClick(e) {
  1127. // 点击菜单将触发这里
  1128. var editor = this.editor;
  1129. var isSeleEmpty = editor.selection.isSelectionEmpty();
  1130. if (isSeleEmpty) {
  1131. // 选区是空的,插入并选中一个“空白”
  1132. editor.selection.createEmptyRange();
  1133. }
  1134. // 执行 strikeThrough 命令
  1135. editor.cmd.do('strikeThrough');
  1136. if (isSeleEmpty) {
  1137. // 需要将选取折叠起来
  1138. editor.selection.collapseRange();
  1139. editor.selection.restoreSelection();
  1140. }
  1141. },
  1142. // 试图改变 active 状态
  1143. tryChangeActive: function tryChangeActive(e) {
  1144. var editor = this.editor;
  1145. var $elem = this.$elem;
  1146. if (editor.cmd.queryCommandState('strikeThrough')) {
  1147. this._active = true;
  1148. $elem.addClass('w-e-active');
  1149. } else {
  1150. this._active = false;
  1151. $elem.removeClass('w-e-active');
  1152. }
  1153. }
  1154. };
  1155. /*
  1156. underline-menu
  1157. */
  1158. // 构造函数
  1159. function Underline(editor) {
  1160. this.editor = editor;
  1161. this.$elem = $('<div class="w-e-menu">\n <i class="w-e-icon-underline"><i/>\n </div>');
  1162. this.type = 'click';
  1163. // 当前是否 active 状态
  1164. this._active = false;
  1165. }
  1166. // 原型
  1167. Underline.prototype = {
  1168. constructor: Underline,
  1169. // 点击事件
  1170. onClick: function onClick(e) {
  1171. // 点击菜单将触发这里
  1172. var editor = this.editor;
  1173. var isSeleEmpty = editor.selection.isSelectionEmpty();
  1174. if (isSeleEmpty) {
  1175. // 选区是空的,插入并选中一个“空白”
  1176. editor.selection.createEmptyRange();
  1177. }
  1178. // 执行 underline 命令
  1179. editor.cmd.do('underline');
  1180. if (isSeleEmpty) {
  1181. // 需要将选取折叠起来
  1182. editor.selection.collapseRange();
  1183. editor.selection.restoreSelection();
  1184. }
  1185. },
  1186. // 试图改变 active 状态
  1187. tryChangeActive: function tryChangeActive(e) {
  1188. var editor = this.editor;
  1189. var $elem = this.$elem;
  1190. if (editor.cmd.queryCommandState('underline')) {
  1191. this._active = true;
  1192. $elem.addClass('w-e-active');
  1193. } else {
  1194. this._active = false;
  1195. $elem.removeClass('w-e-active');
  1196. }
  1197. }
  1198. };
  1199. /*
  1200. undo-menu
  1201. */
  1202. // 构造函数
  1203. function Undo(editor) {
  1204. this.editor = editor;
  1205. this.$elem = $('<div class="w-e-menu">\n <i class="w-e-icon-undo"><i/>\n </div>');
  1206. this.type = 'click';
  1207. // 当前是否 active 状态
  1208. this._active = false;
  1209. }
  1210. // 原型
  1211. Undo.prototype = {
  1212. constructor: Undo,
  1213. // 点击事件
  1214. onClick: function onClick(e) {
  1215. // 点击菜单将触发这里
  1216. var editor = this.editor;
  1217. // 执行 undo 命令
  1218. editor.cmd.do('undo');
  1219. }
  1220. };
  1221. /*
  1222. menu - list
  1223. */
  1224. // 构造函数
  1225. function List(editor) {
  1226. var _this = this;
  1227. this.editor = editor;
  1228. this.$elem = $('<div class="w-e-menu"><i class="w-e-icon-list2"><i/></div>');
  1229. this.type = 'droplist';
  1230. // 当前是否 active 状态
  1231. this._active = false;
  1232. // 初始化 droplist
  1233. this.droplist = new DropList(this, {
  1234. width: 120,
  1235. $title: $('<p>设置列表</p>'),
  1236. type: 'list', // droplist 以列表形式展示
  1237. 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' }],
  1238. onClick: function onClick(value) {
  1239. // 注意 this 是指向当前的 List 对象
  1240. _this._command(value);
  1241. }
  1242. });
  1243. }
  1244. // 原型
  1245. List.prototype = {
  1246. constructor: List,
  1247. // 执行命令
  1248. _command: function _command(value) {
  1249. var editor = this.editor;
  1250. var $textElem = editor.$textElem;
  1251. editor.selection.restoreSelection();
  1252. if (editor.cmd.queryCommandState(value)) {
  1253. return;
  1254. }
  1255. editor.cmd.do(value);
  1256. // 验证列表是否被包裹在 <p> 之内
  1257. var $selectionElem = editor.selection.getSelectionContainerElem();
  1258. if ($selectionElem.getNodeName() === 'LI') {
  1259. $selectionElem = $selectionElem.parent();
  1260. }
  1261. if (/^ol|ul$/i.test($selectionElem.getNodeName()) === false) {
  1262. return;
  1263. }
  1264. if ($selectionElem.equal($textElem)) {
  1265. // 证明是顶级标签,没有被 <p> 包裹
  1266. return;
  1267. }
  1268. var $parent = $selectionElem.parent();
  1269. if ($parent.equal($textElem)) {
  1270. // $parent 是顶级标签,不能删除
  1271. return;
  1272. }
  1273. $selectionElem.insertAfter($parent);
  1274. $parent.remove();
  1275. },
  1276. // 试图改变 active 状态
  1277. tryChangeActive: function tryChangeActive(e) {
  1278. var editor = this.editor;
  1279. var $elem = this.$elem;
  1280. if (editor.cmd.queryCommandState('insertUnOrderedList') || editor.cmd.queryCommandState('insertOrderedList')) {
  1281. this._active = true;
  1282. $elem.addClass('w-e-active');
  1283. } else {
  1284. this._active = false;
  1285. $elem.removeClass('w-e-active');
  1286. }
  1287. }
  1288. };
  1289. /*
  1290. menu - justify
  1291. */
  1292. // 构造函数
  1293. function Justify(editor) {
  1294. var _this = this;
  1295. this.editor = editor;
  1296. this.$elem = $('<div class="w-e-menu"><i class="w-e-icon-paragraph-left"><i/></div>');
  1297. this.type = 'droplist';
  1298. // 当前是否 active 状态
  1299. this._active = false;
  1300. // 初始化 droplist
  1301. this.droplist = new DropList(this, {
  1302. width: 100,
  1303. $title: $('<p>对齐方式</p>'),
  1304. type: 'list', // droplist 以列表形式展示
  1305. 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' }],
  1306. onClick: function onClick(value) {
  1307. // 注意 this 是指向当前的 List 对象
  1308. _this._command(value);
  1309. }
  1310. });
  1311. }
  1312. // 原型
  1313. Justify.prototype = {
  1314. constructor: Justify,
  1315. // 执行命令
  1316. _command: function _command(value) {
  1317. var editor = this.editor;
  1318. editor.cmd.do(value);
  1319. }
  1320. };
  1321. /*
  1322. menu - backcolor
  1323. */
  1324. // 构造函数
  1325. function BackColor(editor) {
  1326. var _this = this;
  1327. this.editor = editor;
  1328. this.$elem = $('<div class="w-e-menu"><i class="w-e-icon-pencil2"><i/></div>');
  1329. this.type = 'droplist';
  1330. // 当前是否 active 状态
  1331. this._active = false;
  1332. // 初始化 droplist
  1333. this.droplist = new DropList(this, {
  1334. width: 120,
  1335. $title: $('<p>文字颜色</p>'),
  1336. type: 'inline-block', // droplist 内容以 block 形式展示
  1337. list: [{ $elem: $('<i style="color:#000000;" class="w-e-icon-pencil2"></i>'), value: '#000000' }, { $elem: $('<i style="color:#eeece0;" class="w-e-icon-pencil2"></i>'), value: '#eeece0' }, { $elem: $('<i style="color:#1c487f;" class="w-e-icon-pencil2"></i>'), value: '#1c487f' }, { $elem: $('<i style="color:#4d80bf;" class="w-e-icon-pencil2"></i>'), value: '#4d80bf' }, { $elem: $('<i style="color:#c24f4a;" class="w-e-icon-pencil2"></i>'), value: '#c24f4a' }, { $elem: $('<i style="color:#8baa4a;" class="w-e-icon-pencil2"></i>'), value: '#8baa4a' }, { $elem: $('<i style="color:#7b5ba1;" class="w-e-icon-pencil2"></i>'), value: '#7b5ba1' }, { $elem: $('<i style="color:#46acc8;" class="w-e-icon-pencil2"></i>'), value: '#46acc8' }, { $elem: $('<i style="color:#f9963b;" class="w-e-icon-pencil2"></i>'), value: '#f9963b' }, { $elem: $('<i style="color:#ffffff;" class="w-e-icon-pencil2"></i>'), value: '#ffffff' }],
  1338. onClick: function onClick(value) {
  1339. // 注意 this 是指向当前的 BackColor 对象
  1340. _this._command(value);
  1341. }
  1342. });
  1343. }
  1344. // 原型
  1345. BackColor.prototype = {
  1346. constructor: BackColor,
  1347. // 执行命令
  1348. _command: function _command(value) {
  1349. var editor = this.editor;
  1350. editor.cmd.do('foreColor', value);
  1351. }
  1352. };
  1353. /*
  1354. menu - forecolor
  1355. */
  1356. // 构造函数
  1357. function ForeColor$1(editor) {
  1358. var _this = this;
  1359. this.editor = editor;
  1360. this.$elem = $('<div class="w-e-menu"><i class="w-e-icon-paint-brush"><i/></div>');
  1361. this.type = 'droplist';
  1362. // 当前是否 active 状态
  1363. this._active = false;
  1364. // 初始化 droplist
  1365. this.droplist = new DropList(this, {
  1366. width: 120,
  1367. $title: $('<p>背景色</p>'),
  1368. type: 'inline-block', // droplist 内容以 block 形式展示
  1369. list: [{ $elem: $('<i style="color:#000000;" class="w-e-icon-paint-brush"></i>'), value: '#000000' }, { $elem: $('<i style="color:#eeece0;" class="w-e-icon-paint-brush"></i>'), value: '#eeece0' }, { $elem: $('<i style="color:#1c487f;" class="w-e-icon-paint-brush"></i>'), value: '#1c487f' }, { $elem: $('<i style="color:#4d80bf;" class="w-e-icon-paint-brush"></i>'), value: '#4d80bf' }, { $elem: $('<i style="color:#c24f4a;" class="w-e-icon-paint-brush"></i>'), value: '#c24f4a' }, { $elem: $('<i style="color:#8baa4a;" class="w-e-icon-paint-brush"></i>'), value: '#8baa4a' }, { $elem: $('<i style="color:#7b5ba1;" class="w-e-icon-paint-brush"></i>'), value: '#7b5ba1' }, { $elem: $('<i style="color:#46acc8;" class="w-e-icon-paint-brush"></i>'), value: '#46acc8' }, { $elem: $('<i style="color:#f9963b;" class="w-e-icon-paint-brush"></i>'), value: '#f9963b' }, { $elem: $('<i style="color:#ffffff;" class="w-e-icon-paint-brush"></i>'), value: '#ffffff' }],
  1370. onClick: function onClick(value) {
  1371. // 注意 this 是指向当前的 ForeColor 对象
  1372. _this._command(value);
  1373. }
  1374. });
  1375. }
  1376. // 原型
  1377. ForeColor$1.prototype = {
  1378. constructor: ForeColor$1,
  1379. // 执行命令
  1380. _command: function _command(value) {
  1381. var editor = this.editor;
  1382. editor.cmd.do('backColor', value);
  1383. }
  1384. };
  1385. /*
  1386. menu - quote
  1387. */
  1388. // 构造函数
  1389. function Quote(editor) {
  1390. this.editor = editor;
  1391. this.$elem = $('<div class="w-e-menu">\n <i class="w-e-icon-quotes-left"><i/>\n </div>');
  1392. this.type = 'click';
  1393. // 当前是否 active 状态
  1394. this._active = false;
  1395. }
  1396. // 原型
  1397. Quote.prototype = {
  1398. constructor: Quote,
  1399. onClick: function onClick(e) {
  1400. var editor = this.editor;
  1401. editor.cmd.do('formatBlock', '<BLOCKQUOTE>');
  1402. },
  1403. tryChangeActive: function tryChangeActive(e) {
  1404. var editor = this.editor;
  1405. var $elem = this.$elem;
  1406. var reg = /^BLOCKQUOTE$/i;
  1407. var cmdValue = editor.cmd.queryCommandValue('formatBlock');
  1408. if (reg.test(cmdValue)) {
  1409. this._active = true;
  1410. $elem.addClass('w-e-active');
  1411. } else {
  1412. this._active = false;
  1413. $elem.removeClass('w-e-active');
  1414. }
  1415. }
  1416. };
  1417. /*
  1418. menu - code
  1419. */
  1420. // 构造函数
  1421. function Code(editor) {
  1422. this.editor = editor;
  1423. this.$elem = $('<div class="w-e-menu">\n <i class="w-e-icon-terminal"><i/>\n </div>');
  1424. this.type = 'panel';
  1425. // 当前是否 active 状态
  1426. this._active = false;
  1427. }
  1428. // 原型
  1429. Code.prototype = {
  1430. constructor: Code,
  1431. onClick: function onClick(e) {
  1432. var editor = this.editor;
  1433. var $startElem = editor.selection.getSelectionStartElem();
  1434. var $endElem = editor.selection.getSelectionEndElem();
  1435. var isSeleEmpty = editor.selection.isSelectionEmpty();
  1436. var selectionText = editor.selection.getSelectionText();
  1437. var $code = void 0;
  1438. if (!$startElem.equal($endElem)) {
  1439. // 跨元素选择,不做处理
  1440. editor.selection.restoreSelection();
  1441. return;
  1442. }
  1443. if (!isSeleEmpty) {
  1444. // 选取不是空,用 <code> 包裹即可
  1445. $code = $('<code>' + selectionText + '</code>');
  1446. editor.cmd.do('insertElem', $code);
  1447. editor.selection.createRangeByElem($code, false);
  1448. editor.selection.restoreSelection();
  1449. return;
  1450. }
  1451. // 选取是空,且没有夸元素选择,则插入 <pre><code></code></prev>
  1452. if (this._active) {
  1453. // 选中状态,将编辑内容
  1454. this._createPanel($startElem.html());
  1455. } else {
  1456. // 未选中状态,将创建内容
  1457. this._createPanel();
  1458. }
  1459. },
  1460. _createPanel: function _createPanel(value) {
  1461. var _this = this;
  1462. // value - 要编辑的内容
  1463. value = value || '';
  1464. var type = !value ? 'new' : 'edit';
  1465. var textId = getRandom('texxt');
  1466. var btnId = getRandom('btn');
  1467. var panel = new Panel(this, {
  1468. width: 500,
  1469. // 一个 Panel 包含多个 tab
  1470. tabs: [{
  1471. // 标题
  1472. title: '插入代码',
  1473. // 模板
  1474. 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>',
  1475. // 事件绑定
  1476. events: [
  1477. // 插入代码
  1478. {
  1479. selector: '#' + btnId,
  1480. type: 'click',
  1481. fn: function fn() {
  1482. var $text = $('#' + textId);
  1483. var text = $text.val() || $text.html();
  1484. text = replaceHtmlSymbol(text);
  1485. if (type === 'new') {
  1486. // 新插入
  1487. _this._insertCode(text);
  1488. } else {
  1489. // 编辑更新
  1490. _this._updateCode(text);
  1491. }
  1492. // 返回 true,表示该事件执行完之后,panel 要关闭。否则 panel 不会关闭
  1493. return true;
  1494. }
  1495. }]
  1496. } // first tab end
  1497. ] // tabs end
  1498. }); // new Panel end
  1499. // 显示 panel
  1500. panel.show();
  1501. // 记录属性
  1502. this.panel = panel;
  1503. },
  1504. // 插入代码
  1505. _insertCode: function _insertCode(value) {
  1506. var editor = this.editor;
  1507. editor.cmd.do('insertHTML', '<pre><code>' + value + '</code></pre><p><br></p>');
  1508. },
  1509. // 更新代码
  1510. _updateCode: function _updateCode(value) {
  1511. var editor = this.editor;
  1512. var $selectionELem = editor.selection.getSelectionContainerElem();
  1513. if (!$selectionELem) {
  1514. return;
  1515. }
  1516. $selectionELem.html(value);
  1517. editor.selection.restoreSelection();
  1518. },
  1519. // 试图改变 active 状态
  1520. tryChangeActive: function tryChangeActive(e) {
  1521. var editor = this.editor;
  1522. var $elem = this.$elem;
  1523. var $selectionELem = editor.selection.getSelectionContainerElem();
  1524. if (!$selectionELem) {
  1525. return;
  1526. }
  1527. var $parentElem = $selectionELem.parent();
  1528. if ($selectionELem.getNodeName() === 'CODE' && $parentElem.getNodeName() === 'PRE') {
  1529. this._active = true;
  1530. $elem.addClass('w-e-active');
  1531. } else {
  1532. this._active = false;
  1533. $elem.removeClass('w-e-active');
  1534. }
  1535. }
  1536. };
  1537. /*
  1538. menu - emoticon
  1539. */
  1540. // 构造函数
  1541. function Emoticon(editor) {
  1542. this.editor = editor;
  1543. this.$elem = $('<div class="w-e-menu">\n <i class="w-e-icon-happy"><i/>\n </div>');
  1544. this.type = 'panel';
  1545. // 当前是否 active 状态
  1546. this._active = false;
  1547. }
  1548. // 原型
  1549. Emoticon.prototype = {
  1550. constructor: Emoticon,
  1551. onClick: function onClick() {
  1552. this._createPanel();
  1553. },
  1554. _createPanel: function _createPanel() {
  1555. var _this = this;
  1556. // 拼接表情字符串
  1557. var faceHtml = '';
  1558. var faceStr = '😀 😃 😄 😁 😆 😅 😂 😊 😇 🙂 🙃 😉 😌 😍 😘 😗 😙 😚 😋 😜 😝 😛 🤑 🤗 🤓 😎 😏 😒 😞 😔 😟 😕 🙁 😣 😖 😫 😩 😤 😠 😡 😶 😐 😑 😯 😦 😧 😮 😲 😵 😳 😱 😨 😰 😢 😥 😭 😓 😪 😴 🙄 🤔 😬 🤐';
  1559. faceStr.split(/\s/).forEach(function (item) {
  1560. if (item) {
  1561. faceHtml += '<span class="w-e-item">' + item + '</span>';
  1562. }
  1563. });
  1564. var handHtml = '';
  1565. var handStr = '🙌 👏 👋 👍 👎 👊 ✊ ️👌 ✋ 👐 💪 🙏 ️👆 👇 👈 👉 🖕 🖐 🤘 🖖';
  1566. handStr.split(/\s/).forEach(function (item) {
  1567. if (item) {
  1568. handHtml += '<span class="w-e-item">' + item + '</span>';
  1569. }
  1570. });
  1571. var panel = new Panel(this, {
  1572. width: 300,
  1573. height: 200,
  1574. // 一个 Panel 包含多个 tab
  1575. tabs: [{
  1576. // 标题
  1577. title: '表情',
  1578. // 模板
  1579. tpl: '<div class="w-e-emoticon-container">' + faceHtml + '</div>',
  1580. // 事件绑定
  1581. events: [{
  1582. selector: 'span.w-e-item',
  1583. type: 'click',
  1584. fn: function fn(e) {
  1585. var target = e.target;
  1586. _this._insert(target.innerHTML);
  1587. // 返回 true,表示该事件执行完之后,panel 要关闭。否则 panel 不会关闭
  1588. return true;
  1589. }
  1590. }]
  1591. }, // first tab end
  1592. {
  1593. // 标题
  1594. title: '手势',
  1595. // 模板
  1596. tpl: '<div class="w-e-emoticon-container">' + handHtml + '</div>',
  1597. // 事件绑定
  1598. events: [{
  1599. selector: 'span.w-e-item',
  1600. type: 'click',
  1601. fn: function fn(e) {
  1602. var target = e.target;
  1603. _this._insert(target.innerHTML);
  1604. // 返回 true,表示该事件执行完之后,panel 要关闭。否则 panel 不会关闭
  1605. return true;
  1606. }
  1607. }]
  1608. } // second tab end
  1609. ] // tabs end
  1610. });
  1611. // 显示 panel
  1612. panel.show();
  1613. // 记录属性
  1614. this.panel = panel;
  1615. },
  1616. // 插入表情
  1617. _insert: function _insert(emoji) {
  1618. var editor = this.editor;
  1619. editor.cmd.do('insertHTML', '<span>' + emoji + '</span>');
  1620. }
  1621. };
  1622. /*
  1623. menu - table
  1624. */
  1625. // 构造函数
  1626. function Table(editor) {
  1627. this.editor = editor;
  1628. this.$elem = $('<div class="w-e-menu"><i class="w-e-icon-table2"><i/></div>');
  1629. this.type = 'panel';
  1630. // 当前是否 active 状态
  1631. this._active = false;
  1632. }
  1633. // 原型
  1634. Table.prototype = {
  1635. constructor: Table,
  1636. onClick: function onClick() {
  1637. if (this._active) {
  1638. // 编辑现有表格
  1639. this._createEditPanel();
  1640. } else {
  1641. // 插入新表格
  1642. this._createInsertPanel();
  1643. }
  1644. },
  1645. // 创建插入新表格的 panel
  1646. _createInsertPanel: function _createInsertPanel() {
  1647. var _this = this;
  1648. // 用到的 id
  1649. var btnInsertId = getRandom('btn');
  1650. var textRowNum = getRandom('row');
  1651. var textColNum = getRandom('col');
  1652. var panel = new Panel(this, {
  1653. width: 250,
  1654. // panel 包含多个 tab
  1655. tabs: [{
  1656. // 标题
  1657. title: '插入表格',
  1658. // 模板
  1659. 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>',
  1660. // 事件绑定
  1661. events: [{
  1662. // 点击按钮,插入表格
  1663. selector: '#' + btnInsertId,
  1664. type: 'click',
  1665. fn: function fn() {
  1666. var rowNum = parseInt($('#' + textRowNum).val());
  1667. var colNum = parseInt($('#' + textColNum).val());
  1668. if (rowNum && colNum && rowNum > 0 && colNum > 0) {
  1669. // form 数据有效
  1670. _this._insert(rowNum, colNum);
  1671. }
  1672. // 返回 true,表示该事件执行完之后,panel 要关闭。否则 panel 不会关闭
  1673. return true;
  1674. }
  1675. }]
  1676. } // first tab end
  1677. ] // tabs end
  1678. }); // panel end
  1679. // 展示 panel
  1680. panel.show();
  1681. // 记录属性
  1682. this.panel = panel;
  1683. },
  1684. // 插入表格
  1685. _insert: function _insert(rowNum, colNum) {
  1686. // 拼接 table 模板
  1687. var r = void 0,
  1688. c = void 0;
  1689. var html = '<table border="0" width="100%" cellpadding="0" cellspacing="0">';
  1690. for (r = 0; r < rowNum; r++) {
  1691. html += '<tr>';
  1692. if (r === 0) {
  1693. for (c = 0; c < colNum; c++) {
  1694. html += '<th>&nbsp;</th>';
  1695. }
  1696. } else {
  1697. for (c = 0; c < colNum; c++) {
  1698. html += '<td>&nbsp;</td>';
  1699. }
  1700. }
  1701. html += '</tr>';
  1702. }
  1703. html += '</table><p><br></p>';
  1704. // 执行命令
  1705. var editor = this.editor;
  1706. editor.cmd.do('insertHTML', html);
  1707. // 防止 firefox 下出现 resize 的控制点
  1708. editor.cmd.do('enableObjectResizing', false);
  1709. editor.cmd.do('enableInlineTableEditing', false);
  1710. },
  1711. // 创建编辑表格的 panel
  1712. _createEditPanel: function _createEditPanel() {
  1713. var _this2 = this;
  1714. // 可用的 id
  1715. var addRowBtnId = getRandom('add-row');
  1716. var addColBtnId = getRandom('add-col');
  1717. var delRowBtnId = getRandom('del-row');
  1718. var delColBtnId = getRandom('del-col');
  1719. var delTableBtnId = getRandom('del-table');
  1720. // 创建 panel 对象
  1721. var panel = new Panel(this, {
  1722. width: 320,
  1723. // panel 包含多个 tab
  1724. tabs: [{
  1725. // 标题
  1726. title: '编辑表格',
  1727. // 模板
  1728. 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>',
  1729. // 事件绑定
  1730. events: [{
  1731. // 增加行
  1732. selector: '#' + addRowBtnId,
  1733. type: 'click',
  1734. fn: function fn() {
  1735. _this2._addRow();
  1736. // 返回 true,表示该事件执行完之后,panel 要关闭。否则 panel 不会关闭
  1737. return true;
  1738. }
  1739. }, {
  1740. // 增加列
  1741. selector: '#' + addColBtnId,
  1742. type: 'click',
  1743. fn: function fn() {
  1744. _this2._addCol();
  1745. // 返回 true,表示该事件执行完之后,panel 要关闭。否则 panel 不会关闭
  1746. return true;
  1747. }
  1748. }, {
  1749. // 删除行
  1750. selector: '#' + delRowBtnId,
  1751. type: 'click',
  1752. fn: function fn() {
  1753. _this2._delRow();
  1754. // 返回 true,表示该事件执行完之后,panel 要关闭。否则 panel 不会关闭
  1755. return true;
  1756. }
  1757. }, {
  1758. // 删除列
  1759. selector: '#' + delColBtnId,
  1760. type: 'click',
  1761. fn: function fn() {
  1762. _this2._delCol();
  1763. // 返回 true,表示该事件执行完之后,panel 要关闭。否则 panel 不会关闭
  1764. return true;
  1765. }
  1766. }, {
  1767. // 删除表格
  1768. selector: '#' + delTableBtnId,
  1769. type: 'click',
  1770. fn: function fn() {
  1771. _this2._delTable();
  1772. // 返回 true,表示该事件执行完之后,panel 要关闭。否则 panel 不会关闭
  1773. return true;
  1774. }
  1775. }]
  1776. }]
  1777. });
  1778. // 显示 panel
  1779. panel.show();
  1780. },
  1781. // 获取选中的单元格的位置信息
  1782. _getLocationData: function _getLocationData() {
  1783. var result = {};
  1784. var editor = this.editor;
  1785. var $selectionELem = editor.selection.getSelectionContainerElem();
  1786. if (!$selectionELem) {
  1787. return;
  1788. }
  1789. var nodeName = $selectionELem.getNodeName();
  1790. if (nodeName !== 'TD' && nodeName !== 'TH') {
  1791. return;
  1792. }
  1793. // 获取 td index
  1794. var $tr = $selectionELem.parent();
  1795. var $tds = $tr.children();
  1796. var tdLength = $tds.length;
  1797. $tds.forEach(function (td, index) {
  1798. if (td === $selectionELem[0]) {
  1799. // 记录并跳出循环
  1800. result.td = {
  1801. index: index,
  1802. elem: td,
  1803. length: tdLength
  1804. };
  1805. return false;
  1806. }
  1807. });
  1808. // 获取 tr index
  1809. var $tbody = $tr.parent();
  1810. var $trs = $tbody.children();
  1811. var trLength = $trs.length;
  1812. $trs.forEach(function (tr, index) {
  1813. if (tr === $tr[0]) {
  1814. // 记录并跳出循环
  1815. result.tr = {
  1816. index: index,
  1817. elem: tr,
  1818. length: trLength
  1819. };
  1820. return false;
  1821. }
  1822. });
  1823. // 返回结果
  1824. return result;
  1825. },
  1826. // 增加行
  1827. _addRow: function _addRow() {
  1828. // 获取当前单元格的位置信息
  1829. var locationData = this._getLocationData();
  1830. if (!locationData) {
  1831. return;
  1832. }
  1833. var trData = locationData.tr;
  1834. var $currentTr = $(trData.elem);
  1835. var tdData = locationData.td;
  1836. var tdLength = tdData.length;
  1837. // 拼接即将插入的字符串
  1838. var newTr = document.createElement('tr');
  1839. var tpl = '',
  1840. i = void 0;
  1841. for (i = 0; i < tdLength; i++) {
  1842. tpl += '<td>&nbsp;</td>';
  1843. }
  1844. newTr.innerHTML = tpl;
  1845. // 插入
  1846. $(newTr).insertAfter($currentTr);
  1847. },
  1848. // 增加列
  1849. _addCol: function _addCol() {
  1850. // 获取当前单元格的位置信息
  1851. var locationData = this._getLocationData();
  1852. if (!locationData) {
  1853. return;
  1854. }
  1855. var trData = locationData.tr;
  1856. var tdData = locationData.td;
  1857. var tdIndex = tdData.index;
  1858. var $currentTr = $(trData.elem);
  1859. var $trParent = $currentTr.parent();
  1860. var $trs = $trParent.children();
  1861. // 遍历所有行
  1862. $trs.forEach(function (tr) {
  1863. var $tr = $(tr);
  1864. var $tds = $tr.children();
  1865. var $currentTd = $tds.get(tdIndex);
  1866. var name = $currentTd.getNodeName().toLowerCase();
  1867. // new 一个 td,并插入
  1868. var newTd = document.createElement(name);
  1869. $(newTd).insertAfter($currentTd);
  1870. });
  1871. },
  1872. // 删除行
  1873. _delRow: function _delRow() {
  1874. // 获取当前单元格的位置信息
  1875. var locationData = this._getLocationData();
  1876. if (!locationData) {
  1877. return;
  1878. }
  1879. var trData = locationData.tr;
  1880. var $currentTr = $(trData.elem);
  1881. $currentTr.remove();
  1882. },
  1883. // 删除列
  1884. _delCol: function _delCol() {
  1885. // 获取当前单元格的位置信息
  1886. var locationData = this._getLocationData();
  1887. if (!locationData) {
  1888. return;
  1889. }
  1890. var trData = locationData.tr;
  1891. var tdData = locationData.td;
  1892. var tdIndex = tdData.index;
  1893. var $currentTr = $(trData.elem);
  1894. var $trParent = $currentTr.parent();
  1895. var $trs = $trParent.children();
  1896. // 遍历所有行
  1897. $trs.forEach(function (tr) {
  1898. var $tr = $(tr);
  1899. var $tds = $tr.children();
  1900. var $currentTd = $tds.get(tdIndex);
  1901. // 删除
  1902. $currentTd.remove();
  1903. });
  1904. },
  1905. // 删除表格
  1906. _delTable: function _delTable() {
  1907. var editor = this.editor;
  1908. var $selectionELem = editor.selection.getSelectionContainerElem();
  1909. if (!$selectionELem) {
  1910. return;
  1911. }
  1912. var $table = $selectionELem.parentUntil('table');
  1913. if (!$table) {
  1914. return;
  1915. }
  1916. $table.remove();
  1917. },
  1918. // 试图改变 active 状态
  1919. tryChangeActive: function tryChangeActive(e) {
  1920. var editor = this.editor;
  1921. var $elem = this.$elem;
  1922. var $selectionELem = editor.selection.getSelectionContainerElem();
  1923. if (!$selectionELem) {
  1924. return;
  1925. }
  1926. var nodeName = $selectionELem.getNodeName();
  1927. if (nodeName === 'TD' || nodeName === 'TH') {
  1928. this._active = true;
  1929. $elem.addClass('w-e-active');
  1930. } else {
  1931. this._active = false;
  1932. $elem.removeClass('w-e-active');
  1933. }
  1934. }
  1935. };
  1936. /*
  1937. menu - video
  1938. */
  1939. // 构造函数
  1940. function Video(editor) {
  1941. this.editor = editor;
  1942. this.$elem = $('<div class="w-e-menu"><i class="w-e-icon-play"><i/></div>');
  1943. this.type = 'panel';
  1944. // 当前是否 active 状态
  1945. this._active = false;
  1946. }
  1947. // 原型
  1948. Video.prototype = {
  1949. constructor: Video,
  1950. onClick: function onClick() {
  1951. this._createPanel();
  1952. },
  1953. _createPanel: function _createPanel() {
  1954. var _this = this;
  1955. // 创建 id
  1956. var textValId = getRandom('text-val');
  1957. var btnId = getRandom('btn');
  1958. // 创建 panel
  1959. var panel = new Panel(this, {
  1960. width: 350,
  1961. // 一个 panel 多个 tab
  1962. tabs: [{
  1963. // 标题
  1964. title: '插入视频',
  1965. // 模板
  1966. 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>',
  1967. // 事件绑定
  1968. events: [{
  1969. selector: '#' + btnId,
  1970. type: 'click',
  1971. fn: function fn() {
  1972. var $text = $('#' + textValId);
  1973. var val = $text.val().trim();
  1974. // 测试用视频地址
  1975. // <iframe height=498 width=510 src='http://player.youku.com/embed/XMjcwMzc3MzM3Mg==' frameborder=0 'allowfullscreen'></iframe>
  1976. if (val) {
  1977. // 插入视频
  1978. _this._insert(val);
  1979. }
  1980. // 返回 true,表示该事件执行完之后,panel 要关闭。否则 panel 不会关闭
  1981. return true;
  1982. }
  1983. }]
  1984. } // first tab end
  1985. ] // tabs end
  1986. }); // panel end
  1987. // 显示 panel
  1988. panel.show();
  1989. // 记录属性
  1990. this.panel = panel;
  1991. },
  1992. // 插入视频
  1993. _insert: function _insert(val) {
  1994. var editor = this.editor;
  1995. editor.cmd.do('insertHTML', val + '<p><br></p>');
  1996. }
  1997. };
  1998. /*
  1999. menu - img
  2000. */
  2001. // 构造函数
  2002. function Image(editor) {
  2003. this.editor = editor;
  2004. this.$elem = $('<div class="w-e-menu"><i class="w-e-icon-image"><i/></div>');
  2005. this.type = 'panel';
  2006. // 当前是否 active 状态
  2007. this._active = false;
  2008. }
  2009. // 原型
  2010. Image.prototype = {
  2011. constructor: Image,
  2012. onClick: function onClick() {
  2013. if (this._active) {
  2014. this._createEditPanel();
  2015. } else {
  2016. this._createInsertPanel();
  2017. }
  2018. },
  2019. _createEditPanel: function _createEditPanel() {
  2020. var editor = this.editor;
  2021. // id
  2022. var width30 = getRandom('width-30');
  2023. var width50 = getRandom('width-50');
  2024. var width100 = getRandom('width-100');
  2025. var delBtn = getRandom('del-btn');
  2026. // tab 配置
  2027. var tabsConfig = [{
  2028. title: '编辑图片',
  2029. 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>',
  2030. events: [{
  2031. selector: '#' + width30,
  2032. type: 'click',
  2033. fn: function fn() {
  2034. var $img = editor._selectedImg;
  2035. if ($img) {
  2036. $img.css('max-width', '30%');
  2037. }
  2038. // 返回 true,表示该事件执行完之后,panel 要关闭。否则 panel 不会关闭
  2039. return true;
  2040. }
  2041. }, {
  2042. selector: '#' + width50,
  2043. type: 'click',
  2044. fn: function fn() {
  2045. var $img = editor._selectedImg;
  2046. if ($img) {
  2047. $img.css('max-width', '50%');
  2048. }
  2049. // 返回 true,表示该事件执行完之后,panel 要关闭。否则 panel 不会关闭
  2050. return true;
  2051. }
  2052. }, {
  2053. selector: '#' + width100,
  2054. type: 'click',
  2055. fn: function fn() {
  2056. var $img = editor._selectedImg;
  2057. if ($img) {
  2058. $img.css('max-width', '100%');
  2059. }
  2060. // 返回 true,表示该事件执行完之后,panel 要关闭。否则 panel 不会关闭
  2061. return true;
  2062. }
  2063. }, {
  2064. selector: '#' + delBtn,
  2065. type: 'click',
  2066. fn: function fn() {
  2067. var $img = editor._selectedImg;
  2068. if ($img) {
  2069. $img.remove();
  2070. }
  2071. // 返回 true,表示该事件执行完之后,panel 要关闭。否则 panel 不会关闭
  2072. return true;
  2073. }
  2074. }]
  2075. }];
  2076. // 创建 panel 并显示
  2077. var panel = new Panel(this, {
  2078. width: 300,
  2079. tabs: tabsConfig
  2080. });
  2081. panel.show();
  2082. // 记录属性
  2083. this.panel = panel;
  2084. },
  2085. _createInsertPanel: function _createInsertPanel() {
  2086. var editor = this.editor;
  2087. var uploadImg = editor.uploadImg;
  2088. var config = editor.config;
  2089. // id
  2090. var upTriggerId = getRandom('up-trigger');
  2091. var upFileId = getRandom('up-file');
  2092. var linkUrlId = getRandom('link-url');
  2093. var linkBtnId = getRandom('link-btn');
  2094. // tabs 的配置
  2095. var tabsConfig = [{
  2096. title: '上传图片',
  2097. 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>',
  2098. events: [{
  2099. // 触发选择图片
  2100. selector: '#' + upTriggerId,
  2101. type: 'click',
  2102. fn: function fn() {
  2103. var $file = $('#' + upFileId);
  2104. var fileElem = $file[0];
  2105. if (fileElem) {
  2106. fileElem.click();
  2107. } else {
  2108. // 返回 true 可关闭 panel
  2109. return true;
  2110. }
  2111. }
  2112. }, {
  2113. // 选择图片完毕
  2114. selector: '#' + upFileId,
  2115. type: 'change',
  2116. fn: function fn() {
  2117. var $file = $('#' + upFileId);
  2118. var fileElem = $file[0];
  2119. if (!fileElem) {
  2120. // 返回 true 可关闭 panel
  2121. return true;
  2122. }
  2123. // 获取选中的 file 对象列表
  2124. var fileList = fileElem.files;
  2125. if (fileList.length) {
  2126. uploadImg.uploadImg(fileList);
  2127. }
  2128. // 返回 true 可关闭 panel
  2129. return true;
  2130. }
  2131. }]
  2132. }, // first tab end
  2133. {
  2134. title: '网络图片',
  2135. 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>',
  2136. events: [{
  2137. selector: '#' + linkBtnId,
  2138. type: 'click',
  2139. fn: function fn() {
  2140. var $linkUrl = $('#' + linkUrlId);
  2141. var url = $linkUrl.val().trim();
  2142. if (url) {
  2143. uploadImg.insertLinkImg(url);
  2144. }
  2145. // 返回 true 表示函数执行结束之后关闭 panel
  2146. return true;
  2147. }
  2148. }]
  2149. } // second tab end
  2150. ]; // tabs end
  2151. // 判断 tabs 的显示
  2152. var tabsConfigResult = [];
  2153. if ((config.uploadImgShowBase64 || config.uploadImgServer) && window.FileReader) {
  2154. // 显示“上传图片”
  2155. tabsConfigResult.push(tabsConfig[0]);
  2156. }
  2157. if (config.showLinkImg) {
  2158. // 显示“网络图片”
  2159. tabsConfigResult.push(tabsConfig[1]);
  2160. }
  2161. // 创建 panel 并显示
  2162. var panel = new Panel(this, {
  2163. width: 300,
  2164. tabs: tabsConfigResult
  2165. });
  2166. panel.show();
  2167. // 记录属性
  2168. this.panel = panel;
  2169. },
  2170. // 试图改变 active 状态
  2171. tryChangeActive: function tryChangeActive(e) {
  2172. var editor = this.editor;
  2173. var $elem = this.$elem;
  2174. if (editor._selectedImg) {
  2175. this._active = true;
  2176. $elem.addClass('w-e-active');
  2177. } else {
  2178. this._active = false;
  2179. $elem.removeClass('w-e-active');
  2180. }
  2181. }
  2182. };
  2183. /*
  2184. 所有菜单的汇总
  2185. */
  2186. // 存储菜单的构造函数
  2187. var MenuConstructors = {};
  2188. MenuConstructors.bold = Bold;
  2189. MenuConstructors.head = Head;
  2190. MenuConstructors.link = Link;
  2191. MenuConstructors.italic = Italic;
  2192. MenuConstructors.redo = Redo;
  2193. MenuConstructors.strikeThrough = StrikeThrough;
  2194. MenuConstructors.underline = Underline;
  2195. MenuConstructors.undo = Undo;
  2196. MenuConstructors.list = List;
  2197. MenuConstructors.justify = Justify;
  2198. MenuConstructors.foreColor = BackColor;
  2199. MenuConstructors.backColor = ForeColor$1;
  2200. MenuConstructors.quote = Quote;
  2201. MenuConstructors.code = Code;
  2202. MenuConstructors.emoticon = Emoticon;
  2203. MenuConstructors.table = Table;
  2204. MenuConstructors.video = Video;
  2205. MenuConstructors.image = Image;
  2206. /*
  2207. 菜单集合
  2208. */
  2209. // 构造函数
  2210. function Menus(editor) {
  2211. this.editor = editor;
  2212. this.menus = {};
  2213. }
  2214. // 修改原型
  2215. Menus.prototype = {
  2216. constructor: Menus,
  2217. // 初始化菜单
  2218. init: function init() {
  2219. var _this = this;
  2220. var editor = this.editor;
  2221. var config = editor.config || {};
  2222. var configMenus = config.menus || []; // 获取配置中的菜单
  2223. // 根据配置信息,创建菜单
  2224. configMenus.forEach(function (menuKey) {
  2225. var MenuConstructor = MenuConstructors[menuKey];
  2226. if (MenuConstructor && typeof MenuConstructor === 'function') {
  2227. // 创建单个菜单
  2228. _this.menus[menuKey] = new MenuConstructor(editor);
  2229. }
  2230. });
  2231. // 添加到菜单栏
  2232. this._addToToolbar();
  2233. // 绑定事件
  2234. this._bindEvent();
  2235. },
  2236. // 添加到菜单栏
  2237. _addToToolbar: function _addToToolbar() {
  2238. var editor = this.editor;
  2239. var $toolbarElem = editor.$toolbarElem;
  2240. var menus = this.menus;
  2241. objForEach(menus, function (key, menu) {
  2242. var $elem = menu.$elem;
  2243. if ($elem) {
  2244. $toolbarElem.append($elem);
  2245. }
  2246. });
  2247. },
  2248. // 绑定菜单 click mouseenter 事件
  2249. _bindEvent: function _bindEvent() {
  2250. var menus = this.menus;
  2251. var editor = this.editor;
  2252. objForEach(menus, function (key, menu) {
  2253. var type = menu.type;
  2254. if (!type) {
  2255. return;
  2256. }
  2257. var $elem = menu.$elem;
  2258. var droplist = menu.droplist;
  2259. var panel = menu.panel;
  2260. // 点击类型,例如 bold
  2261. if (type === 'click' && menu.onClick) {
  2262. $elem.on('click', function (e) {
  2263. if (editor.selection.getRange() == null) {
  2264. return;
  2265. }
  2266. menu.onClick(e);
  2267. });
  2268. }
  2269. // 下拉框,例如 head
  2270. if (type === 'droplist' && droplist) {
  2271. $elem.on('mouseenter', function (e) {
  2272. if (editor.selection.getRange() == null) {
  2273. return;
  2274. }
  2275. // 显示
  2276. droplist.showTimeoutId = setTimeout(function () {
  2277. droplist.show();
  2278. }, 200);
  2279. }).on('mouseleave', function (e) {
  2280. // 隐藏
  2281. droplist.hideTimeoutId = setTimeout(function () {
  2282. droplist.hide();
  2283. }, 0);
  2284. });
  2285. }
  2286. // 弹框类型,例如 link
  2287. if (type === 'panel' && menu.onClick) {
  2288. $elem.on('click', function (e) {
  2289. e.stopPropagation();
  2290. if (editor.selection.getRange() == null) {
  2291. return;
  2292. }
  2293. // 在自定义事件中显示 panel
  2294. menu.onClick(e);
  2295. });
  2296. }
  2297. });
  2298. },
  2299. // 尝试修改菜单状态
  2300. changeActive: function changeActive() {
  2301. var menus = this.menus;
  2302. objForEach(menus, function (key, menu) {
  2303. if (menu.tryChangeActive) {
  2304. setTimeout(function () {
  2305. menu.tryChangeActive();
  2306. }, 100);
  2307. }
  2308. });
  2309. }
  2310. };
  2311. /*
  2312. 粘贴信息的处理
  2313. */
  2314. // 获取粘贴的纯文本
  2315. function getPasteText(e) {
  2316. var clipboardData = e.clipboardData || e.originalEvent && e.originalEvent.clipboardData;
  2317. var pasteText = void 0;
  2318. if (clipboardData == null) {
  2319. pasteText = window.clipboardData && window.clipboardData.getData('text');
  2320. } else {
  2321. pasteText = clipboardData.getData('text/plain');
  2322. }
  2323. return replaceHtmlSymbol(pasteText);
  2324. }
  2325. // 获取粘贴的html
  2326. function getPasteHtml(e) {
  2327. var clipboardData = e.clipboardData || e.originalEvent && e.originalEvent.clipboardData;
  2328. var pasteText = void 0,
  2329. pasteHtml = void 0;
  2330. if (clipboardData == null) {
  2331. pasteText = window.clipboardData && window.clipboardData.getData('text');
  2332. } else {
  2333. pasteText = clipboardData.getData('text/plain');
  2334. pasteHtml = clipboardData.getData('text/html');
  2335. }
  2336. if (!pasteHtml && pasteText) {
  2337. pasteHtml = '<p>' + replaceHtmlSymbol(pasteText) + '</p>';
  2338. }
  2339. if (!pasteHtml) {
  2340. return;
  2341. }
  2342. // 过滤word中状态过来的无用字符
  2343. var docSplitHtml = pasteHtml.split('</html>');
  2344. if (docSplitHtml.length === 2) {
  2345. pasteHtml = docSplitHtml[0];
  2346. }
  2347. // 过滤无用标签
  2348. pasteHtml = pasteHtml.replace(/<(meta|script|link).+?>/igm, '');
  2349. // 过滤样式
  2350. pasteHtml = pasteHtml.replace(/\s?(class|style)=('|").+?('|")/igm, '');
  2351. return pasteHtml;
  2352. }
  2353. // 获取粘贴的图片文件
  2354. function getPasteImgs(e) {
  2355. var result = [];
  2356. var txt = getPasteText(e);
  2357. if (txt) {
  2358. // 有文字,就忽略图片
  2359. return result;
  2360. }
  2361. var clipboardData = e.clipboardData || e.originalEvent && e.originalEvent.clipboardData || {};
  2362. var items = clipboardData.items;
  2363. if (!items) {
  2364. return result;
  2365. }
  2366. objForEach(items, function (key, value) {
  2367. var type = value.type;
  2368. if (/image/i.test(type)) {
  2369. result.push(value.getAsFile());
  2370. }
  2371. });
  2372. return result;
  2373. }
  2374. /*
  2375. 编辑区域
  2376. */
  2377. // 构造函数
  2378. function Text(editor) {
  2379. this.editor = editor;
  2380. }
  2381. // 修改原型
  2382. Text.prototype = {
  2383. constructor: Text,
  2384. // 初始化
  2385. init: function init() {
  2386. // 绑定事件
  2387. this._bindEvent();
  2388. },
  2389. // 清空内容
  2390. clear: function clear() {
  2391. this.html('<p><br></p>');
  2392. },
  2393. // 获取 设置 html
  2394. html: function html(val) {
  2395. var editor = this.editor;
  2396. var $textElem = editor.$textElem;
  2397. if (val == null) {
  2398. return $textElem.html();
  2399. } else {
  2400. $textElem.html(val);
  2401. // 初始化选取,将光标定位到内容尾部
  2402. editor.initSelection();
  2403. }
  2404. },
  2405. // 获取 设置 text
  2406. text: function text(val) {
  2407. var editor = this.editor;
  2408. var $textElem = editor.$textElem;
  2409. if (val == null) {
  2410. return $textElem.text();
  2411. } else {
  2412. $textElem.text('<p>' + val + '</p>');
  2413. // 初始化选取,将光标定位到内容尾部
  2414. editor.initSelection();
  2415. }
  2416. },
  2417. // 追加内容
  2418. append: function append(html) {
  2419. var editor = this.editor;
  2420. var $textElem = editor.$textElem;
  2421. $textElem.append($(html));
  2422. // 初始化选取,将光标定位到内容尾部
  2423. editor.initSelection();
  2424. },
  2425. // 绑定事件
  2426. _bindEvent: function _bindEvent() {
  2427. // 实时保存选取
  2428. this._saveRangeRealTime();
  2429. // 按回车建时的特殊处理
  2430. this._enterKeyHandle();
  2431. // 清空时保留 <p><br></p>
  2432. this._clearHandle();
  2433. // 粘贴事件(粘贴文字,粘贴图片)
  2434. this._pasteHandle();
  2435. // tab 特殊处理
  2436. this._tabHandle();
  2437. // img 点击
  2438. this._imgHandle();
  2439. },
  2440. // 实时保存选取
  2441. _saveRangeRealTime: function _saveRangeRealTime() {
  2442. var editor = this.editor;
  2443. var $textElem = editor.$textElem;
  2444. // 保存当前的选区
  2445. function saveRange(e) {
  2446. // 随时保存选区
  2447. editor.selection.saveRange();
  2448. // 更新按钮 ative 状态
  2449. editor.menus.changeActive();
  2450. }
  2451. // 按键后保存
  2452. $textElem.on('keyup', saveRange);
  2453. $textElem.on('mousedown', function (e) {
  2454. // mousedown 状态下,鼠标滑动到编辑区域外面,也需要保存选区
  2455. $textElem.on('mouseleave', saveRange);
  2456. });
  2457. $textElem.on('mouseup', function (e) {
  2458. saveRange();
  2459. // 在编辑器区域之内完成点击,取消鼠标滑动到编辑区外面的事件
  2460. $textElem.off('mouseleave', saveRange);
  2461. });
  2462. },
  2463. // 按回车键时的特殊处理
  2464. _enterKeyHandle: function _enterKeyHandle() {
  2465. var editor = this.editor;
  2466. var $textElem = editor.$textElem;
  2467. // 将回车之后生成的非 <p> 的顶级标签,改为 <p>
  2468. function pHandle(e) {
  2469. var $selectionElem = editor.selection.getSelectionContainerElem();
  2470. var $parentElem = $selectionElem.parent();
  2471. if (!$parentElem.equal($textElem)) {
  2472. // 不是顶级标签
  2473. return;
  2474. }
  2475. var nodeName = $selectionElem.getNodeName();
  2476. if (nodeName === 'P') {
  2477. // 当前的标签是 P ,不用做处理
  2478. return;
  2479. }
  2480. if ($selectionElem.text()) {
  2481. // 有内容,不做处理
  2482. return;
  2483. }
  2484. // 插入 <p> ,并将选取定位到 <p>,删除当前标签
  2485. var $p = $('<p><br></p>');
  2486. $p.insertBefore($selectionElem);
  2487. editor.selection.createRangeByElem($p, true);
  2488. editor.selection.restoreSelection();
  2489. $selectionElem.remove();
  2490. }
  2491. $textElem.on('keyup', function (e) {
  2492. if (e.keyCode !== 13) {
  2493. // 不是回车键
  2494. return;
  2495. }
  2496. // 将回车之后生成的非 <p> 的顶级标签,改为 <p>
  2497. pHandle(e);
  2498. });
  2499. // <pre><code></code></pre> 回车时 特殊处理
  2500. function codeHandle(e) {
  2501. var $selectionElem = editor.selection.getSelectionContainerElem();
  2502. if (!$selectionElem) {
  2503. return;
  2504. }
  2505. var $parentElem = $selectionElem.parent();
  2506. var selectionNodeName = $selectionElem.getNodeName();
  2507. var parentNodeName = $parentElem.getNodeName();
  2508. if (selectionNodeName !== 'CODE' || parentNodeName !== 'PRE') {
  2509. // 不符合要求 忽略
  2510. return;
  2511. }
  2512. if (!editor.cmd.queryCommandSupported('insertHTML')) {
  2513. // 必须原生支持 insertHTML 命令
  2514. return;
  2515. }
  2516. var _startOffset = editor.selection.getRange().startOffset;
  2517. editor.cmd.do('insertHTML', '\n');
  2518. editor.selection.saveRange();
  2519. if (editor.selection.getRange().startOffset === _startOffset) {
  2520. // 没起作用,再来一遍
  2521. editor.cmd.do('insertHTML', '\n');
  2522. }
  2523. // 阻止默认行为
  2524. e.preventDefault();
  2525. }
  2526. $textElem.on('keydown', function (e) {
  2527. if (e.keyCode !== 13) {
  2528. // 不是回车键
  2529. return;
  2530. }
  2531. // <pre><code></code></pre> 回车时 特殊处理
  2532. codeHandle(e);
  2533. });
  2534. },
  2535. // 清空时保留 <p><br></p>
  2536. _clearHandle: function _clearHandle() {
  2537. var editor = this.editor;
  2538. var $textElem = editor.$textElem;
  2539. $textElem.on('keydown', function (e) {
  2540. if (e.keyCode !== 8) {
  2541. return;
  2542. }
  2543. var txtHtml = $textElem.html().toLowerCase().trim();
  2544. if (txtHtml === '<p><br></p>') {
  2545. // 最后剩下一个空行,就不再删除了
  2546. e.preventDefault();
  2547. return;
  2548. }
  2549. });
  2550. $textElem.on('keyup', function (e) {
  2551. if (e.keyCode !== 8) {
  2552. return;
  2553. }
  2554. var $p = void 0;
  2555. var txtHtml = $textElem.html().toLowerCase().trim();
  2556. // firefox 时用 txtHtml === '<br>' 判断,其他用 !txtHtml 判断
  2557. if (!txtHtml || txtHtml === '<br>') {
  2558. // 内容空了
  2559. $p = $('<p><br/></p>');
  2560. $textElem.html(''); // 一定要先清空,否则在 firefox 下有问题
  2561. $textElem.append($p);
  2562. editor.selection.createRangeByElem($p, false, true);
  2563. editor.selection.restoreSelection();
  2564. }
  2565. });
  2566. },
  2567. // 粘贴事件(粘贴文字 粘贴图片)
  2568. _pasteHandle: function _pasteHandle() {
  2569. var editor = this.editor;
  2570. var $textElem = editor.$textElem;
  2571. // 粘贴文字
  2572. $textElem.on('paste', function (e) {
  2573. if (UA.isIE()) {
  2574. // IE 下放弃下面的判断
  2575. return;
  2576. }
  2577. // 阻止默认行为,使用 execCommand 的粘贴命令
  2578. e.preventDefault();
  2579. // 获取粘贴的文字
  2580. var pasteHtml = getPasteHtml(e);
  2581. var pasteText = getPasteText(e);
  2582. pasteText = pasteText.replace(/\n/gm, '<br>');
  2583. var $selectionElem = editor.selection.getSelectionContainerElem();
  2584. if (!$selectionElem) {
  2585. return;
  2586. }
  2587. var nodeName = $selectionElem.getNodeName();
  2588. // code 中粘贴忽略
  2589. if (nodeName === 'CODE' || nodeName === 'PRE') {
  2590. return;
  2591. }
  2592. // 表格中忽略,可能会出现异常问题
  2593. if (nodeName === 'TD' || nodeName === 'TH') {
  2594. return;
  2595. }
  2596. if (nodeName === 'DIV' || $textElem.html() === '<p><br></p>') {
  2597. // 是 div,可粘贴过滤样式的文字和链接
  2598. if (!pasteHtml) {
  2599. return;
  2600. }
  2601. try {
  2602. // firefox 中,获取的 pasteHtml 可能是没有 <ul> 包裹的 <li>
  2603. // 因此执行 insertHTML 会报错
  2604. editor.cmd.do('insertHTML', pasteHtml);
  2605. } catch (ex) {
  2606. // 此时使用 pasteText 来兼容一下
  2607. editor.cmd.do('insertHTML', '<p>' + pasteText + '</p>');
  2608. }
  2609. } else {
  2610. // 不是 div,证明在已有内容的元素中粘贴,只粘贴纯文本
  2611. if (!pasteText) {
  2612. return;
  2613. }
  2614. editor.cmd.do('insertHTML', '<p>' + pasteText + '</p>');
  2615. }
  2616. });
  2617. // 粘贴图片
  2618. $textElem.on('paste', function (e) {
  2619. e.preventDefault();
  2620. // 获取粘贴的图片
  2621. var pasteFiles = getPasteImgs(e);
  2622. if (!pasteFiles || !pasteFiles.length) {
  2623. return;
  2624. }
  2625. // 获取当前的元素
  2626. var $selectionElem = editor.selection.getSelectionContainerElem();
  2627. if (!$selectionElem) {
  2628. return;
  2629. }
  2630. var nodeName = $selectionElem.getNodeName();
  2631. // code 中粘贴忽略
  2632. if (nodeName === 'CODE' || nodeName === 'PRE') {
  2633. return;
  2634. }
  2635. // 上传图片
  2636. var uploadImg = editor.uploadImg;
  2637. uploadImg.uploadImg(pasteFiles);
  2638. });
  2639. },
  2640. // tab 特殊处理
  2641. _tabHandle: function _tabHandle() {
  2642. var editor = this.editor;
  2643. var $textElem = editor.$textElem;
  2644. $textElem.on('keydown', function (e) {
  2645. if (e.keyCode !== 9) {
  2646. return;
  2647. }
  2648. if (!editor.cmd.queryCommandSupported('insertHTML')) {
  2649. // 必须原生支持 insertHTML 命令
  2650. return;
  2651. }
  2652. var $selectionElem = editor.selection.getSelectionContainerElem();
  2653. if (!$selectionElem) {
  2654. return;
  2655. }
  2656. var $parentElem = $selectionElem.parent();
  2657. var selectionNodeName = $selectionElem.getNodeName();
  2658. var parentNodeName = $parentElem.getNodeName();
  2659. if (selectionNodeName === 'CODE' && parentNodeName === 'PRE') {
  2660. // <pre><code> 里面
  2661. editor.cmd.do('insertHTML', ' ');
  2662. } else {
  2663. // 普通文字
  2664. editor.cmd.do('insertHTML', '&nbsp;&nbsp;&nbsp;&nbsp;');
  2665. }
  2666. e.preventDefault();
  2667. });
  2668. },
  2669. // img 点击
  2670. _imgHandle: function _imgHandle() {
  2671. var editor = this.editor;
  2672. var $textElem = editor.$textElem;
  2673. var selectedClass = 'w-e-selected';
  2674. // 为图片增加 selected 样式
  2675. $textElem.on('click', 'img', function (e) {
  2676. var img = this;
  2677. var $img = $(img);
  2678. // 去掉所有图片的 selected 样式
  2679. $textElem.find('img').removeClass(selectedClass);
  2680. // 为点击的图片增加样式,并记录当前图片
  2681. $img.addClass(selectedClass);
  2682. editor._selectedImg = $img;
  2683. // 修改选取
  2684. editor.selection.createRangeByElem($img);
  2685. });
  2686. // 去掉图片的 selected 样式
  2687. $textElem.on('click keyup', function (e) {
  2688. if (e.target.matches('img')) {
  2689. // 点击的是图片,忽略
  2690. return;
  2691. }
  2692. // 取消掉 selected 样式,并删除记录
  2693. $textElem.find('img').removeClass(selectedClass);
  2694. editor._selectedImg = null;
  2695. });
  2696. }
  2697. };
  2698. /*
  2699. 命令,封装 document.execCommand
  2700. */
  2701. // 构造函数
  2702. function Command(editor) {
  2703. this.editor = editor;
  2704. }
  2705. // 修改原型
  2706. Command.prototype = {
  2707. constructor: Command,
  2708. // 执行命令
  2709. do: function _do(name, value) {
  2710. var editor = this.editor;
  2711. // 如果无选区,忽略
  2712. if (!editor.selection.getRange()) {
  2713. return;
  2714. }
  2715. // 恢复选取
  2716. editor.selection.restoreSelection();
  2717. // 执行
  2718. var _name = '_' + name;
  2719. if (this[_name]) {
  2720. // 有自定义事件
  2721. this[_name](value);
  2722. } else {
  2723. // 默认 command
  2724. this._execCommand(name, value);
  2725. }
  2726. // 修改菜单状态
  2727. editor.menus.changeActive();
  2728. // 最后,恢复选取保证光标在原来的位置闪烁
  2729. editor.selection.saveRange();
  2730. editor.selection.restoreSelection();
  2731. // 触发 onchange
  2732. editor.change && editor.change();
  2733. },
  2734. // 自定义 insertHTML 事件
  2735. _insertHTML: function _insertHTML(html) {
  2736. var editor = this.editor;
  2737. var range = editor.selection.getRange();
  2738. // 保证传入的参数是 html 代码
  2739. var test = /^<.+>$/.test(html);
  2740. if (!test && !UA.isWebkit()) {
  2741. // webkit 可以插入非 html 格式的文字
  2742. throw new Error('执行 insertHTML 命令时传入的参数必须是 html 格式');
  2743. }
  2744. if (this.queryCommandSupported('insertHTML')) {
  2745. // W3C
  2746. this._execCommand('insertHTML', html);
  2747. } else if (range.insertNode) {
  2748. // IE
  2749. range.deleteContents();
  2750. range.insertNode($(html)[0]);
  2751. } else if (range.pasteHTML) {
  2752. // IE <= 10
  2753. range.pasteHTML(html);
  2754. }
  2755. },
  2756. // 插入 elem
  2757. _insertElem: function _insertElem($elem) {
  2758. var editor = this.editor;
  2759. var range = editor.selection.getRange();
  2760. if (range.insertNode) {
  2761. range.deleteContents();
  2762. range.insertNode($elem[0]);
  2763. }
  2764. },
  2765. // 封装 execCommand
  2766. _execCommand: function _execCommand(name, value) {
  2767. document.execCommand(name, false, value);
  2768. },
  2769. // 封装 document.queryCommandValue
  2770. queryCommandValue: function queryCommandValue(name) {
  2771. return document.queryCommandValue(name);
  2772. },
  2773. // 封装 document.queryCommandState
  2774. queryCommandState: function queryCommandState(name) {
  2775. return document.queryCommandState(name);
  2776. },
  2777. // 封装 document.queryCommandSupported
  2778. queryCommandSupported: function queryCommandSupported(name) {
  2779. return document.queryCommandSupported(name);
  2780. }
  2781. };
  2782. /*
  2783. selection range API
  2784. */
  2785. // 构造函数
  2786. function API(editor) {
  2787. this.editor = editor;
  2788. this._currentRange = null;
  2789. }
  2790. // 修改原型
  2791. API.prototype = {
  2792. constructor: API,
  2793. // 获取 range 对象
  2794. getRange: function getRange() {
  2795. return this._currentRange;
  2796. },
  2797. // 保存选区
  2798. saveRange: function saveRange(_range) {
  2799. if (_range) {
  2800. // 保存已有选区
  2801. this._currentRange = _range;
  2802. return;
  2803. }
  2804. // 获取当前的选区
  2805. var selection = window.getSelection();
  2806. if (selection.rangeCount === 0) {
  2807. return;
  2808. }
  2809. var range = selection.getRangeAt(0);
  2810. // 判断选区内容是否在编辑内容之内
  2811. var $containerElem = this.getSelectionContainerElem(range);
  2812. if (!$containerElem) {
  2813. return;
  2814. }
  2815. var editor = this.editor;
  2816. var $textElem = editor.$textElem;
  2817. if ($textElem.isContain($containerElem)) {
  2818. // 是编辑内容之内的
  2819. this._currentRange = range;
  2820. }
  2821. },
  2822. // 折叠选区
  2823. collapseRange: function collapseRange(toStart) {
  2824. if (toStart == null) {
  2825. // 默认为 false
  2826. toStart = false;
  2827. }
  2828. var range = this._currentRange;
  2829. if (range) {
  2830. range.collapse(toStart);
  2831. }
  2832. },
  2833. // 选中区域的文字
  2834. getSelectionText: function getSelectionText() {
  2835. var range = this._currentRange;
  2836. if (range) {
  2837. return this._currentRange.toString();
  2838. } else {
  2839. return '';
  2840. }
  2841. },
  2842. // 选区的 $Elem
  2843. getSelectionContainerElem: function getSelectionContainerElem(range) {
  2844. range = range || this._currentRange;
  2845. var elem = void 0;
  2846. if (range) {
  2847. elem = range.commonAncestorContainer;
  2848. return $(elem.nodeType === 1 ? elem : elem.parentNode);
  2849. }
  2850. },
  2851. getSelectionStartElem: function getSelectionStartElem(range) {
  2852. range = range || this._currentRange;
  2853. var elem = void 0;
  2854. if (range) {
  2855. elem = range.startContainer;
  2856. return $(elem.nodeType === 1 ? elem : elem.parentNode);
  2857. }
  2858. },
  2859. getSelectionEndElem: function getSelectionEndElem(range) {
  2860. range = range || this._currentRange;
  2861. var elem = void 0;
  2862. if (range) {
  2863. elem = range.endContainer;
  2864. return $(elem.nodeType === 1 ? elem : elem.parentNode);
  2865. }
  2866. },
  2867. // 选区是否为空
  2868. isSelectionEmpty: function isSelectionEmpty() {
  2869. var range = this._currentRange;
  2870. if (range && range.startContainer) {
  2871. if (range.startContainer === range.endContainer) {
  2872. if (range.startOffset === range.endOffset) {
  2873. return true;
  2874. }
  2875. }
  2876. }
  2877. return false;
  2878. },
  2879. // 恢复选区
  2880. restoreSelection: function restoreSelection() {
  2881. var selection = window.getSelection();
  2882. selection.removeAllRanges();
  2883. selection.addRange(this._currentRange);
  2884. },
  2885. // 创建一个空白(即 &#8203 字符)选区
  2886. createEmptyRange: function createEmptyRange() {
  2887. var editor = this.editor;
  2888. var range = this.getRange();
  2889. var $elem = void 0;
  2890. if (!range) {
  2891. // 当前无 range
  2892. return;
  2893. }
  2894. if (!this.isSelectionEmpty()) {
  2895. // 当前选区必须没有内容才可以
  2896. return;
  2897. }
  2898. // 目前只支持 webkit 内核
  2899. if (UA.isWebkit()) {
  2900. // 插入 &#8203
  2901. editor.cmd.do('insertHTML', '&#8203;');
  2902. // 修改 offset 位置
  2903. range.setEnd(range.endContainer, range.endOffset + 1);
  2904. // 存储
  2905. this.saveRange(range);
  2906. } else {
  2907. $elem = $('<strong>&#8203;</strong>');
  2908. editor.cmd.do('insertElem', $elem);
  2909. this.createRangeByElem($elem, true);
  2910. }
  2911. },
  2912. // 根据 $Elem 设置选区
  2913. createRangeByElem: function createRangeByElem($elem, toStart, isContent) {
  2914. // $elem - 经过封装的 elem
  2915. // toStart - true 开始位置,false 结束位置
  2916. // isContent - 是否选中Elem的内容
  2917. if (!$elem.length) {
  2918. return;
  2919. }
  2920. var elem = $elem[0];
  2921. var range = document.createRange();
  2922. if (isContent) {
  2923. range.selectNodeContents(elem);
  2924. } else {
  2925. range.selectNode(elem);
  2926. }
  2927. if (typeof toStart === 'boolean') {
  2928. range.collapse(toStart);
  2929. }
  2930. // 存储 range
  2931. this.saveRange(range);
  2932. }
  2933. };
  2934. /*
  2935. 上传进度条
  2936. */
  2937. function Progress(editor) {
  2938. this.editor = editor;
  2939. this._time = 0;
  2940. this._isShow = false;
  2941. this._isRender = false;
  2942. this._timeoutId = 0;
  2943. this.$textContainer = editor.$textContainerElem;
  2944. this.$bar = $('<div class="w-e-progress"></div>');
  2945. }
  2946. Progress.prototype = {
  2947. constructor: Progress,
  2948. show: function show(progress) {
  2949. var _this = this;
  2950. // 状态处理
  2951. if (this._isShow) {
  2952. return;
  2953. }
  2954. this._isShow = true;
  2955. // 渲染
  2956. var $bar = this.$bar;
  2957. if (!this._isRender) {
  2958. var $textContainer = this.$textContainer;
  2959. $textContainer.append($bar);
  2960. } else {
  2961. this._isRender = true;
  2962. }
  2963. // 改变进度(节流,100ms 渲染一次)
  2964. if (Date.now() - this._time > 100) {
  2965. if (progress <= 1) {
  2966. $bar.css('width', progress * 100 + '%');
  2967. this._time = Date.now();
  2968. }
  2969. }
  2970. // 隐藏
  2971. var timeoutId = this._timeoutId;
  2972. if (timeoutId) {
  2973. clearTimeout(timeoutId);
  2974. }
  2975. timeoutId = setTimeout(function () {
  2976. _this._hide();
  2977. }, 500);
  2978. },
  2979. _hide: function _hide() {
  2980. var $bar = this.$bar;
  2981. $bar.remove();
  2982. // 修改状态
  2983. this._time = 0;
  2984. this._isShow = false;
  2985. this._isRender = false;
  2986. }
  2987. };
  2988. var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) {
  2989. return typeof obj;
  2990. } : function (obj) {
  2991. return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
  2992. };
  2993. /*
  2994. 上传图片
  2995. */
  2996. // 构造函数
  2997. function UploadImg(editor) {
  2998. this.editor = editor;
  2999. }
  3000. // 原型
  3001. UploadImg.prototype = {
  3002. constructor: UploadImg,
  3003. // 根据 debug 弹出不同的信息
  3004. _alert: function _alert(alertInfo, debugInfo) {
  3005. var editor = this.editor;
  3006. var debug = editor.config.debug;
  3007. if (debug) {
  3008. throw new Error('wangEditor: ' + (debugInfo || alertInfo));
  3009. } else {
  3010. alert(alertInfo);
  3011. }
  3012. },
  3013. // 根据链接插入图片
  3014. insertLinkImg: function insertLinkImg(link) {
  3015. var _this2 = this;
  3016. if (!link) {
  3017. return;
  3018. }
  3019. var editor = this.editor;
  3020. var img = document.createElement('img');
  3021. img.onload = function () {
  3022. img = null;
  3023. editor.cmd.do('insertHTML', '<img src="' + link + '" style="max-width:100%;"/>');
  3024. };
  3025. img.onerror = function () {
  3026. img = null;
  3027. // 无法成功下载图片
  3028. _this2._alert('插入图片错误', 'wangEditor: \u63D2\u5165\u56FE\u7247\u51FA\u9519\uFF0C\u56FE\u7247\u94FE\u63A5\u662F "' + link + '"\uFF0C\u4E0B\u8F7D\u8BE5\u94FE\u63A5\u5931\u8D25');
  3029. return;
  3030. };
  3031. img.onabort = function () {
  3032. img = null;
  3033. };
  3034. img.src = link;
  3035. },
  3036. // 上传图片
  3037. uploadImg: function uploadImg(files) {
  3038. var _this3 = this;
  3039. if (!files || !files.length) {
  3040. return;
  3041. }
  3042. // ------------------------------ 获取配置信息 ------------------------------
  3043. var editor = this.editor;
  3044. var config = editor.config;
  3045. var maxSize = config.uploadImgMaxSize;
  3046. var maxSizeM = maxSize / 1000 / 1000;
  3047. var maxLength = config.uploadImgMaxLength || 10000;
  3048. var uploadImgServer = config.uploadImgServer;
  3049. var uploadImgShowBase64 = config.uploadImgShowBase64;
  3050. var uploadFileName = config.uploadFileName || '';
  3051. var uploadImgParams = config.uploadImgParams || {};
  3052. var uploadImgHeaders = config.uploadImgHeaders || {};
  3053. var hooks = config.uploadImgHooks || {};
  3054. var timeout = config.uploadImgTimeout || 3000;
  3055. var withCredentials = config.withCredentials;
  3056. if (withCredentials == null) {
  3057. withCredentials = false;
  3058. }
  3059. // ------------------------------ 验证文件信息 ------------------------------
  3060. var resultFiles = [];
  3061. var errInfo = [];
  3062. arrForEach(files, function (file) {
  3063. var name = file.name;
  3064. var size = file.size;
  3065. if (/\.(jpg|jpeg|png|bmp|gif)$/i.test(name) === false) {
  3066. // 后缀名不合法,不是图片
  3067. errInfo.push('\u3010' + name + '\u3011\u4E0D\u662F\u56FE\u7247');
  3068. return;
  3069. }
  3070. if (maxSize < size) {
  3071. // 上传图片过大
  3072. errInfo.push('\u3010' + name + '\u3011\u5927\u4E8E ' + maxSizeM + 'M');
  3073. return;
  3074. }
  3075. // 验证通过的加入结果列表
  3076. resultFiles.push(file);
  3077. });
  3078. // 抛出验证信息
  3079. if (errInfo.length) {
  3080. this._alert('图片验证未通过: \n' + errInfo.join('\n'));
  3081. return;
  3082. }
  3083. if (resultFiles.length > maxLength) {
  3084. this._alert('一次最多上传' + maxLength + '张图片');
  3085. return;
  3086. }
  3087. // 添加图片数据
  3088. var formdata = new FormData();
  3089. arrForEach(resultFiles, function (file) {
  3090. var name = uploadFileName || file.name;
  3091. formdata.append(name, file);
  3092. });
  3093. // ------------------------------ 上传图片 ------------------------------
  3094. if (uploadImgServer && typeof uploadImgServer === 'string') {
  3095. // 添加参数
  3096. var uploadImgServerArr = uploadImgServer.split('#');
  3097. uploadImgServer = uploadImgServerArr[0];
  3098. var uploadImgServerHash = uploadImgServerArr[1] || '';
  3099. objForEach(uploadImgParams, function (key, val) {
  3100. val = encodeURIComponent(val);
  3101. // 第一,将参数拼接到 url 中
  3102. if (uploadImgServer.indexOf('?') > 0) {
  3103. uploadImgServer += '&';
  3104. } else {
  3105. uploadImgServer += '?';
  3106. }
  3107. uploadImgServer = uploadImgServer + key + '=' + val;
  3108. // 第二,将参数添加到 formdata 中
  3109. formdata.append(key, val);
  3110. });
  3111. if (uploadImgServerHash) {
  3112. uploadImgServer += '#' + uploadImgServerHash;
  3113. }
  3114. // 定义 xhr
  3115. var xhr = new XMLHttpRequest();
  3116. xhr.open('POST', uploadImgServer);
  3117. // 设置超时
  3118. xhr.timeout = timeout;
  3119. xhr.ontimeout = function () {
  3120. // hook - timeout
  3121. if (hooks.timeout && typeof hooks.timeout === 'function') {
  3122. hooks.timeout(xhr, editor);
  3123. }
  3124. _this3._alert('上传图片超时');
  3125. };
  3126. // 监控 progress
  3127. if (xhr.upload) {
  3128. xhr.upload.onprogress = function (e) {
  3129. var percent = void 0;
  3130. // 进度条
  3131. var progressBar = new Progress(editor);
  3132. if (e.lengthComputable) {
  3133. percent = e.loaded / e.total;
  3134. progressBar.show(percent);
  3135. }
  3136. };
  3137. }
  3138. // 返回数据
  3139. xhr.onreadystatechange = function () {
  3140. var result = void 0;
  3141. if (xhr.readyState === 4) {
  3142. if (xhr.status < 200 || xhr.status >= 300) {
  3143. // hook - error
  3144. if (hooks.error && typeof hooks.error === 'function') {
  3145. hooks.error(xhr, editor);
  3146. }
  3147. // xhr 返回状态错误
  3148. _this3._alert('上传图片发生错误', '\u4E0A\u4F20\u56FE\u7247\u53D1\u751F\u9519\u8BEF\uFF0C\u670D\u52A1\u5668\u8FD4\u56DE\u72B6\u6001\u662F ' + xhr.status);
  3149. return;
  3150. }
  3151. result = xhr.responseText;
  3152. if ((typeof result === 'undefined' ? 'undefined' : _typeof(result)) !== 'object') {
  3153. try {
  3154. result = JSON.parse(result);
  3155. } catch (ex) {
  3156. // hook - fail
  3157. if (hooks.fail && typeof hooks.fail === 'function') {
  3158. hooks.fail(xhr, editor, result);
  3159. }
  3160. _this3._alert('上传图片失败', '上传图片返回结果错误,返回结果是: ' + result);
  3161. return;
  3162. }
  3163. }
  3164. if (!hooks.customInsert && result.errno != '0') {
  3165. // hook - fail
  3166. if (hooks.fail && typeof hooks.fail === 'function') {
  3167. hooks.fail(xhr, editor, result);
  3168. }
  3169. // 数据错误
  3170. _this3._alert('上传图片失败', '上传图片返回结果错误,返回结果 errno=' + result.errno);
  3171. } else {
  3172. if (hooks.customInsert && typeof hooks.customInsert === 'function') {
  3173. // 使用者自定义插入方法
  3174. hooks.customInsert(_this3.insertLinkImg.bind(_this3), result, editor);
  3175. } else {
  3176. // 将图片插入编辑器
  3177. var data = result.data || [];
  3178. data.forEach(function (link) {
  3179. _this3.insertLinkImg(link);
  3180. });
  3181. }
  3182. // hook - success
  3183. if (hooks.success && typeof hooks.success === 'function') {
  3184. hooks.success(xhr, editor, result);
  3185. }
  3186. }
  3187. }
  3188. };
  3189. // hook - before
  3190. if (hooks.before && typeof hooks.before === 'function') {
  3191. hooks.before(xhr, editor, resultFiles);
  3192. }
  3193. // 自定义 headers
  3194. objForEach(uploadImgHeaders, function (key, val) {
  3195. xhr.setRequestHeader(key, val);
  3196. });
  3197. // 跨域传 cookie
  3198. xhr.withCredentials = withCredentials;
  3199. // 发送请求
  3200. xhr.send(formdata);
  3201. // 注意,要 return 。不去操作接下来的 base64 显示方式
  3202. return;
  3203. }
  3204. // 显示 base64 格式
  3205. if (uploadImgShowBase64) {
  3206. arrForEach(files, function (file) {
  3207. var _this = _this3;
  3208. var reader = new FileReader();
  3209. reader.readAsDataURL(file);
  3210. reader.onload = function () {
  3211. _this.insertLinkImg(this.result);
  3212. };
  3213. });
  3214. }
  3215. }
  3216. };
  3217. /*
  3218. 编辑器构造函数
  3219. */
  3220. // id,累加
  3221. var editorId = 1;
  3222. // 构造函数
  3223. function Editor(toolbarSelector, textSelector) {
  3224. if (toolbarSelector == null) {
  3225. // 没有传入任何参数,报错
  3226. throw new Error('错误:初始化编辑器时候未传入任何参数,请查阅文档');
  3227. }
  3228. // id,用以区分单个页面不同的编辑器对象
  3229. this.id = 'wangEditor-' + editorId++;
  3230. this.toolbarSelector = toolbarSelector;
  3231. this.textSelector = textSelector;
  3232. // 自定义配置
  3233. this.customConfig = {};
  3234. }
  3235. // 修改原型
  3236. Editor.prototype = {
  3237. constructor: Editor,
  3238. // 初始化配置
  3239. _initConfig: function _initConfig() {
  3240. // _config 是默认配置,this.customConfig 是用户自定义配置,将它们 merge 之后再赋值
  3241. var target = {};
  3242. this.config = Object.assign(target, config, this.customConfig);
  3243. },
  3244. // 初始化 DOM
  3245. _initDom: function _initDom() {
  3246. var _this = this;
  3247. var toolbarSelector = this.toolbarSelector;
  3248. var $toolbarSelector = $(toolbarSelector);
  3249. var textSelector = this.textSelector;
  3250. var config$$1 = this.config;
  3251. var zIndex = config$$1.zIndex || '10000';
  3252. // 定义变量
  3253. var $toolbarElem = void 0,
  3254. $textContainerElem = void 0,
  3255. $textElem = void 0,
  3256. $children = void 0;
  3257. if (textSelector == null) {
  3258. // 只传入一个参数,即是容器的选择器或元素,toolbar 和 text 的元素自行创建
  3259. $toolbarElem = $('<div></div>');
  3260. $textContainerElem = $('<div></div>');
  3261. // 将编辑器区域原有的内容,暂存起来
  3262. $children = $toolbarSelector.children();
  3263. // 添加到 DOM 结构中
  3264. $toolbarSelector.append($toolbarElem).append($textContainerElem);
  3265. // 自行创建的,需要配置默认的样式
  3266. $toolbarElem.css('background-color', '#f1f1f1').css('border', '1px solid #ccc');
  3267. $textContainerElem.css('border', '1px solid #ccc').css('border-top', 'none').css('height', '150px');
  3268. } else {
  3269. // toolbar 和 text 的选择器都有值,记录属性
  3270. $toolbarElem = $toolbarSelector;
  3271. $textContainerElem = $(textSelector);
  3272. // 将编辑器区域原有的内容,暂存起来
  3273. $children = $textContainerElem.children();
  3274. }
  3275. // 编辑区域
  3276. $textElem = $('<div></div>');
  3277. $textElem.attr('contenteditable', 'true').css('width', '100%').css('height', '100%');
  3278. // 初始化编辑区域内容
  3279. if ($children && $children.length) {
  3280. $textElem.append($children);
  3281. } else {
  3282. $textElem.append($('<p><br></p>'));
  3283. }
  3284. // 编辑区域加入DOM
  3285. $textContainerElem.append($textElem);
  3286. // 设置通用的 class
  3287. $toolbarElem.addClass('w-e-toolbar');
  3288. $textContainerElem.addClass('w-e-text-container');
  3289. $textContainerElem.css('z-index', zIndex);
  3290. $textElem.addClass('w-e-text');
  3291. // 记录属性
  3292. this.$toolbarElem = $toolbarElem;
  3293. this.$textContainerElem = $textContainerElem;
  3294. this.$textElem = $textElem;
  3295. // 绑定 onchange
  3296. $textContainerElem.on('click keyup', function () {
  3297. _this.change && _this.change();
  3298. });
  3299. $toolbarElem.on('click', function () {
  3300. this.change && this.change();
  3301. });
  3302. },
  3303. // 封装 command
  3304. _initCommand: function _initCommand() {
  3305. this.cmd = new Command(this);
  3306. },
  3307. // 封装 selection range API
  3308. _initSelectionAPI: function _initSelectionAPI() {
  3309. this.selection = new API(this);
  3310. },
  3311. // 添加图片上传
  3312. _initUploadImg: function _initUploadImg() {
  3313. this.uploadImg = new UploadImg(this);
  3314. },
  3315. // 初始化菜单
  3316. _initMenus: function _initMenus() {
  3317. this.menus = new Menus(this);
  3318. this.menus.init();
  3319. },
  3320. // 添加 text 区域
  3321. _initText: function _initText() {
  3322. this.txt = new Text(this);
  3323. this.txt.init();
  3324. },
  3325. // 初始化选区,将光标定位到内容尾部
  3326. initSelection: function initSelection() {
  3327. var $textElem = this.$textElem;
  3328. var $children = $textElem.children();
  3329. if (!$children.length) {
  3330. // 如果编辑器区域无内容,添加一个空行,重新设置选区
  3331. $textElem.append($('<p><br></p>'));
  3332. this.initSelection();
  3333. return;
  3334. }
  3335. var $last = $children.last();
  3336. var html = $last.html().toLowerCase();
  3337. var nodeName = $last.getNodeName();
  3338. if (html !== '<br>' && html !== '<br\/>' || nodeName !== 'P') {
  3339. // 最后一个元素不是 <p><br></p>,添加一个空行,重新设置选区
  3340. $textElem.append($('<p><br></p>'));
  3341. this.initSelection();
  3342. return;
  3343. }
  3344. this.selection.createRangeByElem($last, true);
  3345. this.selection.restoreSelection();
  3346. },
  3347. // 绑定事件
  3348. _bindEvent: function _bindEvent() {
  3349. // -------- 绑定 onchange 事件 --------
  3350. var onChangeTimeoutId = 0;
  3351. var beforeChangeHtml = this.txt.html();
  3352. var config$$1 = this.config;
  3353. var onchange = config$$1.onchange;
  3354. if (onchange && typeof onchange === 'function') {
  3355. // 触发 change 的有三个场景:
  3356. // 1. $textContainerElem.on('click keyup')
  3357. // 2. $toolbarElem.on('click')
  3358. // 3. editor.cmd.do()
  3359. this.change = function () {
  3360. // 判断是否有变化
  3361. var currentHtml = this.txt.html();
  3362. if (currentHtml.length === beforeChangeHtml.length) {
  3363. return;
  3364. }
  3365. // 执行,使用节流
  3366. if (onChangeTimeoutId) {
  3367. clearTimeout(onChangeTimeoutId);
  3368. }
  3369. onChangeTimeoutId = setTimeout(function () {
  3370. // 触发配置的 onchange 函数
  3371. onchange(currentHtml);
  3372. beforeChangeHtml = currentHtml;
  3373. }, 200);
  3374. };
  3375. }
  3376. },
  3377. // 创建编辑器
  3378. create: function create() {
  3379. // 初始化配置信息
  3380. this._initConfig();
  3381. // 初始化 DOM
  3382. this._initDom();
  3383. // 封装 command API
  3384. this._initCommand();
  3385. // 封装 selection range API
  3386. this._initSelectionAPI();
  3387. // 添加 text
  3388. this._initText();
  3389. // 初始化菜单
  3390. this._initMenus();
  3391. // 添加 图片上传
  3392. this._initUploadImg();
  3393. // 初始化选区,将光标定位到内容尾部
  3394. this.initSelection();
  3395. // 绑定事件
  3396. this._bindEvent();
  3397. }
  3398. };
  3399. // 检验是否浏览器环境
  3400. try {
  3401. document;
  3402. } catch (ex) {
  3403. throw new Error('请在浏览器环境下运行');
  3404. }
  3405. // polyfill
  3406. polyfill();
  3407. // 这里的 `inlinecss` 将被替换成 css 代码的内容,详情可去 ./gulpfile.js 中搜索 `inlinecss` 关键字
  3408. 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: \'icomoon\'; src: url(data:application/x-font-woff;charset=utf-8;base64,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) 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: \'icomoon\' !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-toolbar { display: -webkit-box; display: -ms-flexbox; display: flex; padding: 0 5px; /* 单个菜单 */}.w-e-toolbar .w-e-menu { position: relative; z-index: 10001; 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;}.w-e-text img.w-e-selected { border: 2px solid #1e88e5;}.w-e-text img.w-e-selected:hover { box-shadow: none;}';
  3409. // 将 css 代码添加到 <style> 中
  3410. var style = document.createElement('style');
  3411. style.type = 'text/css';
  3412. style.innerHTML = inlinecss;
  3413. document.getElementsByTagName('HEAD').item(0).appendChild(style);
  3414. // 返回
  3415. var index = window.wangEditor || Editor;
  3416. return index;
  3417. })));