javascript - 在 contenteditable div 中保持美学滚动

Question

我正在使用 contenteditable div 构建一个富文本编辑器，我发现当我写的内容多于适合屏幕的内容时，我滚动以使光标不再位于底部，然后我再次开始输入，滚动默认将光标再次放在屏幕底部。

当我从 keydown 或 keypress 尝试 jquery e.preventDefault 时，它当然会停止，但我也无法输入任何内容!如果我继续沿着这条路走下去，除非我能找到一种方法来只针对这个特定的行为，否则我最终将不得不编写整个 contenteditable 行为的脚本!

如何让滚动条保持在用户想要的位置？

aloha 和 CKeditor 是怎么管理的？？

编辑:即使编辑器窗口 div 设置为溢出:隐藏也会发生这种情况!

<div id="editor-window" class="hbox flex">
    <div id="editor" >
        <div id="editor-content" contenteditable>
            <p class="slug"></p>
        </div>
    </div>
</div>

编辑:实际上我发现它不只是滚动将光标放在底部，它的滚动看起来很不稳定。光标没有离开屏幕，我猜这是此行为的目的，但仍然不稳定。

Answer 1

如果您看得足够深或者只是在编辑器附近“检查元素”，您会发现它基于 iframe。

我不建议您继续使用 div 作为舞台进行开发。此外，iframe 将解决您的滚动问题。这是一个链接，显示如何将 html 插入到使用 javascript 创建的 iframe here

祝你好运!