Eeditor

by Imri Paloja

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">


<div class="container">


  
  </div>

CSS

table {
  width: 100%;
  background: #FFF;
  border: 1px solid #CCC;
  border-radius: 5px !important;
  padding: 20px 30px;
}

#files-list-wrapper {
  width: 100%;
  background: #FFF;
  border: 1px solid #CCC;
  border-radius: 5px !important;
  padding: 20px 30px;
}

JavaScript

function toggle(tagName) {
    const selection = window.getSelection();
    if (!selection.rangeCount) return;

    const range = selection.getRangeAt(0);
    const editor = document.getElementById("euroeditor-textarea");

    if (!editor.contains(range.commonAncestorContainer)) return;
    if (range.collapsed) return;

    // Detect formatting
    let node = selection.focusNode;
    let wrapper = null;

    while (node && node !== editor) {
        if (node.nodeType === 1 && node.tagName === tagName) {
            wrapper = node;
            break;
        }
        node = node.parentNode;
    }

    if (wrapper) {
        unwrap(wrapper);
        return;
    }

    // APPLY formatting safely
    const el = document.createElement(tagName.toLowerCase());
    const contents = range.extractContents();
    el.appendChild(contents);
    range.insertNode(el);

    // Restore selection
    selection.removeAllRanges();
    const newRange = document.createRange();
    newRange.selectNodeContents(el);
    selection.addRange(newRange);

    editor.normalize();
}

function toggleAttributeTag(tagName, attrs = {}) {
    const selection = window.getSelection();
    if (!selection.rangeCount) return;

    const range = selection.getRangeAt(0);
    const editor = document.getElementById("euroeditor-textarea");

    if (!editor.contains(range.commonAncestorContainer)) return;
    if (range.collapsed) return;

    // Check if selection is already wrapped with this tag
    let node = selection.focusNode;
    let wrapper = null;

    while (node && node !== editor) {
        if (node.nodeType === 1 && node.tagName === tagName) {
            wrapper = node;
            break;
        }
        node = node.parentNode;
    }

    if (wrapper) {
        unwrap(wrapper);
        return;
    }

    // Create element with attributes
    const el = document.createElement(tagName.toLowerCase());
    for (const key in...