File modules/editor/trumbowyg/trumbowyg.js
Last commit: Tue Aug 28 00:33:27 2018 +0200 Jan Dankert Editoren für Markdown (SimpleMDE) und HTML (Trumbowyg) installiert.
1 /** 2 * Trumbowyg v2.10.0 - A lightweight WYSIWYG editor 3 * Trumbowyg core file 4 * ------------------------ 5 * @link http://alex-d.github.io/Trumbowyg 6 * @license MIT 7 * @author Alexandre Demode (Alex-D) 8 * Twitter : @AlexandreDemode 9 * Website : alex-d.fr 10 */ 11 12 jQuery.trumbowyg = { 13 langs: { 14 en: { 15 viewHTML: 'View HTML', 16 17 undo: 'Undo', 18 redo: 'Redo', 19 20 formatting: 'Formatting', 21 p: 'Paragraph', 22 blockquote: 'Quote', 23 code: 'Code', 24 header: 'Header', 25 26 bold: 'Bold', 27 italic: 'Italic', 28 strikethrough: 'Stroke', 29 underline: 'Underline', 30 31 strong: 'Strong', 32 em: 'Emphasis', 33 del: 'Deleted', 34 35 superscript: 'Superscript', 36 subscript: 'Subscript', 37 38 unorderedList: 'Unordered list', 39 orderedList: 'Ordered list', 40 41 insertImage: 'Insert Image', 42 link: 'Link', 43 createLink: 'Insert link', 44 unlink: 'Remove link', 45 46 justifyLeft: 'Align Left', 47 justifyCenter: 'Align Center', 48 justifyRight: 'Align Right', 49 justifyFull: 'Align Justify', 50 51 horizontalRule: 'Insert horizontal rule', 52 removeformat: 'Remove format', 53 54 fullscreen: 'Fullscreen', 55 56 close: 'Close', 57 58 submit: 'Confirm', 59 reset: 'Cancel', 60 61 required: 'Required', 62 description: 'Description', 63 title: 'Title', 64 text: 'Text', 65 target: 'Target', 66 width: 'Width' 67 } 68 }, 69 70 // Plugins 71 plugins: {}, 72 73 // SVG Path globally 74 svgPath: null, 75 76 hideButtonTexts: null 77 }; 78 79 // Makes default options read-only 80 Object.defineProperty(jQuery.trumbowyg, 'defaultOptions', { 81 value: { 82 lang: 'en', 83 84 fixedBtnPane: false, 85 fixedFullWidth: false, 86 autogrow: false, 87 autogrowOnEnter: false, 88 imageWidthModalEdit: false, 89 90 prefix: 'trumbowyg-', 91 92 semantic: true, 93 resetCss: false, 94 removeformatPasted: false, 95 tagsToRemove: [], 96 btns: [ 97 ['viewHTML'], 98 ['undo', 'redo'], // Only supported in Blink browsers 99 ['formatting'], 100 ['strong', 'em', 'del'], 101 ['superscript', 'subscript'], 102 ['link'], 103 ['insertImage'], 104 ['justifyLeft', 'justifyCenter', 'justifyRight', 'justifyFull'], 105 ['unorderedList', 'orderedList'], 106 ['horizontalRule'], 107 ['removeformat'], 108 ['fullscreen'] 109 ], 110 // For custom button definitions 111 btnsDef: {}, 112 113 inlineElementsSelector: 'a,abbr,acronym,b,caption,cite,code,col,dfn,dir,dt,dd,em,font,hr,i,kbd,li,q,span,strikeout,strong,sub,sup,u', 114 115 pasteHandlers: [], 116 117 // imgDblClickHandler: default is defined in constructor 118 119 plugins: {}, 120 urlProtocol: false, 121 minimalLinks: false 122 }, 123 writable: false, 124 enumerable: true, 125 configurable: false 126 }); 127 128 129 (function (navigator, window, document, $) { 130 'use strict'; 131 132 var CONFIRM_EVENT = 'tbwconfirm', 133 CANCEL_EVENT = 'tbwcancel'; 134 135 $.fn.trumbowyg = function (options, params) { 136 var trumbowygDataName = 'trumbowyg'; 137 if (options === Object(options) || !options) { 138 return this.each(function () { 139 if (!$(this).data(trumbowygDataName)) { 140 $(this).data(trumbowygDataName, new Trumbowyg(this, options)); 141 } 142 }); 143 } 144 if (this.length === 1) { 145 try { 146 var t = $(this).data(trumbowygDataName); 147 switch (options) { 148 // Exec command 149 case 'execCmd': 150 return t.execCmd(params.cmd, params.param, params.forceCss); 151 152 // Modal box 153 case 'openModal': 154 return t.openModal(params.title, params.content); 155 case 'closeModal': 156 return t.closeModal(); 157 case 'openModalInsert': 158 return t.openModalInsert(params.title, params.fields, params.callback); 159 160 // Range 161 case 'saveRange': 162 return t.saveRange(); 163 case 'getRange': 164 return t.range; 165 case 'getRangeText': 166 return t.getRangeText(); 167 case 'restoreRange': 168 return t.restoreRange(); 169 170 // Enable/disable 171 case 'enable': 172 return t.setDisabled(false); 173 case 'disable': 174 return t.setDisabled(true); 175 176 // Toggle 177 case 'toggle': 178 return t.toggle(); 179 180 // Destroy 181 case 'destroy': 182 return t.destroy(); 183 184 // Empty 185 case 'empty': 186 return t.empty(); 187 188 // HTML 189 case 'html': 190 return t.html(params); 191 } 192 } catch (c) { 193 } 194 } 195 196 return false; 197 }; 198 199 // @param: editorElem is the DOM element 200 var Trumbowyg = function (editorElem, options) { 201 var t = this, 202 trumbowygIconsId = 'trumbowyg-icons', 203 $trumbowyg = $.trumbowyg; 204 205 // Get the document of the element. It use to makes the plugin 206 // compatible on iframes. 207 t.doc = editorElem.ownerDocument || document; 208 209 // jQuery object of the editor 210 t.$ta = $(editorElem); // $ta : Textarea 211 t.$c = $(editorElem); // $c : creator 212 213 options = options || {}; 214 215 // Localization management 216 if (options.lang != null || $trumbowyg.langs[options.lang] != null) { 217 t.lang = $.extend(true, {}, $trumbowyg.langs.en, $trumbowyg.langs[options.lang]); 218 } else { 219 t.lang = $trumbowyg.langs.en; 220 } 221 222 t.hideButtonTexts = $trumbowyg.hideButtonTexts != null ? $trumbowyg.hideButtonTexts : options.hideButtonTexts; 223 224 // SVG path 225 var svgPathOption = $trumbowyg.svgPath != null ? $trumbowyg.svgPath : options.svgPath; 226 t.hasSvg = svgPathOption !== false; 227 t.svgPath = !!t.doc.querySelector('base') ? window.location.href.split('#')[0] : ''; 228 if ($('#' + trumbowygIconsId, t.doc).length === 0 && svgPathOption !== false) { 229 if (svgPathOption == null) { 230 // Hack to get svgPathOption based on trumbowyg.js path 231 var scriptElements = document.getElementsByTagName('script'); 232 for (var i = 0; i < scriptElements.length; i += 1) { 233 var source = scriptElements[i].src; 234 var matches = source.match('trumbowyg(\.min)?\.js'); 235 if (matches != null) { 236 svgPathOption = source.substring(0, source.indexOf(matches[0])) + 'ui/icons.svg'; 237 } 238 } 239 if (svgPathOption == null) { 240 console.warn('You must define svgPath: https://goo.gl/CfTY9U'); // jshint ignore:line 241 } 242 } 243 244 var div = t.doc.createElement('div'); 245 div.id = trumbowygIconsId; 246 t.doc.body.insertBefore(div, t.doc.body.childNodes[0]); 247 $.ajax({ 248 async: true, 249 type: 'GET', 250 contentType: 'application/x-www-form-urlencoded; charset=UTF-8', 251 dataType: 'xml', 252 crossDomain: true, 253 url: svgPathOption, 254 data: null, 255 beforeSend: null, 256 complete: null, 257 success: function (data) { 258 div.innerHTML = new XMLSerializer().serializeToString(data.documentElement); 259 } 260 }); 261 } 262 263 264 /** 265 * When the button is associated to a empty object 266 * fn and title attributs are defined from the button key value 267 * 268 * For example 269 * foo: {} 270 * is equivalent to : 271 * foo: { 272 * fn: 'foo', 273 * title: this.lang.foo 274 * } 275 */ 276 var h = t.lang.header, // Header translation 277 isBlinkFunction = function () { 278 return (window.chrome || (window.Intl && Intl.v8BreakIterator)) && 'CSS' in window; 279 }; 280 t.btnsDef = { 281 viewHTML: { 282 fn: 'toggle' 283 }, 284 285 undo: { 286 isSupported: isBlinkFunction, 287 key: 'Z' 288 }, 289 redo: { 290 isSupported: isBlinkFunction, 291 key: 'Y' 292 }, 293 294 p: { 295 fn: 'formatBlock' 296 }, 297 blockquote: { 298 fn: 'formatBlock' 299 }, 300 h1: { 301 fn: 'formatBlock', 302 title: h + ' 1' 303 }, 304 h2: { 305 fn: 'formatBlock', 306 title: h + ' 2' 307 }, 308 h3: { 309 fn: 'formatBlock', 310 title: h + ' 3' 311 }, 312 h4: { 313 fn: 'formatBlock', 314 title: h + ' 4' 315 }, 316 subscript: { 317 tag: 'sub' 318 }, 319 superscript: { 320 tag: 'sup' 321 }, 322 323 bold: { 324 key: 'B', 325 tag: 'b' 326 }, 327 italic: { 328 key: 'I', 329 tag: 'i' 330 }, 331 underline: { 332 tag: 'u' 333 }, 334 strikethrough: { 335 tag: 'strike' 336 }, 337 338 strong: { 339 fn: 'bold', 340 key: 'B' 341 }, 342 em: { 343 fn: 'italic', 344 key: 'I' 345 }, 346 del: { 347 fn: 'strikethrough' 348 }, 349 350 createLink: { 351 key: 'K', 352 tag: 'a' 353 }, 354 unlink: {}, 355 356 insertImage: {}, 357 358 justifyLeft: { 359 tag: 'left', 360 forceCss: true 361 }, 362 justifyCenter: { 363 tag: 'center', 364 forceCss: true 365 }, 366 justifyRight: { 367 tag: 'right', 368 forceCss: true 369 }, 370 justifyFull: { 371 tag: 'justify', 372 forceCss: true 373 }, 374 375 unorderedList: { 376 fn: 'insertUnorderedList', 377 tag: 'ul' 378 }, 379 orderedList: { 380 fn: 'insertOrderedList', 381 tag: 'ol' 382 }, 383 384 horizontalRule: { 385 fn: 'insertHorizontalRule' 386 }, 387 388 removeformat: {}, 389 390 fullscreen: { 391 class: 'trumbowyg-not-disable' 392 }, 393 close: { 394 fn: 'destroy', 395 class: 'trumbowyg-not-disable' 396 }, 397 398 // Dropdowns 399 formatting: { 400 dropdown: ['p', 'blockquote', 'h1', 'h2', 'h3', 'h4'], 401 ico: 'p' 402 }, 403 link: { 404 dropdown: ['createLink', 'unlink'] 405 } 406 }; 407 408 // Defaults Options 409 t.o = $.extend(true, {}, $trumbowyg.defaultOptions, options); 410 if (!t.o.hasOwnProperty('imgDblClickHandler')) { 411 t.o.imgDblClickHandler = t.getDefaultImgDblClickHandler(); 412 } 413 414 t.urlPrefix = t.setupUrlPrefix(); 415 416 t.disabled = t.o.disabled || (editorElem.nodeName === 'TEXTAREA' && editorElem.disabled); 417 418 if (options.btns) { 419 t.o.btns = options.btns; 420 } else if (!t.o.semantic) { 421 t.o.btns[3] = ['bold', 'italic', 'underline', 'strikethrough']; 422 } 423 424 $.each(t.o.btnsDef, function (btnName, btnDef) { 425 t.addBtnDef(btnName, btnDef); 426 }); 427 428 // put this here in the event it would be merged in with options 429 t.eventNamespace = 'trumbowyg-event'; 430 431 // Keyboard shortcuts are load in this array 432 t.keys = []; 433 434 // Tag to button dynamically hydrated 435 t.tagToButton = {}; 436 t.tagHandlers = []; 437 438 // Admit multiple paste handlers 439 t.pasteHandlers = [].concat(t.o.pasteHandlers); 440 441 // Check if browser is IE 442 t.isIE = (navigator.userAgent.indexOf('MSIE') !== -1 || navigator.appVersion.indexOf('Trident/') !== -1); 443 444 t.init(); 445 }; 446 447 Trumbowyg.prototype = { 448 DEFAULT_SEMANTIC_MAP: { 449 'b': 'strong', 450 'i': 'em', 451 's': 'del', 452 'strike': 'del', 453 'div': 'p' 454 }, 455 456 init: function () { 457 var t = this; 458 t.height = t.$ta.height(); 459 460 t.initPlugins(); 461 462 try { 463 // Disable image resize, try-catch for old IE 464 t.doc.execCommand('enableObjectResizing', false, false); 465 t.doc.execCommand('defaultParagraphSeparator', false, 'p'); 466 } catch (e) { 467 } 468 469 t.buildEditor(); 470 t.buildBtnPane(); 471 472 t.fixedBtnPaneEvents(); 473 474 t.buildOverlay(); 475 476 setTimeout(function () { 477 if (t.disabled) { 478 t.setDisabled(true); 479 } 480 t.$c.trigger('tbwinit'); 481 }); 482 }, 483 484 addBtnDef: function (btnName, btnDef) { 485 this.btnsDef[btnName] = btnDef; 486 }, 487 488 setupUrlPrefix: function () { 489 var protocol = this.o.urlProtocol; 490 if (!protocol) { 491 return; 492 } 493 494 if (typeof(protocol) !== 'string') { 495 return 'https://'; 496 } 497 return /:\/\/$/.test(protocol) ? protocol : protocol + '://'; 498 }, 499 500 buildEditor: function () { 501 var t = this, 502 prefix = t.o.prefix, 503 html = ''; 504 505 t.$box = $('<div/>', { 506 class: prefix + 'box ' + prefix + 'editor-visible ' + prefix + t.o.lang + ' trumbowyg' 507 }); 508 509 // $ta = Textarea 510 // $ed = Editor 511 t.isTextarea = t.$ta.is('textarea'); 512 if (t.isTextarea) { 513 html = t.$ta.val(); 514 t.$ed = $('<div/>'); 515 t.$box 516 .insertAfter(t.$ta) 517 .append(t.$ed, t.$ta); 518 } else { 519 t.$ed = t.$ta; 520 html = t.$ed.html(); 521 522 t.$ta = $('<textarea/>', { 523 name: t.$ta.attr('id'), 524 height: t.height 525 }).val(html); 526 527 t.$box 528 .insertAfter(t.$ed) 529 .append(t.$ta, t.$ed); 530 t.syncCode(); 531 } 532 533 t.$ta 534 .addClass(prefix + 'textarea') 535 .attr('tabindex', -1) 536 ; 537 538 t.$ed 539 .addClass(prefix + 'editor') 540 .attr({ 541 contenteditable: true, 542 dir: t.lang._dir || 'ltr' 543 }) 544 .html(html) 545 ; 546 547 if (t.o.tabindex) { 548 t.$ed.attr('tabindex', t.o.tabindex); 549 } 550 551 if (t.$c.is('[placeholder]')) { 552 t.$ed.attr('placeholder', t.$c.attr('placeholder')); 553 } 554 555 if (t.$c.is('[spellcheck]')) { 556 t.$ed.attr('spellcheck', t.$c.attr('spellcheck')); 557 } 558 559 if (t.o.resetCss) { 560 t.$ed.addClass(prefix + 'reset-css'); 561 } 562 563 if (!t.o.autogrow) { 564 t.$ta.add(t.$ed).css({ 565 height: t.height 566 }); 567 } 568 569 t.semanticCode(); 570 571 if (t.o.autogrowOnEnter) { 572 t.$ed.addClass(prefix + 'autogrow-on-enter'); 573 } 574 575 var ctrl = false, 576 composition = false, 577 debounceButtonPaneStatus, 578 updateEventName = 'keyup'; 579 580 t.$ed 581 .on('dblclick', 'img', t.o.imgDblClickHandler) 582 .on('keydown', function (e) { 583 if ((e.ctrlKey || e.metaKey) && !e.altKey) { 584 ctrl = true; 585 var key = t.keys[String.fromCharCode(e.which).toUpperCase()]; 586 587 try { 588 t.execCmd(key.fn, key.param); 589 return false; 590 } catch (c) { 591 } 592 } 593 }) 594 .on('compositionstart compositionupdate', function () { 595 composition = true; 596 }) 597 .on(updateEventName + ' compositionend', function (e) { 598 if (e.type === 'compositionend') { 599 composition = false; 600 } else if (composition) { 601 return; 602 } 603 604 var keyCode = e.which; 605 606 if (keyCode >= 37 && keyCode <= 40) { 607 return; 608 } 609 610 if ((e.ctrlKey || e.metaKey) && (keyCode === 89 || keyCode === 90)) { 611 t.$c.trigger('tbwchange'); 612 } else if (!ctrl && keyCode !== 17) { 613 var compositionEndIE = t.isIE ? e.type === 'compositionend' : true; 614 t.semanticCode(false, compositionEndIE && keyCode === 13); 615 t.$c.trigger('tbwchange'); 616 } else if (typeof e.which === 'undefined') { 617 t.semanticCode(false, false, true); 618 } 619 620 setTimeout(function () { 621 ctrl = false; 622 }, 50); 623 }) 624 .on('mouseup keydown keyup', function (e) { 625 if ((!e.ctrlKey && !e.metaKey) || e.altKey) { 626 setTimeout(function () { // "hold on" to the ctrl key for 50ms 627 ctrl = false; 628 }, 50); 629 } 630 clearTimeout(debounceButtonPaneStatus); 631 debounceButtonPaneStatus = setTimeout(function () { 632 t.updateButtonPaneStatus(); 633 }, 50); 634 }) 635 .on('focus blur', function (e) { 636 t.$c.trigger('tbw' + e.type); 637 if (e.type === 'blur') { 638 $('.' + prefix + 'active-button', t.$btnPane).removeClass(prefix + 'active-button ' + prefix + 'active'); 639 } 640 if (t.o.autogrowOnEnter) { 641 if (t.autogrowOnEnterDontClose) { 642 return; 643 } 644 if (e.type === 'focus') { 645 t.autogrowOnEnterWasFocused = true; 646 t.autogrowEditorOnEnter(); 647 } 648 else if (!t.o.autogrow) { 649 t.$ed.css({height: t.$ed.css('min-height')}); 650 t.$c.trigger('tbwresize'); 651 } 652 } 653 }) 654 .on('cut', function () { 655 setTimeout(function () { 656 t.semanticCode(false, true); 657 t.$c.trigger('tbwchange'); 658 }, 0); 659 }) 660 .on('paste', function (e) { 661 if (t.o.removeformatPasted) { 662 e.preventDefault(); 663 664 if (window.getSelection && window.getSelection().deleteFromDocument) { 665 window.getSelection().deleteFromDocument(); 666 } 667 668 try { 669 // IE 670 var text = window.clipboardData.getData('Text'); 671 672 try { 673 // <= IE10 674 t.doc.selection.createRange().pasteHTML(text); 675 } catch (c) { 676 // IE 11 677 t.doc.getSelection().getRangeAt(0).insertNode(t.doc.createTextNode(text)); 678 } 679 t.$c.trigger('tbwchange', e); 680 } catch (d) { 681 // Not IE 682 t.execCmd('insertText', (e.originalEvent || e).clipboardData.getData('text/plain')); 683 } 684 } 685 686 // Call pasteHandlers 687 $.each(t.pasteHandlers, function (i, pasteHandler) { 688 pasteHandler(e); 689 }); 690 691 setTimeout(function () { 692 t.semanticCode(false, true); 693 t.$c.trigger('tbwpaste', e); 694 }, 0); 695 }); 696 697 t.$ta 698 .on('keyup', function () { 699 t.$c.trigger('tbwchange'); 700 }) 701 .on('paste', function () { 702 setTimeout(function () { 703 t.$c.trigger('tbwchange'); 704 }, 0); 705 }); 706 707 t.$box.on('keydown', function (e) { 708 if (e.which === 27 && $('.' + prefix + 'modal-box', t.$box).length === 1) { 709 t.closeModal(); 710 return false; 711 } 712 }); 713 }, 714 715 //autogrow when entering logic 716 autogrowEditorOnEnter: function () { 717 var t = this; 718 t.$ed.removeClass('autogrow-on-enter'); 719 var oldHeight = t.$ed[0].clientHeight; 720 t.$ed.height('auto'); 721 var totalHeight = t.$ed[0].scrollHeight; 722 t.$ed.addClass('autogrow-on-enter'); 723 if (oldHeight !== totalHeight) { 724 t.$ed.height(oldHeight); 725 setTimeout(function () { 726 t.$ed.css({height: totalHeight}); 727 t.$c.trigger('tbwresize'); 728 }, 0); 729 } 730 }, 731 732 733 // Build button pane, use o.btns option 734 buildBtnPane: function () { 735 var t = this, 736 prefix = t.o.prefix; 737 738 var $btnPane = t.$btnPane = $('<div/>', { 739 class: prefix + 'button-pane' 740 }); 741 742 $.each(t.o.btns, function (i, btnGrp) { 743 if (!$.isArray(btnGrp)) { 744 btnGrp = [btnGrp]; 745 } 746 747 var $btnGroup = $('<div/>', { 748 class: prefix + 'button-group ' + ((btnGrp.indexOf('fullscreen') >= 0) ? prefix + 'right' : '') 749 }); 750 $.each(btnGrp, function (i, btn) { 751 try { // Prevent buildBtn error 752 if (t.isSupportedBtn(btn)) { // It's a supported button 753 $btnGroup.append(t.buildBtn(btn)); 754 } 755 } catch (c) { 756 } 757 }); 758 759 if ($btnGroup.html().trim().length > 0) { 760 $btnPane.append($btnGroup); 761 } 762 }); 763 764 t.$box.prepend($btnPane); 765 }, 766 767 768 // Build a button and his action 769 buildBtn: function (btnName) { // btnName is name of the button 770 var t = this, 771 prefix = t.o.prefix, 772 btn = t.btnsDef[btnName], 773 isDropdown = btn.dropdown, 774 hasIcon = btn.hasIcon != null ? btn.hasIcon : true, 775 textDef = t.lang[btnName] || btnName, 776 777 $btn = $('<button/>', { 778 type: 'button', 779 class: prefix + btnName + '-button ' + (btn.class || '') + (!hasIcon ? ' ' + prefix + 'textual-button' : ''), 780 html: t.hasSvg && hasIcon ? 781 '<svg><use xlink:href="' + t.svgPath + '#' + prefix + (btn.ico || btnName).replace(/([A-Z]+)/g, '-$1').toLowerCase() + '"/></svg>' : 782 t.hideButtonTexts ? '' : (btn.text || btn.title || t.lang[btnName] || btnName), 783 title: (btn.title || btn.text || textDef) + ((btn.key) ? ' (Ctrl + ' + btn.key + ')' : ''), 784 tabindex: -1, 785 mousedown: function () { 786 if (!isDropdown || $('.' + btnName + '-' + prefix + 'dropdown', t.$box).is(':hidden')) { 787 $('body', t.doc).trigger('mousedown'); 788 } 789 790 if ((t.$btnPane.hasClass(prefix + 'disable') || t.$box.hasClass(prefix + 'disabled')) && 791 !$(this).hasClass(prefix + 'active') && 792 !$(this).hasClass(prefix + 'not-disable')) { 793 return false; 794 } 795 796 t.execCmd((isDropdown ? 'dropdown' : false) || btn.fn || btnName, btn.param || btnName, btn.forceCss); 797 798 return false; 799 } 800 }); 801 802 if (isDropdown) { 803 $btn.addClass(prefix + 'open-dropdown'); 804 var dropdownPrefix = prefix + 'dropdown', 805 dropdownOptions = { // the dropdown 806 class: dropdownPrefix + '-' + btnName + ' ' + dropdownPrefix + ' ' + prefix + 'fixed-top' 807 }; 808 dropdownOptions['data-' + dropdownPrefix] = btnName; 809 var $dropdown = $('<div/>', dropdownOptions); 810 $.each(isDropdown, function (i, def) { 811 if (t.btnsDef[def] && t.isSupportedBtn(def)) { 812 $dropdown.append(t.buildSubBtn(def)); 813 } 814 }); 815 t.$box.append($dropdown.hide()); 816 } else if (btn.key) { 817 t.keys[btn.key] = { 818 fn: btn.fn || btnName, 819 param: btn.param || btnName 820 }; 821 } 822 823 if (!isDropdown) { 824 t.tagToButton[(btn.tag || btnName).toLowerCase()] = btnName; 825 } 826 827 return $btn; 828 }, 829 // Build a button for dropdown menu 830 // @param n : name of the subbutton 831 buildSubBtn: function (btnName) { 832 var t = this, 833 prefix = t.o.prefix, 834 btn = t.btnsDef[btnName], 835 hasIcon = btn.hasIcon != null ? btn.hasIcon : true; 836 837 if (btn.key) { 838 t.keys[btn.key] = { 839 fn: btn.fn || btnName, 840 param: btn.param || btnName 841 }; 842 } 843 844 t.tagToButton[(btn.tag || btnName).toLowerCase()] = btnName; 845 846 return $('<button/>', { 847 type: 'button', 848 class: prefix + btnName + '-dropdown-button' + (btn.ico ? ' ' + prefix + btn.ico + '-button' : ''), 849 html: t.hasSvg && hasIcon ? '<svg><use xlink:href="' + t.svgPath + '#' + prefix + (btn.ico || btnName).replace(/([A-Z]+)/g, '-$1').toLowerCase() + '"/></svg>' + (btn.text || btn.title || t.lang[btnName] || btnName) : (btn.text || btn.title || t.lang[btnName] || btnName), 850 title: ((btn.key) ? ' (Ctrl + ' + btn.key + ')' : null), 851 style: btn.style || null, 852 mousedown: function () { 853 $('body', t.doc).trigger('mousedown'); 854 855 t.execCmd(btn.fn || btnName, btn.param || btnName, btn.forceCss); 856 857 return false; 858 } 859 }); 860 }, 861 // Check if button is supported 862 isSupportedBtn: function (b) { 863 try { 864 return this.btnsDef[b].isSupported(); 865 } catch (c) { 866 } 867 return true; 868 }, 869 870 // Build overlay for modal box 871 buildOverlay: function () { 872 var t = this; 873 t.$overlay = $('<div/>', { 874 class: t.o.prefix + 'overlay' 875 }).appendTo(t.$box); 876 return t.$overlay; 877 }, 878 showOverlay: function () { 879 var t = this; 880 $(window).trigger('scroll'); 881 t.$overlay.fadeIn(200); 882 t.$box.addClass(t.o.prefix + 'box-blur'); 883 }, 884 hideOverlay: function () { 885 var t = this; 886 t.$overlay.fadeOut(50); 887 t.$box.removeClass(t.o.prefix + 'box-blur'); 888 }, 889 890 // Management of fixed button pane 891 fixedBtnPaneEvents: function () { 892 var t = this, 893 fixedFullWidth = t.o.fixedFullWidth, 894 $box = t.$box; 895 896 if (!t.o.fixedBtnPane) { 897 return; 898 } 899 900 t.isFixed = false; 901 902 $(window) 903 .on('scroll.' + t.eventNamespace + ' resize.' + t.eventNamespace, function () { 904 if (!$box) { 905 return; 906 } 907 908 t.syncCode(); 909 910 var scrollTop = $(window).scrollTop(), 911 offset = $box.offset().top + 1, 912 bp = t.$btnPane, 913 oh = bp.outerHeight() - 2; 914 915 if ((scrollTop - offset > 0) && ((scrollTop - offset - t.height) < 0)) { 916 if (!t.isFixed) { 917 t.isFixed = true; 918 bp.css({ 919 position: 'fixed', 920 top: 0, 921 left: fixedFullWidth ? '0' : 'auto', 922 zIndex: 7 923 }); 924 $([t.$ta, t.$ed]).css({marginTop: bp.height()}); 925 } 926 bp.css({ 927 width: fixedFullWidth ? '100%' : (($box.width() - 1) + 'px') 928 }); 929 930 $('.' + t.o.prefix + 'fixed-top', $box).css({ 931 position: fixedFullWidth ? 'fixed' : 'absolute', 932 top: fixedFullWidth ? oh : oh + (scrollTop - offset) + 'px', 933 zIndex: 15 934 }); 935 } else if (t.isFixed) { 936 t.isFixed = false; 937 bp.removeAttr('style'); 938 $([t.$ta, t.$ed]).css({marginTop: 0}); 939 $('.' + t.o.prefix + 'fixed-top', $box).css({ 940 position: 'absolute', 941 top: oh 942 }); 943 } 944 }); 945 }, 946 947 // Disable editor 948 setDisabled: function (disable) { 949 var t = this, 950 prefix = t.o.prefix; 951 952 t.disabled = disable; 953 954 if (disable) { 955 t.$ta.attr('disabled', true); 956 } else { 957 t.$ta.removeAttr('disabled'); 958 } 959 t.$box.toggleClass(prefix + 'disabled', disable); 960 t.$ed.attr('contenteditable', !disable); 961 }, 962 963 // Destroy the editor 964 destroy: function () { 965 var t = this, 966 prefix = t.o.prefix; 967 968 if (t.isTextarea) { 969 t.$box.after( 970 t.$ta 971 .css({height: ''}) 972 .val(t.html()) 973 .removeClass(prefix + 'textarea') 974 .show() 975 ); 976 } else { 977 t.$box.after( 978 t.$ed 979 .css({height: ''}) 980 .removeClass(prefix + 'editor') 981 .removeAttr('contenteditable') 982 .removeAttr('dir') 983 .html(t.html()) 984 .show() 985 ); 986 } 987 988 t.$ed.off('dblclick', 'img'); 989 990 t.destroyPlugins(); 991 992 t.$box.remove(); 993 t.$c.removeData('trumbowyg'); 994 $('body').removeClass(prefix + 'body-fullscreen'); 995 t.$c.trigger('tbwclose'); 996 $(window).off('scroll.' + t.eventNamespace + ' resize.' + t.eventNamespace); 997 }, 998 999 1000 // Empty the editor 1001 empty: function () { 1002 this.$ta.val(''); 1003 this.syncCode(true); 1004 }, 1005 1006 1007 // Function call when click on viewHTML button 1008 toggle: function () { 1009 var t = this, 1010 prefix = t.o.prefix; 1011 1012 if (t.o.autogrowOnEnter) { 1013 t.autogrowOnEnterDontClose = !t.$box.hasClass(prefix + 'editor-hidden'); 1014 } 1015 1016 t.semanticCode(false, true); 1017 1018 setTimeout(function () { 1019 t.doc.activeElement.blur(); 1020 t.$box.toggleClass(prefix + 'editor-hidden ' + prefix + 'editor-visible'); 1021 t.$btnPane.toggleClass(prefix + 'disable'); 1022 $('.' + prefix + 'viewHTML-button', t.$btnPane).toggleClass(prefix + 'active'); 1023 if (t.$box.hasClass(prefix + 'editor-visible')) { 1024 t.$ta.attr('tabindex', -1); 1025 } else { 1026 t.$ta.removeAttr('tabindex'); 1027 } 1028 1029 if (t.o.autogrowOnEnter && !t.autogrowOnEnterDontClose) { 1030 t.autogrowEditorOnEnter(); 1031 } 1032 }, 0); 1033 }, 1034 1035 // Open dropdown when click on a button which open that 1036 dropdown: function (name) { 1037 var t = this, 1038 d = t.doc, 1039 prefix = t.o.prefix, 1040 $dropdown = $('[data-' + prefix + 'dropdown=' + name + ']', t.$box), 1041 $btn = $('.' + prefix + name + '-button', t.$btnPane), 1042 show = $dropdown.is(':hidden'); 1043 1044 $('body', d).trigger('mousedown'); 1045 1046 if (show) { 1047 var o = $btn.offset().left; 1048 $btn.addClass(prefix + 'active'); 1049 1050 $dropdown.css({ 1051 position: 'absolute', 1052 top: $btn.offset().top - t.$btnPane.offset().top + $btn.outerHeight(), 1053 left: (t.o.fixedFullWidth && t.isFixed) ? o + 'px' : (o - t.$btnPane.offset().left) + 'px' 1054 }).show(); 1055 1056 $(window).trigger('scroll'); 1057 1058 $('body', d).on('mousedown.' + t.eventNamespace, function (e) { 1059 if (!$dropdown.is(e.target)) { 1060 $('.' + prefix + 'dropdown', t.$box).hide(); 1061 $('.' + prefix + 'active', t.$btnPane).removeClass(prefix + 'active'); 1062 $('body', d).off('mousedown.' + t.eventNamespace); 1063 } 1064 }); 1065 } 1066 }, 1067 1068 1069 // HTML Code management 1070 html: function (html) { 1071 var t = this; 1072 1073 if (html != null) { 1074 t.$ta.val(html); 1075 t.syncCode(true); 1076 t.$c.trigger('tbwchange'); 1077 return t; 1078 } 1079 1080 return t.$ta.val(); 1081 }, 1082 syncTextarea: function () { 1083 var t = this; 1084 t.$ta.val(t.$ed.text().trim().length > 0 || t.$ed.find('hr,img,embed,iframe,input').length > 0 ? t.$ed.html() : ''); 1085 }, 1086 syncCode: function (force) { 1087 var t = this; 1088 if (!force && t.$ed.is(':visible')) { 1089 t.syncTextarea(); 1090 } else { 1091 // wrap the content in a div it's easier to get the innerhtml 1092 var html = $('<div>').html(t.$ta.val()); 1093 //scrub the html before loading into the doc 1094 var safe = $('<div>').append(html); 1095 $(t.o.tagsToRemove.join(','), safe).remove(); 1096 t.$ed.html(safe.contents().html()); 1097 } 1098 1099 if (t.o.autogrow) { 1100 t.height = t.$ed.height(); 1101 if (t.height !== t.$ta.css('height')) { 1102 t.$ta.css({height: t.height}); 1103 t.$c.trigger('tbwresize'); 1104 } 1105 } 1106 if (t.o.autogrowOnEnter) { 1107 // t.autogrowEditorOnEnter(); 1108 t.$ed.height('auto'); 1109 var totalheight = t.autogrowOnEnterWasFocused ? t.$ed[0].scrollHeight : t.$ed.css('min-height'); 1110 if (totalheight !== t.$ta.css('height')) { 1111 t.$ed.css({height: totalheight}); 1112 t.$c.trigger('tbwresize'); 1113 } 1114 } 1115 }, 1116 1117 // Analyse and update to semantic code 1118 // @param force : force to sync code from textarea 1119 // @param full : wrap text nodes in <p> 1120 // @param keepRange : leave selection range as it is 1121 semanticCode: function (force, full, keepRange) { 1122 var t = this; 1123 t.saveRange(); 1124 t.syncCode(force); 1125 1126 if (t.o.semantic) { 1127 t.semanticTag('b'); 1128 t.semanticTag('i'); 1129 t.semanticTag('s'); 1130 t.semanticTag('strike'); 1131 1132 if (full) { 1133 var inlineElementsSelector = t.o.inlineElementsSelector, 1134 blockElementsSelector = ':not(' + inlineElementsSelector + ')'; 1135 1136 // Wrap text nodes in span for easier processing 1137 t.$ed.contents().filter(function () { 1138 return this.nodeType === 3 && this.nodeValue.trim().length > 0; 1139 }).wrap('<span data-tbw/>'); 1140 1141 // Wrap groups of inline elements in paragraphs (recursive) 1142 var wrapInlinesInParagraphsFrom = function ($from) { 1143 if ($from.length !== 0) { 1144 var $finalParagraph = $from.nextUntil(blockElementsSelector).addBack().wrapAll('<p/>').parent(), 1145 $nextElement = $finalParagraph.nextAll(inlineElementsSelector).first(); 1146 $finalParagraph.next('br').remove(); 1147 wrapInlinesInParagraphsFrom($nextElement); 1148 } 1149 }; 1150 wrapInlinesInParagraphsFrom(t.$ed.children(inlineElementsSelector).first()); 1151 1152 t.semanticTag('div', true); 1153 1154 // Unwrap paragraphs content, containing nothing usefull 1155 t.$ed.find('p').filter(function () { 1156 // Don't remove currently being edited element 1157 if (t.range && this === t.range.startContainer) { 1158 return false; 1159 } 1160 return $(this).text().trim().length === 0 && $(this).children().not('br,span').length === 0; 1161 }).contents().unwrap(); 1162 1163 // Get rid of temporial span's 1164 $('[data-tbw]', t.$ed).contents().unwrap(); 1165 1166 // Remove empty <p> 1167 t.$ed.find('p:empty').remove(); 1168 } 1169 1170 if (!keepRange) { 1171 t.restoreRange(); 1172 } 1173 1174 t.syncTextarea(); 1175 } 1176 }, 1177 1178 semanticTag: function (oldTag, copyAttributes) { 1179 var newTag; 1180 1181 if (this.o.semantic != null && typeof this.o.semantic === 'object' && this.o.semantic.hasOwnProperty(oldTag)) { 1182 newTag = this.o.semantic[oldTag]; 1183 } else if (this.o.semantic === true && this.DEFAULT_SEMANTIC_MAP.hasOwnProperty(oldTag)) { 1184 newTag = this.DEFAULT_SEMANTIC_MAP[oldTag]; 1185 } else { 1186 return; 1187 } 1188 1189 $(oldTag, this.$ed).each(function () { 1190 var $oldTag = $(this); 1191 $oldTag.wrap('<' + newTag + '/>'); 1192 if (copyAttributes) { 1193 $.each($oldTag.prop('attributes'), function () { 1194 $oldTag.parent().attr(this.name, this.value); 1195 }); 1196 } 1197 $oldTag.contents().unwrap(); 1198 }); 1199 }, 1200 1201 // Function call when user click on "Insert Link" 1202 createLink: function () { 1203 var t = this, 1204 documentSelection = t.doc.getSelection(), 1205 node = documentSelection.focusNode, 1206 text = new XMLSerializer().serializeToString(documentSelection.getRangeAt(0).cloneContents()), 1207 url, 1208 title, 1209 target; 1210 1211 while (['A', 'DIV'].indexOf(node.nodeName) < 0) { 1212 node = node.parentNode; 1213 } 1214 1215 if (node && node.nodeName === 'A') { 1216 var $a = $(node); 1217 text = $a.text(); 1218 url = $a.attr('href'); 1219 if (!t.o.minimalLinks) { 1220 title = $a.attr('title'); 1221 target = $a.attr('target'); 1222 } 1223 var range = t.doc.createRange(); 1224 range.selectNode(node); 1225 documentSelection.removeAllRanges(); 1226 documentSelection.addRange(range); 1227 } 1228 1229 t.saveRange(); 1230 1231 var options = { 1232 url: { 1233 label: 'URL', 1234 required: true, 1235 value: url 1236 }, 1237 text: { 1238 label: t.lang.text, 1239 value: text 1240 } 1241 }; 1242 if (!t.o.minimalLinks) { 1243 Object.assign(options, { 1244 title: { 1245 label: t.lang.title, 1246 value: title 1247 }, 1248 target: { 1249 label: t.lang.target, 1250 value: target 1251 } 1252 }); 1253 } 1254 1255 t.openModalInsert(t.lang.createLink, options, function (v) { // v is value 1256 var url = t.prependUrlPrefix(v.url); 1257 if (!url.length) { 1258 return false; 1259 } 1260 1261 var link = $(['<a href="', v.url, '">', v.text || v.url, '</a>'].join('')); 1262 1263 if (!t.o.minimalLinks) { 1264 if (v.title.length > 0) { 1265 link.attr('title', v.title); 1266 } 1267 if (v.target.length > 0) { 1268 link.attr('target', v.target); 1269 } 1270 } 1271 t.range.deleteContents(); 1272 t.range.insertNode(link[0]); 1273 t.syncCode(); 1274 t.$c.trigger('tbwchange'); 1275 return true; 1276 }); 1277 }, 1278 prependUrlPrefix: function (url) { 1279 var t = this; 1280 if (!t.urlPrefix) { 1281 return url; 1282 } 1283 1284 const VALID_LINK_PREFIX = /^([a-z][-+.a-z0-9]*:|\/|#)/i; 1285 if (VALID_LINK_PREFIX.test(url)) { 1286 return url; 1287 } 1288 1289 const SIMPLE_EMAIL_REGEX = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; 1290 if (SIMPLE_EMAIL_REGEX.test(url)) { 1291 return 'mailto:' + url; 1292 } 1293 1294 return t.urlPrefix + url; 1295 }, 1296 unlink: function () { 1297 var t = this, 1298 documentSelection = t.doc.getSelection(), 1299 node = documentSelection.focusNode; 1300 1301 if (documentSelection.isCollapsed) { 1302 while (['A', 'DIV'].indexOf(node.nodeName) < 0) { 1303 node = node.parentNode; 1304 } 1305 1306 if (node && node.nodeName === 'A') { 1307 var range = t.doc.createRange(); 1308 range.selectNode(node); 1309 documentSelection.removeAllRanges(); 1310 documentSelection.addRange(range); 1311 } 1312 } 1313 t.execCmd('unlink', undefined, undefined, true); 1314 }, 1315 insertImage: function () { 1316 var t = this; 1317 t.saveRange(); 1318 1319 var options = { 1320 url: { 1321 label: 'URL', 1322 required: true 1323 }, 1324 alt: { 1325 label: t.lang.description, 1326 value: t.getRangeText() 1327 } 1328 }; 1329 1330 if (t.o.imageWidthModalEdit) { 1331 options.width = {}; 1332 } 1333 1334 t.openModalInsert(t.lang.insertImage, options, function (v) { // v are values 1335 t.execCmd('insertImage', v.url); 1336 var $img = $('img[src="' + v.url + '"]:not([alt])', t.$box); 1337 $img.attr('alt', v.alt); 1338 1339 if (t.o.imageWidthModalEdit) { 1340 $img.attr({ 1341 width: v.width 1342 }); 1343 } 1344 1345 t.syncCode(); 1346 t.$c.trigger('tbwchange'); 1347 1348 return true; 1349 }); 1350 }, 1351 fullscreen: function () { 1352 var t = this, 1353 prefix = t.o.prefix, 1354 fullscreenCssClass = prefix + 'fullscreen', 1355 isFullscreen; 1356 1357 t.$box.toggleClass(fullscreenCssClass); 1358 isFullscreen = t.$box.hasClass(fullscreenCssClass); 1359 $('body').toggleClass(prefix + 'body-fullscreen', isFullscreen); 1360 $(window).trigger('scroll'); 1361 t.$c.trigger('tbw' + (isFullscreen ? 'open' : 'close') + 'fullscreen'); 1362 }, 1363 1364 1365 /* 1366 * Call method of trumbowyg if exist 1367 * else try to call anonymous function 1368 * and finaly native execCommand 1369 */ 1370 execCmd: function (cmd, param, forceCss, skipTrumbowyg) { 1371 var t = this; 1372 skipTrumbowyg = !!skipTrumbowyg || ''; 1373 1374 if (cmd !== 'dropdown') { 1375 t.$ed.focus(); 1376 } 1377 1378 try { 1379 t.doc.execCommand('styleWithCSS', false, forceCss || false); 1380 } catch (c) { 1381 } 1382 1383 try { 1384 t[cmd + skipTrumbowyg](param); 1385 } catch (c) { 1386 try { 1387 cmd(param); 1388 } catch (e2) { 1389 if (cmd === 'insertHorizontalRule') { 1390 param = undefined; 1391 } else if (cmd === 'formatBlock' && t.isIE) { 1392 param = '<' + param + '>'; 1393 } 1394 1395 t.doc.execCommand(cmd, false, param); 1396 1397 t.syncCode(); 1398 t.semanticCode(false, true); 1399 } 1400 1401 if (cmd !== 'dropdown') { 1402 t.updateButtonPaneStatus(); 1403 t.$c.trigger('tbwchange'); 1404 } 1405 } 1406 }, 1407 1408 1409 // Open a modal box 1410 openModal: function (title, content) { 1411 var t = this, 1412 prefix = t.o.prefix; 1413 1414 // No open a modal box when exist other modal box 1415 if ($('.' + prefix + 'modal-box', t.$box).length > 0) { 1416 return false; 1417 } 1418 if (t.o.autogrowOnEnter) { 1419 t.autogrowOnEnterDontClose = true; 1420 } 1421 1422 t.saveRange(); 1423 t.showOverlay(); 1424 1425 // Disable all btnPane btns 1426 t.$btnPane.addClass(prefix + 'disable'); 1427 1428 // Build out of ModalBox, it's the mask for animations 1429 var $modal = $('<div/>', { 1430 class: prefix + 'modal ' + prefix + 'fixed-top' 1431 }).css({ 1432 top: t.$btnPane.height() 1433 }).appendTo(t.$box); 1434 1435 // Click on overlay close modal by cancelling them 1436 t.$overlay.one('click', function () { 1437 $modal.trigger(CANCEL_EVENT); 1438 return false; 1439 }); 1440 1441 // Build the form 1442 var $form = $('<form/>', { 1443 action: '', 1444 html: content 1445 }) 1446 .on('submit', function () { 1447 $modal.trigger(CONFIRM_EVENT); 1448 return false; 1449 }) 1450 .on('reset', function () { 1451 $modal.trigger(CANCEL_EVENT); 1452 return false; 1453 }) 1454 .on('submit reset', function () { 1455 if (t.o.autogrowOnEnter) { 1456 t.autogrowOnEnterDontClose = false; 1457 } 1458 }); 1459 1460 1461 // Build ModalBox and animate to show them 1462 var $box = $('<div/>', { 1463 class: prefix + 'modal-box', 1464 html: $form 1465 }) 1466 .css({ 1467 top: '-' + t.$btnPane.outerHeight() + 'px', 1468 opacity: 0 1469 }) 1470 .appendTo($modal) 1471 .animate({ 1472 top: 0, 1473 opacity: 1 1474 }, 100); 1475 1476 1477 // Append title 1478 $('<span/>', { 1479 text: title, 1480 class: prefix + 'modal-title' 1481 }).prependTo($box); 1482 1483 $modal.height($box.outerHeight() + 10); 1484 1485 1486 // Focus in modal box 1487 $('input:first', $box).focus(); 1488 1489 1490 // Append Confirm and Cancel buttons 1491 t.buildModalBtn('submit', $box); 1492 t.buildModalBtn('reset', $box); 1493 1494 1495 $(window).trigger('scroll'); 1496 1497 return $modal; 1498 }, 1499 // @param n is name of modal 1500 buildModalBtn: function (n, $modal) { 1501 var t = this, 1502 prefix = t.o.prefix; 1503 1504 return $('<button/>', { 1505 class: prefix + 'modal-button ' + prefix + 'modal-' + n, 1506 type: n, 1507 text: t.lang[n] || n 1508 }).appendTo($('form', $modal)); 1509 }, 1510 // close current modal box 1511 closeModal: function () { 1512 var t = this, 1513 prefix = t.o.prefix; 1514 1515 t.$btnPane.removeClass(prefix + 'disable'); 1516 t.$overlay.off(); 1517 1518 // Find the modal box 1519 var $modalBox = $('.' + prefix + 'modal-box', t.$box); 1520 1521 $modalBox.animate({ 1522 top: '-' + $modalBox.height() 1523 }, 100, function () { 1524 $modalBox.parent().remove(); 1525 t.hideOverlay(); 1526 }); 1527 1528 t.restoreRange(); 1529 }, 1530 // Preformated build and management modal 1531 openModalInsert: function (title, fields, cmd) { 1532 var t = this, 1533 prefix = t.o.prefix, 1534 lg = t.lang, 1535 html = ''; 1536 1537 $.each(fields, function (fieldName, field) { 1538 var l = field.label || fieldName, 1539 n = field.name || fieldName, 1540 a = field.attributes || {}; 1541 1542 var attr = Object.keys(a).map(function (prop) { 1543 return prop + '="' + a[prop] + '"'; 1544 }).join(' '); 1545 1546 html += '<label><input type="' + (field.type || 'text') + '" name="' + n + '"' + 1547 (field.type === 'checkbox' && field.value ? ' checked="checked"' : ' value="' + (field.value || '').replace(/"/g, '"')) + 1548 '"' + attr + '><span class="' + prefix + 'input-infos"><span>' + 1549 (lg[l] ? lg[l] : l) + 1550 '</span></span></label>'; 1551 }); 1552 1553 return t.openModal(title, html) 1554 .on(CONFIRM_EVENT, function () { 1555 var $form = $('form', $(this)), 1556 valid = true, 1557 values = {}; 1558 1559 $.each(fields, function (fieldName, field) { 1560 var n = field.name || fieldName; 1561 1562 var $field = $('input[name="' + n + '"]', $form), 1563 inputType = $field.attr('type'); 1564 1565 switch (inputType.toLowerCase()) { 1566 case 'checkbox': 1567 values[n] = $field.is(':checked'); 1568 break; 1569 case 'radio': 1570 values[n] = $field.filter(':checked').val(); 1571 break; 1572 default: 1573 values[n] = $.trim($field.val()); 1574 break; 1575 } 1576 // Validate value 1577 if (field.required && values[n] === '') { 1578 valid = false; 1579 t.addErrorOnModalField($field, t.lang.required); 1580 } else if (field.pattern && !field.pattern.test(values[n])) { 1581 valid = false; 1582 t.addErrorOnModalField($field, field.patternError); 1583 } 1584 }); 1585 1586 if (valid) { 1587 t.restoreRange(); 1588 1589 if (cmd(values, fields)) { 1590 t.syncCode(); 1591 t.$c.trigger('tbwchange'); 1592 t.closeModal(); 1593 $(this).off(CONFIRM_EVENT); 1594 } 1595 } 1596 }) 1597 .one(CANCEL_EVENT, function () { 1598 $(this).off(CONFIRM_EVENT); 1599 t.closeModal(); 1600 }); 1601 }, 1602 addErrorOnModalField: function ($field, err) { 1603 var prefix = this.o.prefix, 1604 $label = $field.parent(); 1605 1606 $field 1607 .on('change keyup', function () { 1608 $label.removeClass(prefix + 'input-error'); 1609 }); 1610 1611 $label 1612 .addClass(prefix + 'input-error') 1613 .find('input+span') 1614 .append( 1615 $('<span/>', { 1616 class: prefix + 'msg-error', 1617 text: err 1618 }) 1619 ); 1620 }, 1621 1622 getDefaultImgDblClickHandler: function () { 1623 var t = this; 1624 1625 return function () { 1626 var $img = $(this), 1627 src = $img.attr('src'), 1628 base64 = '(Base64)'; 1629 1630 if (src.indexOf('data:image') === 0) { 1631 src = base64; 1632 } 1633 1634 var options = { 1635 url: { 1636 label: 'URL', 1637 value: src, 1638 required: true 1639 }, 1640 alt: { 1641 label: t.lang.description, 1642 value: $img.attr('alt') 1643 } 1644 }; 1645 1646 if (t.o.imageWidthModalEdit) { 1647 options.width = { 1648 value: $img.attr('width') ? $img.attr('width') : '' 1649 }; 1650 } 1651 1652 t.openModalInsert(t.lang.insertImage, options, function (v) { 1653 if (v.src !== base64) { 1654 $img.attr({ 1655 src: v.url 1656 }); 1657 } 1658 $img.attr({ 1659 alt: v.alt 1660 }); 1661 1662 if (t.o.imageWidthModalEdit) { 1663 if (parseInt(v.width) > 0) { 1664 $img.attr({ 1665 width: v.width 1666 }); 1667 } else { 1668 $img.removeAttr('width'); 1669 } 1670 } 1671 1672 return true; 1673 }); 1674 return false; 1675 }; 1676 }, 1677 1678 // Range management 1679 saveRange: function () { 1680 var t = this, 1681 documentSelection = t.doc.getSelection(); 1682 1683 t.range = null; 1684 1685 if (documentSelection.rangeCount) { 1686 var savedRange = t.range = documentSelection.getRangeAt(0), 1687 range = t.doc.createRange(), 1688 rangeStart; 1689 range.selectNodeContents(t.$ed[0]); 1690 range.setEnd(savedRange.startContainer, savedRange.startOffset); 1691 rangeStart = (range + '').length; 1692 t.metaRange = { 1693 start: rangeStart, 1694 end: rangeStart + (savedRange + '').length 1695 }; 1696 } 1697 }, 1698 restoreRange: function () { 1699 var t = this, 1700 metaRange = t.metaRange, 1701 savedRange = t.range, 1702 documentSelection = t.doc.getSelection(), 1703 range; 1704 1705 if (!savedRange) { 1706 return; 1707 } 1708 1709 if (metaRange && metaRange.start !== metaRange.end) { // Algorithm from http://jsfiddle.net/WeWy7/3/ 1710 var charIndex = 0, 1711 nodeStack = [t.$ed[0]], 1712 node, 1713 foundStart = false, 1714 stop = false; 1715 1716 range = t.doc.createRange(); 1717 1718 while (!stop && (node = nodeStack.pop())) { 1719 if (node.nodeType === 3) { 1720 var nextCharIndex = charIndex + node.length; 1721 if (!foundStart && metaRange.start >= charIndex && metaRange.start <= nextCharIndex) { 1722 range.setStart(node, metaRange.start - charIndex); 1723 foundStart = true; 1724 } 1725 if (foundStart && metaRange.end >= charIndex && metaRange.end <= nextCharIndex) { 1726 range.setEnd(node, metaRange.end - charIndex); 1727 stop = true; 1728 } 1729 charIndex = nextCharIndex; 1730 } else { 1731 var cn = node.childNodes, 1732 i = cn.length; 1733 1734 while (i > 0) { 1735 i -= 1; 1736 nodeStack.push(cn[i]); 1737 } 1738 } 1739 } 1740 } 1741 1742 documentSelection.removeAllRanges(); 1743 documentSelection.addRange(range || savedRange); 1744 }, 1745 getRangeText: function () { 1746 return this.range + ''; 1747 }, 1748 1749 updateButtonPaneStatus: function () { 1750 var t = this, 1751 prefix = t.o.prefix, 1752 tags = t.getTagsRecursive(t.doc.getSelection().focusNode), 1753 activeClasses = prefix + 'active-button ' + prefix + 'active'; 1754 1755 $('.' + prefix + 'active-button', t.$btnPane).removeClass(activeClasses); 1756 $.each(tags, function (i, tag) { 1757 var btnName = t.tagToButton[tag.toLowerCase()], 1758 $btn = $('.' + prefix + btnName + '-button', t.$btnPane); 1759 1760 if ($btn.length > 0) { 1761 $btn.addClass(activeClasses); 1762 } else { 1763 try { 1764 $btn = $('.' + prefix + 'dropdown .' + prefix + btnName + '-dropdown-button', t.$box); 1765 var dropdownBtnName = $btn.parent().data('dropdown'); 1766 $('.' + prefix + dropdownBtnName + '-button', t.$box).addClass(activeClasses); 1767 } catch (e) { 1768 } 1769 } 1770 }); 1771 }, 1772 getTagsRecursive: function (element, tags) { 1773 var t = this; 1774 tags = tags || (element && element.tagName ? [element.tagName] : []); 1775 1776 if (element && element.parentNode) { 1777 element = element.parentNode; 1778 } else { 1779 return tags; 1780 } 1781 1782 var tag = element.tagName; 1783 if (tag === 'DIV') { 1784 return tags; 1785 } 1786 if (tag === 'P' && element.style.textAlign !== '') { 1787 tags.push(element.style.textAlign); 1788 } 1789 1790 $.each(t.tagHandlers, function (i, tagHandler) { 1791 tags = tags.concat(tagHandler(element, t)); 1792 }); 1793 1794 tags.push(tag); 1795 1796 return t.getTagsRecursive(element, tags).filter(function (tag) { 1797 return tag != null; 1798 }); 1799 }, 1800 1801 // Plugins 1802 initPlugins: function () { 1803 var t = this; 1804 t.loadedPlugins = []; 1805 $.each($.trumbowyg.plugins, function (name, plugin) { 1806 if (!plugin.shouldInit || plugin.shouldInit(t)) { 1807 plugin.init(t); 1808 if (plugin.tagHandler) { 1809 t.tagHandlers.push(plugin.tagHandler); 1810 } 1811 t.loadedPlugins.push(plugin); 1812 } 1813 }); 1814 }, 1815 destroyPlugins: function () { 1816 $.each(this.loadedPlugins, function (i, plugin) { 1817 if (plugin.destroy) { 1818 plugin.destroy(); 1819 } 1820 }); 1821 } 1822 }; 1823 })(navigator, window, document, jQuery);
Downloadmodules/editor/trumbowyg/trumbowyg.js
History Tue, 28 Aug 2018 00:33:27 +0200 Jan Dankert Editoren für Markdown (SimpleMDE) und HTML (Trumbowyg) installiert.