Ich habe ein Div, das als WYSIWYG-Editor fungiert. Es fungiert als Textfeld, rendert jedoch die Markdown-Syntax darin, um Live-Änderungen anzuzeigen.
Problem: Beim Eingeben von Buchstaben wird die Einfügemarke auf den Anfang des Div zurückgesetzt.
const editor = document.querySelector('div'); editor.innerHTML = parse('**dlob** *cilati*'); editor.addEventLis tener('input', () => { editor.innerHTML = parse(editor.innerText); }); function parse(text) { return text .replace(/**(.*)**/gm, '**<strong></strong>**') // bold .replace(/*(.*)*/gm, '*<em></em>*'); // italic }
div { height: 100vh; width: 100vw; }
<div contenteditable />
Codepen: https://codepen.io/ADAMJR/pen/MWvPebK
Markdown-Editoren wie QuillJS scheinen in der Lage zu sein, untergeordnete Elemente zu bearbeiten, ohne das übergeordnete Element zu bearbeiten. Dadurch wird das Problem vermieden, aber ich bin mir jetzt sicher, wie ich diese Logik mit diesem Setup wiederherstellen kann.
Frage: Wie kann verhindert werden, dass die Einfügemarke beim Tippen zurückgesetzt wird?
Update: Ich habe es geschafft, die Caret-Position bei jeder Eingabe an das Ende des Div zu senden. Dies führt jedoch immer noch zu einer grundsätzlichen Neuausrichtung der Position. https://codepen.io/ADAMJR/pen/KKvGNbY
大多数富文本编辑器的做法是保持自己的内部状态,在按键事件上更新它并渲染自定义可视层。例如这样:
需要先获取光标的位置,然后对内容进行处理和设置。然后恢复光标位置。
当存在嵌套元素时,恢复光标位置是一个棘手的部分。此外,您每次都会创建新的
和
元素,旧的元素将被丢弃。