2 lines
4.8 KiB
JavaScript
2 lines
4.8 KiB
JavaScript
function initWYSIWYG(){$(".wysiwyg").html('<div class="toolbar"> <div class="line"> <div class="box"> <span class="btn icon smaller" data-action="bold" title="Bold"> <img loading="lazy" src="https://image.flaticon.com/icons/svg/25/25432.svg"> </span> <span class="btn icon smaller" data-action="italic" title="Italic"> <img loading="lazy" src="https://image.flaticon.com/icons/svg/25/25392.svg"> </span> <span class="btn icon smaller" data-action="underline" title="Underline"> <img loading="lazy" src="https://image.flaticon.com/icons/svg/25/25433.svg"> </span> <span class="btn icon smaller" data-action="strikeThrough" title="Strike through"> <img loading="lazy" src="https://image.flaticon.com/icons/svg/25/25626.svg"> </span> </div> <div class="box"> <span class="btn icon has-submenu"> <img loading="lazy" src="https://image.flaticon.com/icons/svg/25/25351.svg"> <div class="submenu"> <span class="btn icon" data-action="justifyLeft" title="Justify left"> <img loading="lazy" src="https://image.flaticon.com/icons/svg/25/25351.svg"> </span> <span class="btn icon" data-action="justifyCenter" title="Justify center"> <img loading="lazy" src="https://image.flaticon.com/icons/svg/25/25440.svg"> </span> <span class="btn icon" data-action="justifyRight" title="Justify right"> <img loading="lazy" src="https://image.flaticon.com/icons/svg/25/25288.svg"> </span> <span class="btn icon" data-action="formatBlock" title="Justify block"> <img loading="lazy" src="https://image.flaticon.com/icons/svg/25/25181.svg"> </span> </div> </span> <span class="btn icon" data-action="insertOrderedList" title="Insert ordered list"> <img loading="lazy" src="https://image.flaticon.com/icons/svg/25/25242.svg"> </span> <span class="btn icon" data-action="insertUnorderedList" title="Insert unordered list"> <img loading="lazy" src="https://image.flaticon.com/icons/svg/25/25648.svg"> </span> <span class="btn icon" data-action="outdent" title="Outdent"> <img loading="lazy" src="https://image.flaticon.com/icons/svg/25/25410.svg"> </span> <span class="btn icon" data-action="indent" title="Indent"> <img loading="lazy" src="https://image.flaticon.com/icons/svg/25/25233.svg"> </span> </div> <div class="box"> <span class="btn icon" data-action="insertHorizontalRule" title="Insert horizontal rule"> <img loading="lazy" src="https://image.flaticon.com/icons/svg/25/25232.svg"> </span> </div> </div><div class="line"> <div class="box"> <span class="btn icon smaller" data-action="undo" title="Undo"> <img loading="lazy" src="https://image.flaticon.com/icons/svg/25/25249.svg"> </span> <span class="btn icon" data-action="removeFormat" title="Remove format"> <img loading="lazy" src="https://image.flaticon.com/icons/svg/25/25454.svg"> </span> </div> <div class="box"> <span class="btn icon smaller" data-action="createLink" title="Insert Link"> <img loading="lazy" src="https://image.flaticon.com/icons/svg/25/25385.svg"> </span> <span class="btn icon smaller" data-action="unlink" title="Unlink"> <img loading="lazy" src="https://image.flaticon.com/icons/svg/25/25341.svg"> </span> </div> <div class="box"> <span class="btn icon" data-action="code" title="Show HTML-Code"> <img loading="lazy" src="https://image.flaticon.com/icons/svg/25/25185.svg"> </span> </div> </div></div><div class="content-area"><div class="visuell-view" contenteditable></div><textarea class="html-view"></textarea></div>')}initWYSIWYG();const editor=document.getElementsByClassName("wysiwyg")[0];console.log(editor);const toolbar=editor.getElementsByClassName("toolbar")[0],buttons=toolbar.querySelectorAll(".btn:not(.has-submenu)");for(let i=0;i<buttons.length;i++){let button;buttons[i].addEventListener("click",(function(e){let action=this.dataset.action;switch(action){case"code":execCodeAction(this,editor);break;case"createLink":execLinkAction();break;default:execDefaultAction(action)}}))}function execCodeAction(button,editor){const contentArea=editor.getElementsByClassName("content-area")[0],visuellView=contentArea.getElementsByClassName("visuell-view")[0],htmlView=contentArea.getElementsByClassName("html-view")[0];button.classList.contains("active")?(visuellView.innerHTML=htmlView.value,htmlView.style.display="none",visuellView.style.display="block",button.classList.remove("active")):(htmlView.innerText=visuellView.innerHTML,visuellView.style.display="none",htmlView.style.display="block",button.classList.add("active"))}function execLinkAction(){let linkValue=prompt("Link (e.g. https://webdeasy.de/)");document.execCommand("createLink",!1,linkValue)}function execDefaultAction(action){document.execCommand(action,!1)}
|
|
//# sourceMappingURL=wysiwyg.min.js.map
|