在contenteditable div中保持美学卷轴

Question

我正在使用一个contenteditable 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 中

祝你好运！