在contenteditable div中保持美学卷轴 [英] Maintaining aesthetic scroll in contenteditable div

问题描述

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

I'm building a Rich Text Editor using a contenteditable div, and I find that when I have written more content than fits the screen and I scroll so that the cursor is no longer at the bottom, and I start typing again, the scroll defaults to putting the cursor at the bottom of the screen again.

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

When I try the jquery e.preventDefault from the keydown or keypress, of course it stops, but then I can't type anything either! If I continue down that route, unless I can find a way of targeting only this particular behavior, I'll end up having to script the entire of the contenteditable behaviour!

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

How do I keep the scroll where the user want's it?

aloha和CKeditor如何管理？

How do aloha and CKeditor manage it??

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

This happens even if the editor-window div is set to overflow: hidden!

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

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

Actually I'm finding that it doesn't just scroll to put the cursor at the bottom, its scrolling seems quite erratic. The cursor doesn't leave the screen, which I'm guessing is the purpose for this behaviour, but still its erratic none the less.

推荐答案

如果你看起来足够深或只是在编辑器附近检查元素，你会发现它是基于iframe的。

If you would look deep enough or just "inspect element" near the editor you would find out that it is based on an iframe.

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

I wouldn't recommend you to keep on developing using div as a stage. Furthermore, the iframe would solve your scrolling problem. Here is a link that shows how to insert html to iframe created with javascript here

祝你好运！

这篇关于在contenteditable div中保持美学卷轴的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！