ContentEditable 中的分页符 (WYSIWYG)

Question

我正在为一个 Web 应用程序构建一个所见即所得的编辑器，它将模拟“MS Word 感觉”，也就是说，将内容直接放入 contenteditable 元素中。

经过大量研究，我终于能够使用 contenteditable 中的 div 元素以某种方式“伪造”页面之间的分页符，该元素由其他两个浮动元素构建：(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）。尽管如此，如果我将插入符号放在分页符后的第一个位置并开始输入，则文本最终会放在分页符空间内（在垂直线上，几乎就像放在分页符之前一样）（情况 2）。 - Screenshot: Wrong behaviour after the pagebreak

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

一些额外的想法/信息：

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

提前致谢。

Answer 1

试试：

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

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