Jürgen Mummert
113 lines
2.8 KiB
JavaScript
113 lines
2.8 KiB
JavaScript
(function () {
|
|
const mounts = document.querySelectorAll('[data-mm-editor="tiptap"]');
|
|
|
|
if (!mounts.length) {
|
|
return;
|
|
}
|
|
|
|
const runFallback = (mount) => {
|
|
if (!mount || mount.querySelector('.ProseMirror') || mount.getAttribute('data-mm-fallback-ready') === '1') {
|
|
return;
|
|
}
|
|
|
|
const textareaId = mount.getAttribute('data-textarea-id');
|
|
|
|
if (!textareaId) {
|
|
return;
|
|
}
|
|
|
|
const textarea = document.getElementById(textareaId);
|
|
|
|
if (!textarea) {
|
|
return;
|
|
}
|
|
|
|
const toolbar = document.querySelector('[data-mm-editor-toolbar="' + textareaId + '"]');
|
|
const form = textarea.closest('form');
|
|
|
|
mount.setAttribute('contenteditable', 'true');
|
|
mount.setAttribute('data-mm-fallback-ready', '1');
|
|
mount.classList.add('mm-fallback-editor');
|
|
mount.innerHTML = textarea.value || '<p></p>';
|
|
textarea.style.display = 'none';
|
|
|
|
const syncState = () => {
|
|
textarea.value = mount.innerHTML;
|
|
};
|
|
|
|
const focusMount = () => {
|
|
mount.focus();
|
|
};
|
|
|
|
mount.addEventListener('input', syncState);
|
|
mount.addEventListener('blur', syncState);
|
|
|
|
if (toolbar) {
|
|
toolbar.addEventListener('click', (event) => {
|
|
const target = event.target.closest('button[data-action]');
|
|
|
|
if (!target || target.disabled) {
|
|
return;
|
|
}
|
|
|
|
event.preventDefault();
|
|
|
|
const action = target.getAttribute('data-action');
|
|
|
|
focusMount();
|
|
|
|
switch (action) {
|
|
case 'paragraph':
|
|
document.execCommand('formatBlock', false, 'p');
|
|
break;
|
|
case 'h2':
|
|
document.execCommand('formatBlock', false, 'h2');
|
|
break;
|
|
case 'h3':
|
|
document.execCommand('formatBlock', false, 'h3');
|
|
break;
|
|
case 'bold':
|
|
document.execCommand('bold', false);
|
|
break;
|
|
case 'italic':
|
|
document.execCommand('italic', false);
|
|
break;
|
|
case 'underline':
|
|
document.execCommand('underline', false);
|
|
break;
|
|
case 'bulletList':
|
|
document.execCommand('insertUnorderedList', false);
|
|
break;
|
|
case 'orderedList':
|
|
document.execCommand('insertOrderedList', false);
|
|
break;
|
|
case 'indent':
|
|
document.execCommand('indent', false);
|
|
break;
|
|
case 'outdent':
|
|
document.execCommand('outdent', false);
|
|
break;
|
|
case 'undo':
|
|
document.execCommand('undo', false);
|
|
break;
|
|
case 'redo':
|
|
document.execCommand('redo', false);
|
|
break;
|
|
default:
|
|
break;
|
|
}
|
|
|
|
syncState();
|
|
});
|
|
}
|
|
|
|
if (form) {
|
|
form.addEventListener('submit', syncState);
|
|
}
|
|
};
|
|
|
|
window.setTimeout(() => {
|
|
mounts.forEach(runFallback);
|
|
}, 900);
|
|
})();
|