/** You can use "dialog" and "component", "fileManager", "resizing" modules */ /** An example of using the module can be seen in the 4.dialog sample. */ // import dialog from '/src/plugins/modules/[dialog, resizing]'; // <script src="https://cdn.jsdelivr.net/npm/suneditor@latest/src/plugins/modules/[dialog, resizing].js"></script> // SUNEDITOR_MODULES['dialog', 'resizing'] /** ----------------------------------------------------------------------- */ /** These are the free icon sites you can use */ // --svg // https://icons8.com/ // https://icon-icons.com // https://materialdesignicons.com // https://material.io/resources/icons/?style=baseline // https://www.freepik.com/ // --icon class // https://fontawesome.com/, https://www.jsdelivr.com/package/npm/@fortawesome/fontawesome-free // <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.8.2/css/all.min.css"> /** ----------------------------------------------------------------------- */ // Define custom plugin // Common properties var customPlugin = { // @Required @Unique name: 'custom_example', // @Required display: ('container' || 'command' || 'submenu' || 'dialog'), // @options // * You can also set from the button list // HTML title attribute (tooltip) - default: plugin's name title: 'Custom tooltip', // HTML to be append to button (icon) // Recommend using the inline svg icon. - default: "<span class="se-icon-text">!</span>" innerHTML: '<svg />, <i class="" />, <span class="se-icon-text">C</span>', // The class of the button. - default: "se-btn" // "se-code-view-enabled": It is not disable when on code view mode. // "se-resizing-enabled": It is not disable when on using resizing module. buttonClass: '', // @Required add: (core, targetElement) { // How to set language when setting button properties of plugin directly in plugin const titleList = { en: 'Custom', ko: '사용자 정의', } this.title = titleList[core.lang.code] }, ... } SUNEDITOR.create(document.getElementById('ex_custom'), { // ------ When using CDN plugins: [customPlugin], // ------ When using node.js plugins: [custom_container, plugins.blockquote, plugins.link], // --- all plguins plugins: { ...plugins, custom_container }, // ------ Add button list // --- Add the name of the plugin to the button list. // --- Button settings use the contents defined in the plugin. buttonList: [ [ 'custom_example' ] ] // --- You can set the button's properties directly. buttonList: [ [ { // plugin's name attribute // It must be the same as the name attribute of the plugin  name: 'custom_example', // Enter the "display" attribute value of your custom plugin. dataDisplay: ('container' || 'command' || 'submenu' || 'dialog'), // @options // HTML title attribute title: 'Custom plugin', // button's class ("se-btn" class is registered, basic button click css is applied.) buttonClass:'', // ------ HTML to be append to button // --- Inline svg (The default size of the svg file is 16px.(suneditor.css:54L)) innerHTML:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" style="width:24px;height:24px;"><path d="M6 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm12 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm-6 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/></svg>' // --- Icon class (This icon uses Font Awesome) innerHTML:'<i class="fas fa-font"></i>' } ] ] })

// ex) Adds a container of type "submenu" that contains a plugin. var custom_container = { // @Required @Unique // plugin name name: 'custom_container', // @Required // data display display: 'container', // @Required // add function - It is called only once when the plugin is first run. // This function generates HTML to append and register the event. // arguments - (core : core object, targetElement : clicked button element) add: function (core, targetElement) { // @Required // Registering a namespace for caching as a plugin name in the context object const context = core.context; context.custom_container = {}; // Generate submenu HTML // Always bind "core" when calling a plugin function let listDiv = this.setSubmenu(core); // You must bind "core" object when registering an event. /** add event listeners */ listDiv.querySelector('.se-form-group').addEventListener('click', this.onClick.bind(core)); // @Required // You must add the "submenu" element using the "core.initMenuTarget" method. /** append target button menu */ core.initMenuTarget(this.name, targetElement, listDiv); }, setSubmenu: function (core) { const listDiv = core.util.createElement('DIV'); const icons = core.icons; // assets/defaultIcons.js listDiv.className = 'se-menu-container se-submenu se-list-layer'; listDiv.innerHTML = '' + '<div class="se-list-inner">' + '<div class="se-form-group">' + // @Required // The "position" style of each element surrounding the button must be "relative". // suneditor.css: .sun-editor .se-form-group > div {position:relative;} '<div>' + // @Required // Enter the button name of the plug-in or default command in the button's "data-command" '<button type="button" class="se-btn se-tooltip" data-command="bold" style="margin: 0 !important;">' + icons.bold + '<span class="se-tooltip-inner">' + '<span class="se-tooltip-text">Quote</span>' + '</span>' + '</button>' + '</div>' + '<div>' + '<button type="button" class="se-btn se-tooltip" data-command="blockquote">' + icons.blockquote + '<span class="se-tooltip-inner">' + '<span class="se-tooltip-text">Quote</span>' + '</span>' + '</button>' + '</div>' + '<div>' + '<button type="button" class="se-btn se-tooltip" data-command="link">' + icons.link + '<span class="se-tooltip-inner">' + '<span class="se-tooltip-text">Link</span>' + '</span>' + '</button>' + '</div>' + '<div>' + '<button type="button" class="se-btn se-tooltip" data-command="table">' + icons.table + '<span class="se-tooltip-inner">' + '<span class="se-tooltip-text">Table</span>' + '</span>' + '</button>' + '</div>' + '<div>' + '<button type="button" class="se-btn se-tooltip" data-command="textStyle">' + icons.text_style + '<span class="se-tooltip-inner">' + '<span class="se-tooltip-text">Text style</span>' + '</span>' + '</button>' + '</div>' + '</div>' + '</div>'; return listDiv; }, onClick: function (e) { e.preventDefault(); e.stopPropagation(); let target = e.target; let command = ''; while (!command && !/^UL$/i.test(target.tagName)) { command = target.getAttribute('data-command'); if (command) break; target = target.parentNode; } if (!command) return; const plugin = this.plugins[command]; this.actionCall(command, (plugin ? plugin.display : ''), target); } };

SUNEDITOR.create(document.getElementById('ex_container'), { plugins: [custom_container], buttonList: [ [ { name: 'custom_container', dataDisplay:'container', title:'custom_container', buttonClass:'', innerHTML:'<svg viewBox="0 0 24 24" style="width:24px;height:24px;"><path fill="currentColor" d="M6 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm12 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm-6 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" /></svg>' } ] ] });

// ex) A command plugin to add "Range format element(util.isRangeFormatElement)" to selection var plugin_command = { // @Required @Unique // plugin name name: 'customCommand', // @Required // data display display: 'command', // @Options title: 'Add range tag', buttonClass: '', innerHTML: '<i class="fas fa-carrot"></i>', // @Required // add function - It is called only once when the plugin is first run. // This function generates HTML to append and register the event. // arguments - (core : core object, targetElement : clicked button element) add: function (core, targetElement) { const context = core.context; const rangeTag = core.util.createElement('div'); core.util.addClass(rangeTag, '__se__format__range_custom'); // @Required // Registering a namespace for caching as a plugin name in the context object context.customCommand = { targetButton: targetElement, tag: rangeTag }; }, // @Override core // Plugins with active methods load immediately when the editor loads. // Called each time the selection is moved. active: function (element) { if (!element) { this.util.removeClass(this.context.customCommand.targetButton, 'active'); } else if (this.util.hasClass(element, '__se__format__range_custom')) { this.util.addClass(this.context.customCommand.targetButton, 'active'); return true; } return false; }, // @Required, @Override core // The behavior of the "command plugin" must be defined in the "action" method. action: function () { const rangeTag = this.util.getRangeFormatElement(this.getSelectionNode()); if (this.util.hasClass(rangeTag, '__se__format__range_custom')) { this.detachRangeFormatElement(rangeTag, null, null, false, false); } else { this.applyRangeFormatElement(this.context.customCommand.tag.cloneNode(false)); } } }

// ex) A command plugin to add "text node" to selection var plugin_command_2 = { name: 'customCommand_2', display: 'command', title:'Text node change', buttonClass:'', // This icon uses Font Awesome innerHTML:'<i class="fas fa-font"></i>', add: function (core, targetElement) { const context = core.context; context.customCommand_2 = { targetButton: targetElement }; }, active: function (element) { if (!element) { this.util.removeClass(this.context.customCommand_2.targetButton, 'active'); } else if (/^mark$/i.test(element.nodeName) && element.style.backgroundColor.length > 0) { this.util.addClass(this.context.customCommand_2.targetButton, 'active'); return true; } return false; }, action: function () { if (!this.util.hasClass(this.context.customCommand_2.targetButton, 'active')) { const newNode = this.util.createElement('MARK'); newNode.style.backgroundColor = 'hsl(60,75%,60%)'; this.nodeChange(newNode, ['background-color'], null, null); } else { this.nodeChange(null, ['background-color'], ['mark'], true); } } }

SUNEDITOR.create(document.getElementById('ex_command'), { plugins: [plugin_command, plugin_command_2], buttonList: [ ['customCommand', 'customCommand_2'] ] });

// ex) A submenu plugin that appends the contents of the input element to the editor var plugin_submenu = { // @Required @Unique // plugin name name: 'custom_plugin_submenu', // @Required // data display display: 'submenu', // @Options title: 'Custom plugin of the submenu', buttonClass: '', innerHTML: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M6 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm12 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm-6 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/></svg>', // @Required // add function - It is called only once when the plugin is first run. // This function generates HTML to append and register the event. // arguments - (core : core object, targetElement : clicked button element) add: function (core, targetElement) { // @Required // Registering a namespace for caching as a plugin name in the context object const context = core.context; context.customSubmenu = { targetButton: targetElement, textElement: null, currentSpan: null }; // Generate submenu HTML // Always bind "core" when calling a plugin function let listDiv = this.setSubmenu(core); // Input tag caching context.customSubmenu.textElement = listDiv.querySelector('input'); // You must bind "core" object when registering an event. /** add event listeners */ listDiv.querySelector('.se-btn-primary').addEventListener('click', this.onClick.bind(core)); listDiv.querySelector('.se-btn').addEventListener('click', this.onClickRemove.bind(core)); // @Required // You must add the "submenu" element using the "core.initMenuTarget" method. /** append target button menu */ core.initMenuTarget(this.name, targetElement, listDiv); }, setSubmenu: function (core) { const listDiv = core.util.createElement('DIV'); // @Required // A "se-submenu" class is required for the top level element. listDiv.className = 'se-menu-container se-submenu se-list-layer'; listDiv.innerHTML = '' + '<div class="se-list-inner">' + '<ul class="se-list-basic" style="width: 230px;">' + '<li>' + '<div class="se-form-group">' + '<input class="se-input-form" type="text" placeholder="insert text" style="border: 1px solid #CCC;" />' + '<button type="button" class="se-btn-primary se-tooltip">' + '<strong>OK</strong>' + '<span class="se-tooltip-inner">' + '<span class="se-tooltip-text">Append span</span>' + '</span>' + '</button>' + '<button type="button" class="se-btn se-tooltip">' + '<strong>X</strong>' + '<span class="se-tooltip-inner">' + '<span class="se-tooltip-text">Remove</span>' + '</span>' + '</button>' + '</div>' + '</li>' + '</ul>' + '</div>'; return listDiv; }, // @Override core // Plugins with active methods load immediately when the editor loads. // Called each time the selection is moved. active: function (element) { // If no tag matches, the "element" argument is called with a null value. if (!element) { this.util.removeClass(this.context.customSubmenu.targetButton, 'active'); this.context.customSubmenu.textElement.value = ''; this.context.customSubmenu.currentSpan = null; } else if (this.util.hasClass(element, 'se-custom-tag')) { this.util.addClass(this.context.customSubmenu.targetButton, 'active'); this.context.customSubmenu.textElement.value = element.textContent; this.context.customSubmenu.currentSpan = element; return true; } return false; }, // @Override submenu // Called after the submenu has been rendered on: function () { this.context.customSubmenu.textElement.focus(); }, onClickRemove: function () { const span = this.context.customSubmenu.currentSpan; if (span) { this.util.removeItem(span); this.context.customSubmenu.currentSpan = null; this.submenuOff(); this.focus(); } }, onClick: function () { const value = this.context.customSubmenu.textElement.value.trim(); if (!value) return; const span = this.context.customSubmenu.currentSpan; if (span) { span.textContent = value; this.setRange(span, 1, span, 1); } else { this.functions.insertHTML('<span class="se-custom-tag">' + value + '</span>', true); this.context.customSubmenu.textElement.value = ''; } this.submenuOff(); } };

SUNEDITOR.create(document.getElementById('ex_submenu'), { plugins: [plugin_submenu], buttonList: [ ['custom_plugin_submenu',] ] });

// Import "dialog" module // import dialog from '../../src/plugins/modules/dialog'; <script src="https://cdn.jsdelivr.net/npm/suneditor@latest/src/plugins/modules/dialog.js"></script> // ex) ex) A link dialog plugin with multiple target options. var plugin_dialog = { // @Required // plugin name name: 'customLink', // @Required // data display display: 'dialog', // @Required // add function - It is called only once when the plugin is first run. // This function generates HTML to append and register the event. // arguments - (core : core object, targetElement : clicked button element) add: function (core) { // If you are using a module, you must register the module using the "addModule" method. core.addModule([SUNEDITOR_MODULES.dialog]); // @Required // Registering a namespace for caching as a plugin name in the context object const context = core.context; context.customLink = { focusElement: null, // @Override // This element has focus when the dialog is opened. targetSelect: null, linkAnchorText: null, _linkAnchor: null }; /** link dialog */ let link_dialog = this.setDialog(core); context.customLink.modal = link_dialog; context.customLink.focusElement = link_dialog.querySelector('._se_link_url'); context.customLink.linkAnchorText = link_dialog.querySelector('._se_link_text'); context.customLink.targetSelect = link_dialog.querySelector('.se-input-select'); /** link controller */ let link_controller = this.setController_LinkButton(core); context.customLink.linkController = link_controller; context.customLink._linkAnchor = null; /** add event listeners */ link_dialog.querySelector('form').addEventListener('submit', this.submit.bind(core)); link_controller.addEventListener('click', this.onClick_linkController.bind(core)); /** append html */ context.dialog.modal.appendChild(link_dialog); /** append controller */ context.element.relative.appendChild(link_controller); /** empty memory */ link_dialog = null, link_controller = null; }, /** dialog */ setDialog: function (core) { const lang = core.lang; const dialog = core.util.createElement('DIV'); const targetList = [ { target: '_blank', name: 'New window'}, { target: '_parent', name: 'Parent frame'}, { target: '_top', name: 'First frame', selected: true}, { target: 'AnyFrame', name: 'Frame name'}, { target: '_dialog', name: 'Self defined dialog'} ]; dialog.className = 'se-dialog-content'; dialog.style.display = 'none'; let html = '' + '<form class="editor_link">' + '<div class="se-dialog-header">' + '<button type="button" data-command="close" class="se-btn se-dialog-close" aria-label="Close" title="' + lang.dialogBox.close + '">' + core.icons.cancel + '</button>' + '<span class="se-modal-title">' + lang.dialogBox.linkBox.title + '</span>' + '</div>' + '<div class="se-dialog-body">' + '<div class="se-dialog-form">' + '<label>' + lang.dialogBox.linkBox.url + '</label>' + '<input class="se-input-form _se_link_url" type="text" />' + '</div>' + '<div class="se-dialog-form">' + '<label>' + lang.dialogBox.linkBox.text + '</label><input class="se-input-form _se_link_text" type="text" />' + '</div>' + '<div class="se-dialog-form se-dialog-form-footer">' + '<select class="se-input-select" title="links">'; for (let i = 0, len = targetList.length, t, selected; i < len; i++) { t = targetList[i]; selected = t.selected ? ' selected' : ''; html += '<option value="' + t.target + '"' + selected + '>' + t.name + '</option>'; } html += '</select>' + '</div>' + '</div>' + '<div class="se-dialog-footer">' + '<button type="submit" class="se-btn-primary" title="' + lang.dialogBox.submitButton + '"><span>' + lang.dialogBox.submitButton + '</span></button>' + '</div>' + '</form>'; dialog.innerHTML = html; return dialog; }, /** modify controller button */ setController_LinkButton: function (core) { const lang = core.lang; const icons = core.icons; const link_btn = core.util.createElement('DIV'); link_btn.className = 'se-controller se-controller-link'; link_btn.innerHTML = '' + '<div class="se-arrow se-arrow-up"></div>' + '<div class="link-content"><span><a target="_blank" href=""></a>&nbsp;</span>' + '<div class="se-btn-group">' + '<button type="button" data-command="update" tabindex="-1" class="se-tooltip">' + icons.edit + '<span class="se-tooltip-inner"><span class="se-tooltip-text">' + lang.controller.edit + '</span></span>' + '</button>' + '<button type="button" data-command="unlink" tabindex="-1" class="se-tooltip">' + icons.unlink + '<span class="se-tooltip-inner"><span class="se-tooltip-text">' + lang.controller.unlink + '</span></span>' + '</button>' + '<button type="button" data-command="delete" tabindex="-1" class="se-tooltip">' + icons.delete + '<span class="se-tooltip-inner"><span class="se-tooltip-text">' + lang.controller.remove + '</span></span>' + '</button>' + '</div>' + '</div>'; return link_btn; }, // @Required, @Override dialog // This method is called when the plugin button is clicked. // Open the modal window here. open: function () { // open.call(core, pluginName, isModify) this.plugins.dialog.open.call(this, 'customLink', 'customLink' === this.currentControllerName); }, submit: function (e) { this.showLoading(); e.preventDefault(); e.stopPropagation(); const submitAction = function () { if (this.context.customLink.focusElement.value.trim().length === 0) return false; const contextLink = this.context.customLink; const url = contextLink.focusElement.value; const anchor = contextLink.linkAnchorText; const anchorText = anchor.value.length === 0 ? url : anchor.value; // When opened for modification "this.context.dialog.updateModal" is true if (!this.context.dialog.updateModal) { const oA = this.util.createElement('A'); oA.href = url; oA.textContent = anchorText; oA.target = contextLink.targetSelect.selectedOptions[0].value; const selectedFormats = this.getSelectedElements(); if (selectedFormats.length > 1) { const oFormat = this.util.createElement(selectedFormats[0].nodeName); oFormat.appendChild(oA); this.insertNode(oFormat); } else { this.insertNode(oA); } this.setRange(oA.childNodes[0], 0, oA.childNodes[0], oA.textContent.length); } else { contextLink._linkAnchor.href = url; contextLink._linkAnchor.textContent = anchorText; contextLink._linkAnchor.target = contextLink.targetSelect.selectedOptions[0].value; // set range this.setRange(contextLink._linkAnchor.childNodes[0], 0, contextLink._linkAnchor.childNodes[0], contextLink._linkAnchor.textContent.length); } // history stack this.history.push(false); contextLink.focusElement.value = ''; contextLink.linkAnchorText.value = ''; }.bind(this); try { submitAction(); } finally { this.plugins.dialog.close.call(this); this.closeLoading(); this.focus(); } return false; }, // @Override core // Plugins with active methods load immediately when the editor loads. // Called each time the selection is moved. active: function (element) { if (!element) { if (this.controllerArray.indexOf(this.context.customLink.linkController) > -1) { this.controllersOff(); } } else if (this.util.isAnchor(element) && element.getAttribute('data-image-link') === null) { if (this.controllerArray.indexOf(this.context.customLink.linkController) < 0) { this.plugins.customLink.call_controller.call(this, element); } return true; } return false; }, // @Override dialog // This method is called just before the dialog opens. // If "update" argument is true, it is not a new call, but a call to modify an already created element. on: function (update) { if (!update) { this.plugins.customLink.init.call(this); this.context.customLink.linkAnchorText.value = this.getSelection().toString(); } else if (this.context.customLink._linkAnchor) { // "update" and "this.context.dialog.updateModal" are always the same value. // This code is an exception to the "link" plugin. this.context.dialog.updateModal = true; this.context.customLink.focusElement.value = this.context.customLink._linkAnchor.href; this.context.customLink.linkAnchorText.value = this.context.customLink._linkAnchor.textContent; this.context.customLink.targetSelect.value = this.context.customLink._linkAnchor.target || ''; } }, call_controller: function (selectionATag) { this.editLink = this.context.customLink._linkAnchor = selectionATag; const linkBtn = this.context.customLink.linkController; const link = linkBtn.querySelector('a'); link.href = selectionATag.href; link.title = selectionATag.textContent; link.textContent = selectionATag.textContent; const offset = this.util.getOffset(selectionATag, this.context.element.wysiwygFrame); linkBtn.style.top = (offset.top + selectionATag.offsetHeight + 10) + 'px'; linkBtn.style.left = (offset.left - this.context.element.wysiwygFrame.scrollLeft) + 'px'; linkBtn.style.display = 'block'; const overLeft = this.context.element.wysiwygFrame.offsetWidth - (linkBtn.offsetLeft + linkBtn.offsetWidth); if (overLeft < 0) { linkBtn.style.left = (linkBtn.offsetLeft + overLeft) + 'px'; linkBtn.firstElementChild.style.left = (20 - overLeft) + 'px'; } else { linkBtn.firstElementChild.style.left = '20px'; } // Show controller at editor area (controller elements, function, "controller target element(@Required)", "controller name(@Required)", etc..) this.controllersOn(linkBtn, selectionATag, 'customLink'); }, onClick_linkController: function (e) { e.stopPropagation(); const command = e.target.getAttribute('data-command'); if (!command) return; e.preventDefault(); if (/update/.test(command)) { const contextLink = this.context.customLink; contextLink.focusElement.value = contextLink._linkAnchor.href; contextLink.linkAnchorText.value = contextLink._linkAnchor.textContent; contextLink.targetSelect.value = contextLink.targetSelect.value; this.plugins.dialog.open.call(this, 'customLink', true); } else if (/unlink/.test(command)) { const sc = this.util.getChildElement(this.context.customLink._linkAnchor, function (current) { return current.childNodes.length === 0 || current.nodeType === 3; }, false); const ec = this.util.getChildElement(this.context.customLink._linkAnchor, function (current) { return current.childNodes.length === 0 || current.nodeType === 3; }, true); this.setRange(sc, 0, ec, ec.textContent.length); this.nodeChange(null, null, ['A'], false); } else { /** delete */ this.util.removeItem(this.context.customLink._linkAnchor); this.context.customLink._linkAnchor = null; this.focus(); // history stack this.history.push(false); } this.controllersOff(); }, // @Required, @Override dialog // This method is called when the dialog window is closed. // Initialize the properties. init: function () { const contextLink = this.context.customLink; contextLink.linkController.style.display = 'none'; contextLink._linkAnchor = null; contextLink.focusElement.value = ''; contextLink.linkAnchorText.value = ''; contextLink.targetSelect.selectedIndex = 0; } };

SUNEDITOR.create(document.getElementById('ex_dialog'), { plugins: [plugin_dialog], buttonList: [ [ { name: 'customLink', dataDisplay:'dialog', title:'Custom link', buttonClass:'', innerHTML:'<svg viewBox="0 0 24 24"><path d="M10.59,13.41C11,13.8 11,14.44 10.59,14.83C10.2,15.22 9.56,15.22 9.17,14.83C7.22,12.88 7.22,9.71 9.17,7.76V7.76L12.71,4.22C14.66,2.27 17.83,2.27 19.78,4.22C21.73,6.17 21.73,9.34 19.78,11.29L18.29,12.78C18.3,11.96 18.17,11.14 17.89,10.36L18.36,9.88C19.54,8.71 19.54,6.81 18.36,5.64C17.19,4.46 15.29,4.46 14.12,5.64L10.59,9.17C9.41,10.34 9.41,12.24 10.59,13.41M13.41,9.17C13.8,8.78 14.44,8.78 14.83,9.17C16.78,11.12 16.78,14.29 14.83,16.24V16.24L11.29,19.78C9.34,21.73 6.17,21.73 4.22,19.78C2.27,17.83 2.27,14.66 4.22,12.71L5.71,11.22C5.7,12.04 5.83,12.86 6.11,13.65L5.64,14.12C4.46,15.29 4.46,17.19 5.64,18.36C6.81,19.54 8.71,19.54 9.88,18.36L13.41,14.83C14.59,13.66 14.59,11.76 13.41,10.59C13,10.2 13,9.56 13.41,9.17Z" /></svg>' } ] ] });

/** import modules when using nodejs */ // import dialog from 'suneditor/src/plugins/modules/dialog'; // import component from 'suneditor/src/plugins/modules/component'; // import fileManager from 'suneditor/src/plugins/modules/fileManager'; // import resizing from 'suneditor/src/plugins/modules/resizing'; // import { dialog, component, fileManager, resizing } from 'suneditor/src/plugins/modules'; /** audio list */ const audioTable = document.getElementById('audio_list'); let audioList = []; function userFunc_audioUpload (targetElement, index, state, info, remainingFilesCount) { console.log('audioInfo', info); if (state === 'delete') { audioList.splice(findIndex(audioList, index), 1) } else { if (state === 'create') { audioList.push(info) } else { // update // } } if (remainingFilesCount === 0) { console.log('audioList', audioList) _setAudioList(audioList) } } function _setAudioList () { let list = ''; for (let i = 0, info; i < audioList.length; i++) { info = audioList[i]; list += '<li>' + '<button title="delete" onclick="_selectAudio(\'delete\',' + info.index + ')">X</button>' + '<a href="javascript:void(0)" onclick="_selectAudio(\'select\',' + info.index + ')">' + info.src + '</a>' + '</li>'; } audioTable.innerHTML = list; } function _selectAudio (type, index) { audioList[findIndex(audioList, index)][type](); }

// ex) A link dialog plugin with used [dialog, component, fileManager] module // Sample audio : https://file-examples.com/index.php/sample-audio-files/ var plugin_dialog_component_fileManager = { /**  * @Required @Unique  * plugin name  */ name: 'customAudio', /**  * @Required  * data display  */ display: 'dialog', /**  * @options  * You can also set from the button list  */ title:'Custom audio', buttonClass:'', innerHTML:'<span class="se-icon-text">?</span>', /**  * @Required  * add function - It is called only once when the plugin is first run.  * This function generates HTML to append and register the event.  * arguments - (core : core object, targetElement : clicked button element)  */ add: function (core) { // If you are using a module, you must register the module using the "addModule" method. core.addModule([dialog, component, fileManager]); /**  * @Required  * Registering a namespace for caching as a plugin name in the context object  */ const context = core.context; context.customAudio = { _infoList: [], // @Override fileManager _infoIndex: 0, // @Override fileManager _uploadFileLength: 0, // @Override fileManager focusElement: null, // @Override // This element has focus when the dialog is opened. targetSelect: null, // @require @Override component _element: null, _cover: null, _container: null, }; // buton title const titleList = { en: 'Audio', ko: '오디오' }; core.title = titleList[core.lang.code]; // languages const customAudioLang = { en: { title: 'Audio', file: 'Select from files', url: 'Audio url' }, ko: { title: '오디오', file: '파일에서 선택', url: '오디오 주소' } }; core.lang.audio = customAudioLang[core.lang.code]; /** dialog */ let audio_dialog = this.setDialog(core); context.customAudio.modal = audio_dialog; context.customAudio.fileInput = audio_dialog.querySelector('._se_audio_files'); context.customAudio.urlInput = audio_dialog.querySelector('.se-input-url'); context.customAudio.focusElement = context.customAudio.fileInput; /** controller */ let audio_controller = this.setController(core); context.customAudio.controller = audio_controller; /** add event listeners */ audio_dialog.querySelector('.se-dialog-files-edge-button').addEventListener('click', this._removeSelectedFiles.bind(context.fileInput, context.urlInput)); audio_dialog.querySelector('form').addEventListener('submit', this.submit.bind(core)); audio_controller.addEventListener('click', this.onClick_controller.bind(core)); /** append html */ context.dialog.modal.appendChild(audio_dialog); /** append controller */ context.element.relative.appendChild(audio_controller); /** empty memory */ audio_dialog = null, audio_controller = null; }, /** HTML - dialog */ setDialog: function (core) { const lang = core.lang; const dialog = core.util.createElement('DIV'); dialog.className = 'se-dialog-content'; dialog.style.display = 'none'; let html = '' + '<form class="editor_link">' + '<div class="se-dialog-header">' + '<button type="button" data-command="close" class="se-btn se-dialog-close" aria-label="Close" title="' + lang.dialogBox.close + '">' + core.icons.cancel + '</button>' + '<span class="se-modal-title">' + lang.audio.title + '</span>' + '</div>' + '<div class="se-dialog-body">' + '<div class="se-dialog-form">' + '<label>' + lang.audio.file + '</label>' + '<div class="se-dialog-form-files">' + '<input class="se-input-form _se_audio_files" type="file" accept="audio/*" multiple="multiple" />' + '<button type="button" data-command="filesRemove" class="se-btn se-dialog-files-edge-button" title="' + lang.controller.remove + '">' + core.icons.cancel + '</button>' + '</div>' + '</div>' + '<div class="se-dialog-form">' + '<label>' + lang.audio.url + '</label>' + '<input class="se-input-form se-input-url" type="text" />' + '</div>' + '</div>' + '<div class="se-dialog-footer">' + '<button type="submit" class="se-btn-primary" title="' + lang.dialogBox.submitButton + '"><span>' + lang.dialogBox.submitButton + '</span></button>' + '</div>' + '</form>'; dialog.innerHTML = html; return dialog; }, /** HTML - controller */ setController: function (core) { const lang = core.lang; const icons = core.icons; const link_btn = core.util.createElement('DIV'); link_btn.className = 'se-controller se-controller-link'; link_btn.innerHTML = '' + '<div class="se-arrow se-arrow-up"></div>' + '<div class="link-content">' + '<div class="se-btn-group">' + '<button type="button" data-command="update" tabindex="-1" class="se-tooltip">' + icons.edit + '<span class="se-tooltip-inner"><span class="se-tooltip-text">' + lang.controller.edit + '</span></span>' + '</button>' + '<button type="button" data-command="delete" tabindex="-1" class="se-tooltip">' + icons.delete + '<span class="se-tooltip-inner"><span class="se-tooltip-text">' + lang.controller.remove + '</span></span>' + '</button>' + '</div>' + '</div>'; return link_btn; }, // Disable url input when uploading files _removeSelectedFiles: function (urlInput) { this.value = ''; if (urlInput) urlInput.removeAttribute('disabled'); }, /**  * @Required @Override fileManager  */ fileTags: ['audio'], /**  * @Override core, fileManager, resizing  * @description It is called from core.selectComponent.  * @param {Element} element Target element  */ select: function (element) { this.plugins.customAudio.onModifyMode.call(this, element); }, /**  * @Override fileManager, resizing   * @param {Element} element Target element  */ destroy: function (element) { element = element || this.context.customAudio._element; const container = this.util.getParentElement(element, this.util.isComponent) || element; const dataIndex = element.getAttribute('data-index') * 1; const focusEl = (container.previousElementSibling || container.nextElementSibling); const emptyDiv = container.parentNode; this.util.removeItem(container); this.plugins.customAudio.init.call(this); this.controllersOff(); if (emptyDiv !== this.context.element.wysiwyg) this.util.removeItemAllParents(emptyDiv, function (current) { return current.childNodes.length === 0; }, null); // focus this.focusEdge(focusEl); // fileManager event // (pluginName, data-index, "uploadEventHandler") this.plugins.fileManager.deleteInfo.call(this, 'customAudio', dataIndex, userFunc_audioUpload); // history stack this.history.push(false); }, /**  * @Override fileManager  */ checkFileInfo: function () { // (pluginName, [tag], "uploadEventHandler", "formatFixFunction", "using resizing module?") this.plugins.fileManager.checkInfo.call(this, 'customAudio', ['audio'], userFunc_audioUpload, this.plugins.customAudio.updateCover.bind(this), false); }, /**  * @Override fileManager  */ resetFileInfo: function () { // (pluginName, data-index, "uploadEventHandler") this.plugins.fileManager.resetInfo.call(this, 'customAudio', userFunc_audioUpload); }, /**  * @Required @Override dialog  * This method is called just before the dialog opens.  * @param {Boolean} update If "update" argument is true, it is not a new call, but a call to modify an already created element.  */ on: function (update) { if (!update) { this.plugins.customAudio.init.call(this); } else if (this.context.customAudio._element) { // "update" and "this.context.dialog.updateModal" are always the same value. // This code is an exception to the "link" plugin. this.context.dialog.updateModal = true; this.context.customAudio.urlInput.value = this.context.customAudio._element.src; } }, /**  * @Required @Override dialog  * This method is called when the plugin button is clicked.  * Open the modal window here.  */ open: function () { // open.call(core, pluginName, isModify) this.plugins.dialog.open.call(this, 'customAudio', 'customAudio' === this.currentControllerName); }, submit: function (e) { const context = this.context.customAudio; e.preventDefault(); e.stopPropagation(); try { if (context.fileInput.files.length > 0) { // upload files this.plugins.customAudio.submitAction.call(this, context.fileInput.files); } else if (context.urlInput.value.trim().length > 0) { // url this.plugins.customAudio.setupUrl.call(this, context.urlInput); } } catch (error) { throw Error('[SUNEDITOR.audio.submit.fail] cause : "' + error.message + '"'); } finally { this.plugins.dialog.close.call(this); } return false; }, submitAction: function (fileList) { if (fileList.length === 0) return; let fileSize = 0; const files = []; for (let i = 0, len = fileList.length; i < len; i++) { if (/audio/i.test(fileList[i].type)) { files.push(fileList[i]); fileSize += fileList[i].size; } } const context = this.context.customAudio; const audioPlugin = this.plugins.customAudio; context._uploadFileLength = files.length; const filesLen = this.context.dialog.updateModal ? 1 : files.length; const info = { isUpdate: this.context.dialog.updateModal, element: context._element }; // create formData const formData = new FormData(); for (let i = 0; i < filesLen; i++) { formData.append('file-' + i, files[i]); } // fileManager - upload // (uploadURL, uploadHeader, formData, callBack, errorCallBack) this.plugins.fileManager.upload.call(this, 'http://localhost:3000', {}, formData, audioPlugin.callBack_upload.bind(this, info), audioPlugin.callBack_error); }, callBack_upload: function (info, xmlHttp) { const response = JSON.parse(xmlHttp.responseText); if (response.errorMessage) { this.functions.noticeOpen(response.errorMessage); } else { const fileList = response.result; let oAudio = null; if (info.isUpdate) { oAudio = info.element; } else { oAudio = this.util.createElement('AUDIO'); oAudio.setAttribute('controls', true); } for (let i = 0, len = fileList.length, file; i < len; i++) { file = { name: fileList[i].name, size: fileList[i].size }; this.plugins.customAudio.create_audio.call(this, oAudio, fileList[i].url, file, info.isUpdate); } } }, callBack_error: function (errorMessage, response, core) { core.functions.noticeOpen(errorMessage | response.toString()); }, setupUrl: function () { try { this.showLoading(); const context = this.context.customAudio; const src = context.urlInput.value.trim(); if (src.length === 0) return false; const oAudio = this.util.createElement('AUDIO'); oAudio.setAttribute('controls', true); // When opened for modification "this.context.dialog.updateModal" is true this.plugins.customAudio.create_audio.call(this, oAudio, src, null, this.context.dialog.updateModal); } catch (error) { throw Error('[SUNEDITOR.audio.audio.fail] cause : "' + error.message + '"'); } finally { this.closeLoading(); } }, // create or update create_audio: function (element, src, file, isUpdate) { const context = this.context.customAudio; // create new tag if (!isUpdate) { element.src = src; // In order to use it in the form of components such as images and videos,  // you need to create component tags by calling the "set_cover" and "set_container" functions of the "component" module. const cover = this.plugins.component.set_cover.call(this, element); const container = this.plugins.component.set_container.call(this, cover, ''); this.insertComponent(container, false); } // update else if (element && element.src !== src) { element = context._element; element.src = src } // not changed else { return; } // call fileManager.setInfo when updated tag // (pluginName, element, "uploadEventHandler", file, "using resizing module") this.plugins.fileManager.setInfo.call(this, 'customAudio', element, userFunc_audioUpload, file, false); this.history.push(false); }, // Update container for "audio" tag not matching format to be used in "checkFileInfo" updateCover: function (element) { const context = this.context.customAudio; element.setAttribute('controls', true); // find component element const existElement = this.util.getParentElement(element, this.util.isMediaComponent) || this.util.getParentElement(element, function (current) { return this.isWysiwygDiv(current.parentNode); }.bind(this.util)); // clone element context._element = element = element.cloneNode(false); const cover = this.plugins.component.set_cover.call(this, element); const container = this.plugins.component.set_container.call(this, cover, 'se-video-container'); existElement.parentNode.replaceChild(container, existElement); // call fileManager.setInfo when updated tag // (pluginName, element, "uploadEventHandler", file, "using resizing module") this.plugins.fileManager.setInfo.call(this, 'customAudio', element, userFunc_audioUpload, null, false); }, /**  * @Required @Override fileManager, resizing  * @param {Element} selectionTag Selected element  * @param {Object} size Size object{w, h, t, 1} of "core.plugins.resizing.call_controller_resize" return value when if using "resizing" module  */ onModifyMode: function (selectionTag) { const context = this.context.customAudio; const controller = context.controller; const offset = this.util.getOffset(selectionTag, this.context.element.wysiwygFrame); controller.style.top = (offset.top + selectionTag.offsetHeight + 10) + 'px'; controller.style.left = (offset.left - this.context.element.wysiwygFrame.scrollLeft) + 'px'; controller.style.display = 'block'; const overLeft = this.context.element.wysiwygFrame.offsetWidth - (controller.offsetLeft + controller.offsetWidth); if (overLeft < 0) { controller.style.left = (controller.offsetLeft + overLeft) + 'px'; controller.firstElementChild.style.left = (20 - overLeft) + 'px'; } else { controller.firstElementChild.style.left = '20px'; } // Show controller at editor area (controller elements, function, "controller target element(@Required)", "controller name(@Required)", etc..) this.controllersOn(controller, selectionTag, this.plugins.customAudio.init.bind(this), 'customAudio'); // set modify mode context selectionTag.style.border = '1px solid #80bdff'; context._element = selectionTag; context._cover = this.util.getParentElement(selectionTag, 'FIGURE'); context._container = this.util.getParentElement(selectionTag, this.util.isComponent); }, /**  * @Required @Override fileManager, resizing  */ openModify: function (notOpen) { this.context.customAudio.urlInput.value = this.context.customAudio._element.src; if (!notOpen) this.plugins.dialog.open.call(this, 'customAudio', true); }, onClick_controller: function (e) { e.stopPropagation(); const command = e.target.getAttribute('data-command'); if (!command) return; e.preventDefault(); if (/update/.test(command)) { this.plugins.customAudio.openModify.call(this, false); } else { /** delete */ this.plugins.customAudio.destroy.call(this, this.context.customAudio._element); } this.controllersOff(); }, /**  * @Required @Override dialog  * This method is called when the dialog window is closed.  * Initialize the properties.  */ init: function () { if (this.context.dialog.updateModal) return; const context = this.context.customAudio; if (context._element) context._element.style.border = ''; context.controller.style.display = 'none'; context._element = null; context.fileInput.value = ''; context.urlInput.value = ''; } };

SUNEDITOR.create(document.getElementById('ex_dialog_component_fileManager'), { plugins: [plugin_dialog_component_fileManager], buttonList: [ [ 'customAudio', 'preview' ] ] });