在contenteditable div中保持美学卷轴

Question

我正在使用一个令人满意的div构建一个富文本编辑器，我发现当我写了更多内容而不是适合屏幕时，我滚动以便光标不再在底部，我再次开始输入，滚动默认将光标再次放在屏幕底部。

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

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

aloha和CKeditor如何管理它？

编辑：即使编辑器窗口div设置为overflow：hidden！

，也会发生这种情况

<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

祝你好运！