Question

我创建具有属性page的元素contenteditable="true"和但在最后一行中，我不知道如何使用事件监听器创建新页面。帮助我给出逻辑或帮助我的代码。谢谢

此示例是我的代码段

* {
  margin:0;
  padding 0;
}
html, body {
  width: 100%;
  height: 100%;
  background-color: #ccc;
  padding: 5px;
}

page {
  background: #fff;
  display: block;
  width: 80%;
  height: 100px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 20px;
  outline: none;
  padding: 20px
}

<page contenteditable>
  <p>asd</p>
  <br>
  <br>
  <br>
  how to after new line create new page ?
</page>

Answer 1

将page元素放入容器div中。设置容器div的高度。将keydown事件处理程序添加到page元素中。在事件处理程序中，检查page元素的高度是否超过容器div的高度。如果是这样，请将带有新div元素的新容器page附加到body并将焦点设置到新创建的page元素。

这是一个演示：https://plnkr.co/edit/s2TCksvgoun3a6tZ8MI9?p=preview。

这只是一个基本的工作示例。如果您尝试创建类似于MS Word的行为，则必须对此进行很多改进。

如何使用contenteditable元素插入新页面

1 个答案: