ContentEditable 中的分页符 (WYSIWYG)

Question

我正在为 Web 应用程序构建一个 WYSIWYG 编辑器，它将模拟 "MS Word feel"，即将内容直接放入 contenteditable 元素中。

经过大量研究，我终于能够以某种方式 "fake" 使用 contenteditable 中的 div 元素在页面之间进行分页，该元素由另外两个 float 元素构建：(i) 一个要推送的元素关闭实际的分页符，例如伪元素 [pagebreak-push]； (ii) 分页符本身 [pagebreak-main]。浮动分页符使我能够以文本环绕分页符的方式在 contenteditable 中键入文本。由于分页符是 100% 宽度，文本应该只跳过它。

这是我目前得到的（JSFiddle：https://jsfiddle.net/OctavioSI/c19w68ff/10/）：

HTML

<div class="wysiwyg-canvas">
    <div class="wysiwyg-content" contenteditable="true">
        Sample Text
        <div class="pagebreak" contenteditable="false">
            <span class="pagebreak-push"></span>
            <span class="pagebreak-main" contenteditable="false">Pagebreak</span>
        </div>
    </div>
    <div class="background-pages">
        <div class="wysiwyg-page"></div>
        <div class="wysiwyg-page pagespace"></div>
    </div>
</div>

CSS

.wysiwyg-canvas{
    background-color: #999999;
    border:1px solid #cccccc;
    padding:0.7vw;
    overflow-y: auto;
    height:400px;    
    width:100%;
    position:relative;
    font-size:1em;
}
.wysiwyg-page{
    background-color: #FFFFFF;
    border:1px solid #000000;
    padding:0;
    overflow: hidden;
    cursor:text;
    height:200px;
}
.wysiwyg-page.pagespace{
    margin-top:5px;
}
.wysiwyg-content{
    position:absolute;
    top:5px;
    left:5px;
    width:calc(100% - 10px);
    padding:0;
    -moz-user-select: all;
    -khtml-user-select: all;
    -webkit-user-select: all;
    user-select: all;    
    font-size:1em;
    font-family: Verdana;
    font-weight: normal;
    color:#000000;
    text-transform: none;
    line-height:1em;
    display:block;
    border:1px solid green;
}
.pagebreak > .pagebreak-push{
  float: right;
  height:155px;
  border:0;
  width:1px;
  display:block;
  border-right:1px solid brown; /* Used for better view while testing */
}
.pagebreak > .pagebreak-main {
    float:right;
    clear:both;
    width:100%;
    height:50px;
    margin: 0;
    border:1px solid #aaaaaa; /* Used for better view while testing */
    background-color:#cccccc;
    line-height:50px;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    user-select: none;  
    display:block;
}
.pagebreak {
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    user-select: none;
    display:block;
    padding:0;
    margin:0;
    text-align:center;
    color:#aaaaaa;
}
div:focus,
div:active,
div:hover {
    text-decoration:none;
    outline:none;
}

问题：代码本身在一定程度上工作正常，如您在 JSFiddle 和以下屏幕截图（情况 1）中所见。尽管如此，如果我将插入符放在分页符之后的第一个位置并开始输入，文本最终会被放在分页符 space 内（在垂直线上，几乎就像放在分页符之前一样）（情况 2 ). - Screenshot: Wrong behaviour after the pagebreak

我的问题是：有什么方法可以避免这种奇怪的行为，从而使文本正确地跳过分页符而不会出现这种故障？

一些额外的想法/信息：

在深入研究这个话题之后，我想出了上面的代码结合使用 div 和伪元素 (:before) 的想法，所以至于把它压低，以及文本可以被包裹起来的想法浮动元素。我使用另一个元素而不是的原因伪元素方法是我需要动态改变此 pagebreak-push 元素的高度 window.resize。从此事实证明在伪元素上很难，我决定使用它模仿这种效果。
我查找了 CSS 个地区，但自从它停产后，我有放弃了这个想法。然后我找到了 Adobe Polyfill CSS Regions，它起初似乎完全是这个问题的答案：我需要做的就是将每个页面定义为 -adobe-flow-from 并且文本将流经页面。然而，虽然我能够在页面加载时流动文本，但设置脚本以动态流动文本似乎相当困难。即使是 Polyfill 文档中提供的用于更新呈现的布局的解决方法在这种情况下也不起作用。
浏览器兼容性：此代码段不适用于 Firefox 或 IE。截至Chrome，在Chrome v.50 中是可以的（在Chromium v49 中也是可以的），但是将浏览器更新到最新版本v.51 后，出现了上述问题。也许这是 Chrome 处理浮动对象的一些新方法？我仍在努力解决这个问题。此外，即使在文本正确跳过分页符的事件中，如果按下 [Enter]，它也不会跳过——只有额外的数据，即使只有 [space].

提前致谢。

Answer 1

尝试：

.wysiwyg-content div {
word-wrap: normal;
}

根据您提供的 link，显然他们在最新版本的 chrome 中调整了 100% 浮点换行的一些功能。所以也许强制自动换行正常可能会解决问题。

ContentEditable 中的分页符 (WYSIWYG)

Pagebreak in ContentEditable (WYSIWYG)

css

contenteditable