<script src="./js/jquery.min.js"></script> <script> window.jQuery || document.write('<script src="js/jquery.min.js"><\/script>'); </script> <script src="./js/trumbowyg.min.js"></script> <script src="./js/polyfill.js"></script> <script> const editor = $('#wysiwgEditor'); (function addIndentation() { $.extend(true, $.trumbowyg, { plugins: { indent: { init: function (trumbowyg) { const def = { fn: function () { editor.trumbowyg('execCmd', {cmd: 'indent', param: null, forceCss: false}); }, title: name, hasIcon: false, text: '', }; trumbowyg.addBtnDef(name, def); }, }, outdent: { init: function (trumbowyg) { const def = { fn: function () { editor.trumbowyg('execCmd', {cmd: 'outdent', param: null, forceCss: false}); }, title: name, hasIcon: false, text: '', }; trumbowyg.addBtnDef(name, def); }, }, }, }); })(jQuery); (function addFontOptions() { const fontList = [ {name: 'Arial', family: 'Arial, Helvetica, sans-serif'}, {name: 'Arial Black', family: "'Arial Black', Gadget, sans-serif"}, {name: 'Comic Sans MS', family: "'Comic Sans MS', cursive, sans-serif"}, {name: 'Courier', family: "'Courier New', Courier, monospace"}, {name: 'Georgia', family: 'Georgia, serif'}, {name: 'Impact', family: 'Impact, Charcoal, sans-serif'}, {name: 'MS Sans Serif', family: 'sans-serif'}, {name: 'Tahoma', family: 'Tahoma, Geneva, sans-serif'}, {name: 'Times New Roman', family: "'Times New Roman', Times, serif"}, {name: 'Trebuchet', family: "'Trebuchet MS', Helvetica, sans-serif"}, {name: 'Verdana', family: 'Verdana, Geneva, sans-serif'}, {name: 'Western', family: 'Western, sans-serif'}, ]; $.extend(true, $.trumbowyg, { plugins: { fontfamily: { init: function (trumbowyg) { trumbowyg.addBtnDef('fontfamily', { dropdown: buildDropdown(trumbowyg), hasIcon: false, text: 'Font', }); }, }, }, }); function buildDropdown(trumbowyg) { const dropdown = []; fontList.forEach(function (font, index) { trumbowyg.addBtnDef('fontfamily_' + index, { fn: function () { editor.trumbowyg('execCmd', {cmd: 'fontName', param: font.name, forceCss: false}); }, hasIcon: false, text: '' + font.name + '', style: 'display: inline-block; max-width: 200px', }); dropdown.push('fontfamily_' + index); }); return dropdown; } })(jQuery); (function addFontSize() { $.extend(true, $.trumbowyg, { plugins: { fontsize: { init: function (trumbowyg) { trumbowyg.addBtnDef('fontsize', { dropdown: buildDropdown(trumbowyg), }); }, }, }, }); function buildDropdown(trumbowyg) { const dropdown = []; const sizes = ['x-small', 'small', 'medium', 'large', 'x-large']; $.each(sizes, function (index, size) { trumbowyg.addBtnDef('fontsize_' + size, { text: '' + size + '', hasIcon: false, fn: function () { trumbowyg.execCmd('fontSize', index + 1, true); }, }); dropdown.push('fontsize_' + size); }); const freeSizeButtonName = 'fontsize_custom'; const freeSizeBtnDef = { fn: function () { trumbowyg.openModalInsert( 'Custom', { size: { label: 'Font size', value: '48px', }, }, function (values) { const selectedText = trumbowyg.getRangeText(); if ($(trumbowyg.range.startContainer.parentElement).html() === selectedText) { $(trumbowyg.range.startContainer.parentElement).css('font-size', values.size); } else { trumbowyg.range.deleteContents(); const html = '' + selectedText + ''; const node = $(html)[0]; trumbowyg.range.insertNode(node); } trumbowyg.saveRange(); return true; }, ); }, text: 'Custom', hasIcon: false, }; trumbowyg.addBtnDef(freeSizeButtonName, freeSizeBtnDef); dropdown.push(freeSizeButtonName); return dropdown; } })(jQuery); (function addColorPicker() { const colorList = [ 'ffffff', '000000', 'eeece1', '1f497d', '4f81bd', 'c0504d', '9bbb59', '8064a2', '4bacc6', 'f79646', 'ffff00', 'f2f2f2', '7f7f7f', 'ddd9c3', 'c6d9f0', 'dbe5f1', 'f2dcdb', 'ebf1dd', 'e5e0ec', 'dbeef3', 'fdeada', 'fff2ca', 'd8d8d8', '595959', 'c4bd97', '8db3e2', 'b8cce4', 'e5b9b7', 'd7e3bc', 'ccc1d9', 'b7dde8', 'fbd5b5', 'ffe694', 'bfbfbf', '3f3f3f', '938953', '548dd4', '95b3d7', 'd99694', 'c3d69b', 'b2a2c7', 'b7dde8', 'fac08f', 'f2c314', 'a5a5a5', '262626', '494429', '17365d', '366092', '953734', '76923c', '5f497a', '92cddc', 'e36c09', 'c09100', '7f7f7f', '0c0c0c', '1d1b10', '0f243e', '244061', '632423', '4f6128', '3f3151', '31859b', '974806', '7f6000', ]; $.extend(true, $.trumbowyg, { plugins: { color: { init: function (trumbowyg) { trumbowyg.addBtnDef('foreColor', { dropdown: buildDropdown('foreColor', trumbowyg), text: 'Text color', }); trumbowyg.addBtnDef('backColor', { dropdown: buildDropdown('backColor', trumbowyg), text: 'Background color', }); }, }, }, }); function buildDropdown(fn, trumbowyg) { const dropdown = []; $.each(colorList, function (i, color) { const btn = fn + color; trumbowyg.addBtnDef(btn, { fn: fn, forceCss: true, param: '#' + color, text: ' ', style: 'background-color: #' + color + '; max-width: 20px; max-height: 20px; display: inline-block; margin-right: 1px', hasIcon: false, }); dropdown.push(btn); }); const removeColorButtonName = fn + 'Remove'; trumbowyg.addBtnDef(removeColorButtonName, { fn: 'removeFormat', param: fn, text: 'Remove', style: 'display: block; width: 200px; line-height: 20px; padding: 0 5px;', }); dropdown.push(removeColorButtonName); const freeColorButtonName = fn + 'Free'; trumbowyg.addBtnDef(freeColorButtonName, { fn: function () { trumbowyg.openModalInsert( 'Colors', { color: { label: fn, forceCss: true, type: 'color', value: '#FFFFFF', }, }, function (values) { trumbowyg.execCmd(fn, values.color); return true; }, ); }, text: 'Select custom', style: 'display: inline-block; width: 200px; text-indent: 0;line-height: 20px; padding: 0 5px;', }); dropdown.push(freeColorButtonName); return dropdown; } })(jQuery); editor.trumbowyg({ svgPath: './images/icons.svg', autogrow: true, resetCss: false, semantic: false, removeformatPasted: false, tagsToRemove: ['script'], btns: [ ['colors'], ['color'], ['foreColor', 'backColor'], ['fontfamily', 'fontsize'], ['strong', 'em', 'underline'], ['formatting'], ['viewHTML'], ['superscript', 'subscript'], ['link'], ['justifyLeft', 'justifyCenter', 'justifyRight', 'justifyFull'], ['outdent', 'indent'], ['unorderedList', 'orderedList'], ['horizontalRule'], ['removeformat'], ['tags'], ], btnsDef: { tags: { dropdown: ['name', 'description', 'image', 'gallery', 'price'], title: 'Tags', hasIcon: false, }, name: { fn: function () { editor.trumbowyg('execCmd', { cmd: 'insertText', param: '{{item-name}}', forceCss: false, }); }, title: 'name', text: 'name', hasIcon: false, }, description: { fn: function () { editor.trumbowyg('execCmd', { cmd: 'insertText', param: '{{item-description}}', forceCss: false, }); }, title: 'description', text: 'description', hasIcon: false, }, image: { fn: function () { editor.trumbowyg('execCmd', { cmd: 'insertText', param: '{{item-image}}', forceCss: false, }); }, title: 'image', text: 'image', hasIcon: false, }, gallery: { fn: function () { editor.trumbowyg('execCmd', { cmd: 'insertText', param: '{{gallery}}', forceCss: false, }); }, title: 'gallery', text: 'gallery', hasIcon: false, }, price: { fn: function () { editor.trumbowyg('execCmd', { cmd: 'insertText', param: '{{item-price}}', forceCss: false, }); }, title: 'price', text: 'price', hasIcon: false, }, }, }); editor.on('tbwchange', function () { sendIframeChange(); }); editor.on('tbwpaste', function () { sendIframeChange(); }); function sendIframeChange() { const event = new CustomEvent('iframeChange', { detail: editor.trumbowyg('html'), }); document.dispatchEvent(event); } $(document).on('dataLoad', function (dataEvent) { if (dataEvent.originalEvent && dataEvent.originalEvent.detail.length) { if (dataEvent.originalEvent.detail !== editor.trumbowyg('html')) { editor.trumbowyg('html', dataEvent.originalEvent.detail); } } else { editor.trumbowyg('empty'); } }); </script>