Javascript 具有类似ms word的分页功能的文本编辑器

HTML5jQuery或java脚本 是否可以使用JavaScript在富文本编辑器中实现类似MS Word的分页

我需要使用JavaScript实现一个编辑器，该编辑器包含页面中的文本。如果我键入的文本超过了页面的FICE限制，则会自动创建一个新页面，文本溢出到新页面，格式保持不变。此外，如果我从另一个来源复制大文本，那么它应该根据文本长度计算页数，并将其划分为具有原始文本所有格式的页面

我需要只使用JavaScript、HTML和CSS，根据像素大小将文本分成几行

如果我从页面内部删除内容，则下一页的内容应填充到当前页面中，如果删除了页面中的所有内容，则应删除该页面。MS word中几乎所有的分页功能都应该在这个页面中实现。

Notes 它使用javascript而不使用jQuery、CSS和HTML5。每个页面都是一个

div

，具有

page

类，并且位于

main

元素内

代码段：

var main=document.getElementsByTagName（“main”）[0]；
var mainChildren=main.children；
var限制=内部宽度*2；
设置间隔（（）=>{
if（！main.children）{
main.appendChild（document.createElement（“div”）.classList.add（“page”）；
}
for（变量i2=0；i2=限制）{
如果（！mainChildren[i2+1]）{
var n=document.createElement（“div”）；
n、 类列表。添加（“页面”）；
主。子（n）；
}
mainChildren[i2+1]。前置（divChildren[i]）；
divChildren[i].remove（）；
}
}
}
}, 100);
函数pasteHtmlAtCaret（html，选择PastedContent）{
var-sel，范围；
if（window.getSelection）{
//IE9和非IE
sel=window.getSelection（）；
if（sel.getRangeAt&&sel.rangeCount）{
范围=选择范围（0）；
range.deleteContents（）；
//Range.CreateContexturalFragment（）在这里会很有用，但是
//仅在相对较新的标准化阶段，在中不受支持
//一些浏览器（比如IE9）
var el=document.createElement（“div”）；
el.innerHTML=html；
var frag=document.createDocumentFragment（），
节点，最后一个节点；
while（（node=el.firstChild））{
lastNode=frag.appendChild（节点）；
}
var firstNode=frag.firstChild；
range.insertNode（frag）；
//保留所选内容
如果（最后一个节点）{
range=range.cloneRange（）；
range.setStartAfter（lastNode）；
如果（选择粘贴内容）{
range.setStartBefore（第一个节点）；
}否则{
范围。塌陷（真）；
}
选择removeAllRanges（）；
选择添加范围（范围）；
}
}
}else if（（sel=document.selection）&&sel.type！=“Control”）{
//IE<9
var originalRange=sel.createRange（）；
原始范围。折叠（真）；
sel.createRange（）.pasteHTML（html）；
如果（选择粘贴内容）{
range=sel.createRange（）；
range.setEndPoint（“StartToStart”，原始范围）；
range.select（）；
}
}
}
var键映射={
49: {
t:“h1”，
十：“标题一级”
},
50: {
t:“h2”，
十：“标题二级”
},
51: {
t:“h3”，
十：“标题三级”
},
52: {
t:“h4”，
x:“标题级别4”
},
53: {
t:“h5”，
十：“标题五级”
},
54: {
t:“h6”，
x:“标题6级”
},
78: {
t:“div”，
x：“普通文本”
},
73: {
t:“我”，
x:“斜体”，
i:是的
},
66: {
t:“b”，
x:“粗体文本”，
i:是的
},
85: {
t:“u”，
x：“带下划线的文本”，
i:是的
}
};
onkeydown=函数（e）{
var e=e | | window.event；//用于IE覆盖IEs窗口事件对象
控制台日志（e）；
if（e.altKey&&keymap[e.keyCode]）{
//mainChildren[mainChildren.length-1].appendChild（）
pasteHtmlAtCaret（“+keymap[e.keyCode].x+”）；
var节点=document.createElement（“div”）；
getSelection（）.getRangeAt（0）.insertNode（节点）；
//if（keymap[e.keyCode].t.match（/^h\d$/）{
node.innerText=“继续键入…”；
//}否则{
//node.innerText=“\u00A0”；
//}
var node2=keymap[e.keyCode].i？document.createElement（“span”）：document.createElement（“div”）；
node2.innerHTML=node.innerHTML；
getSelection（）.getRangeAt（0.endContainer.parentElement.appendChild（node2）；
node.remove（）；
//getSelection（）.getRangeAt（0.endContainer.textContent=”“；
返回false；
}
};
*{
保证金：0；
填充：0；
大纲：无；
过渡：0.15s全部；
}
.第页{
高度：500px；
利润率：2%；
宽度：96%；
框大小：边框框；
背景：白色；
盒影：0px 0px 6px 7px白色；
}
p{
填充：1em 0；
}
主要的，
身体{
背景：黑色；
}

开始在这里打字！
使用alt+1表示最大标题，alt+2表示较大标题，alt+3表示大标题，等等。使用alt+b表示粗体，alt+i表示斜体，alt+u表示下划线。
Notes
它使用javascript而不使用jQuery、CSS和HTML5。每个页面都是一个
div
，具有
page
类，并且位于
main
元素内

代码段：

var main=document.getElementsByTagName（“main”）[0]；
var mainChildren=main.children；
var限制=内部宽度*2；
设置间隔（（）=>{
if（！main.children）{
main.appendChild（document.createElement（“div”）.classList.add（“page”）；
}
for（变量i2=0；i2=限制）{