具有类似于ms字

Question

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

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

我需要仅使用JavaScript，HTML和CSS将文本分成基于像素大小的行。

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

Answer 1

注释

这使用没有jQuery，CSS和HTML5的javascript。每个页面都是div，其类别为page，位于main元素内。

代码段：

＆＃13;

＆＃13;

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{
    //	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;
  }
};

＆＃13;

* {
  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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;