wysiwyg

wysiwyg.js

@@ -0,0 +1,139 @@
+const editor = document.getElementsByClassName('editor')[0];
+const toolbar = editor.getElementsByClassName('toolbar')[0];
+const buttons = toolbar.querySelectorAll('.btn:not(.has-submenu)');
+for(let i = 0; i < buttons.length; i++) {
+  let button = buttons[i];
+  
+  button.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];
+  const visuellView = contentArea.getElementsByClassName('visuell-view')[0];
+  const htmlView = contentArea.getElementsByClassName('html-view')[0];
+  if(button.classList.contains('active')) { // show visuell view
+    visuellView.innerHTML = htmlView.value;
+    htmlView.style.display = 'none';
+    visuellView.style.display = 'block';
+    button.classList.remove('active');     
+  } else {  // show html view
+    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', false, linkValue);
+}
+function execDefaultAction(action) {
+  document.execCommand(action, false);
+}
+
+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();