Html 5 jquery或java脚本 是否可以在使用JavaScript的富文本编辑器中实现类似于MS Word的分页。文字编辑器与分页类似于ms词
我需要实现一个使用JavaScript的编辑器，其中包含页面中的文本。如果我输入的文本超出了页面的最大限制，那么会自动创建一个新页面，并且文本会溢出到格式不变的新页面。此外，如果我从其他来源复制大文本，则应根据文本长度计算页数，并将其分成具有原始文本格式的所有页面。
我只需要使用JavaScript，HTML和CSS根据像素大小将文本分为几行。
如果我从页面内部删除内容，则应在当前页面中填充来自下一页面的内容，并且如果页面中的所有内容都被删除，则应删除该页面。几乎MS字中的每个寻呼功能都应该在这一个中实现。
这使用没有jQuery，CSS和HTML5的JavaScript。每个页面是div，其类别为page，位于main元素内。
var main = document.getElementsByTagName("main")[0];
var mainChildren = main.children;
var limit = innerWidth * 2;
setInterval(() => {
if (!main.children) {
main.appendChild(document.createElement("div").classList.add("page"));
}
for (var i2 = 0; i2 < mainChildren.length; i2++) {
var divChildren = mainChildren[i2].children;
var height = 0;
for (var i = 0; i < divChildren.length; i++) {
height += divChildren[i].offsetHeight;
//console.log(height);
if (height >= limit) {
if (!mainChildren[i2 + 1]) {
var n = document.createElement("div");
n.classList.add("page");
main.appendChild(n);
}
mainChildren[i2 + 1].prepend(divChildren[i]);
divChildren[i].remove();
}
}
}
}, 100);
function pasteHtmlAtCaret(html, selectPastedContent) {
var sel, range;
if (window.getSelection) {
// IE9 and non-IE
sel = window.getSelection();
if (sel.getRangeAt && sel.rangeCount) {
range = sel.getRangeAt(0);
range.deleteContents();
// Range.createContextualFragment() would be useful here but is
// only relatively recently standardized and is not supported in
// some browsers (IE9, for one)
var el = document.createElement("div");
el.innerHTML = html;
var frag = document.createDocumentFragment(),
node, lastNode;
while ((node = el.firstChild)) {
lastNode = frag.appendChild(node);
}
var firstNode = frag.firstChild;
range.insertNode(frag);
// Preserve the selection
if (lastNode) {
range = range.cloneRange();
range.setStartAfter(lastNode);
if (selectPastedContent) {
range.setStartBefore(firstNode);
} else {
range.collapse(true);
}
sel.removeAllRanges();
sel.addRange(range);
}
}
} else if ((sel = document.selection) && sel.type != "Control") {
// IE < 9
var originalRange = sel.createRange();
originalRange.collapse(true);
sel.createRange().pasteHTML(html);
if (selectPastedContent) {
range = sel.createRange();
range.setEndPoint("StartToStart", originalRange);
range.select();
}
}
}
var keymap = {
49: {
t: "h1",
x: "Heading level 1"
},
50: {
t: "h2",
x: "Heading level 2"
},
51: {
t: "h3",
x: "Heading level 3"
},
52: {
t: "h4",
x: "Heading level 4"
},
53: {
t: "h5",
x: "Heading level 5"
},
54: {
t: "h6",
x: "Heading level 6"
},
78: {
t: "div",
x: "Normal text"
},
73: {
t: "i",
x: "italics",
i: true
},
66: {
t: "b",
x: "bold text",
i: true
},
85: {
t: "u",
x: "underlined text",
i: true
}
};
onkeydown = function(e) {
var e = e || window.event; // for IE to cover IEs window event-object
console.log(e);
if (e.altKey && keymap[e.keyCode]) {
//mainChildren[mainChildren.length - 1].appendChild()
pasteHtmlAtCaret("<" + keymap[e.keyCode].t + ">" + keymap[e.keyCode].x + "</" + keymap[e.keyCode].t + ">");
var node = document.createElement("div");
getSelection().getRangeAt(0).insertNode(node);
//if(keymap[e.keyCode].t.match(/^h\d$/)){
node.innerText = "Continue typing...";
//}else{
// \t 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 = "";
return false;
}
};* {
margin: 0;
padding: 0;
outline: none;
transition: 0.15s all;
}
.page {
height: 500px;
margin: 2%;
width: 96%;
box-sizing: border-box;
background: white;
box-shadow: 0px 0px 6px 7px white;
}
p {
padding: 1em 0;
}
main,
body {
background: black;
}<main contenteditable="true">
<div class="page">
<div>Start typing here!</div>
<div>Use alt+1 for biggest heading, alt+2 for bigger heading, alt+3 for big heading, etc. Use alt+b for bold, alt+i for italics, and alt+u for underline.</div>
</div>
</main>
嘿@Mujtaba安诚，欢迎计算器！ 你问过，所以**是的，这是可能的。**我会为你工作。 – programmer5000