Javascript contenteditable div在光标位置以像素设置字体大小
我有一个contenteditable div和一个combobx，用于选择各种字体大小 我已经用javascript实现了更改选定文本的字体大小，但不知道如何为下一次用户输入设置字体大小 比如说, 1） 在内容可编辑div中，用户首先选择字体大小，然后开始键入，然后应将所选字体大小应用于用户输入文本。 2）用户输入文本“hello”，现在他将字体大小更改为24px并键入“world”，然后单词“world”的字体大小应为24px。 下面是包含javascript代码的HTML页面，用于对选定文本应用字体大小Javascript contenteditable div在光标位置以像素设置字体大小,javascript,html,css,Javascript,Html,Css,我有一个contenteditable div和一个combobx，用于选择各种字体大小 我已经用javascript实现了更改选定文本的字体大小，但不知道如何为下一次用户输入设置字体大小 比如说, 1） 在内容可编辑div中，用户首先选择字体大小，然后开始键入，然后应将所选字体大小应用于用户输入文本。 2）用户输入文本“hello”，现在他将字体大小更改为24px并键入“world”，然后单词“world”的字体大小应为24px。 下面是包含javascript代码的HTML页面，用于对选定文
函数GetNextLeaf（节点）{
而（！node.nextSibling）{
node=node.parentNode；
如果（！节点）{
返回节点；
}
}
var leaf=node.nextSibling；
while（leaf.firstChild）{
叶=叶。第一个孩子；
}
回叶；
}
函数GetPreviousLeaf（节点）{
而（！node.previousSibling）{
node=node.parentNode；
如果（！节点）{
返回节点；
}
}
var leaf=node.previousSibling；
while（leaf.lastChild）{
leaf=leaf.lastChild；
}
回叶；
}
//如果元素的文本内容仅包含空格，则不需要着色
函数IsTextVisible（文本）{
对于（变量i=0；i=text.length）{
//避免不必要的跨度元素
ColorizeLeaf（节点、大小）；
返回；
}
var part1=text.substring（0，from）；
var part2=text.substring（从，到）；
var part3=text.substring（to，text.length）；
var parentNode=node.parentNode；
var nextSibling=node.nextSibling；
parentNode.removeChild（节点）；
如果（part1.length>0）{
var textNode=document.createTextNode（part1）；
parentNode.insertBefore（textNode，nextSibling）；
}
如果（第2部分长度>0）{
var span=document.createElement（“span”）；
//span.style.color=颜色；
span.style.fontSize=大小+“px”；
var textNode=document.createTextNode（part2）；
span.appendChild（textNode）；
parentNode.insertBefore（span，nextSibling）；
}
如果（第3部分长度>0）{
var textNode=document.createTextNode（part3）；
parentNode.insertBefore（textNode，nextSibling）；
}
}
函数ColorizeNode（节点，大小）{
var childNode=node.firstChild；
if（！childNode）{
ColorizeLeaf（节点、大小）；
返回；
}
while（childNode）{
//存储子节点的下一个同级，因为着色会修改DOM结构
var nextSibling=childNode.nextSibling；
ColorizeNode（子节点，大小）；
childNode=nextSibling；
}
}
函数ColorizeNodeFromTo（节点、大小、从、到）{
var childNode=node.firstChild；
if（！childNode）{
colorizelaffromto（节点、大小、从、到）；
返回；
}
for（var i=from；i<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function GetNextLeaf(node) {
while (!node.nextSibling) {
node = node.parentNode;
if (!node) {
return node;
}
}
var leaf = node.nextSibling;
while (leaf.firstChild) {
leaf = leaf.firstChild;
}
return leaf;
}
function GetPreviousLeaf(node) {
while (!node.previousSibling) {
node = node.parentNode;
if (!node) {
return node;
}
}
var leaf = node.previousSibling;
while (leaf.lastChild) {
leaf = leaf.lastChild;
}
return leaf;
}
// If the text content of an element contains white-spaces only, then does not need to colorize
function IsTextVisible(text) {
for (var i = 0; i < text.length; i++) {
if (text[i] != ' ' && text[i] != '\t' && text[i] != '\r' && text[i] != '\n')
return true;
}
return false;
}
function ColorizeLeaf(node, size) {
if (!IsTextVisible(node.textContent))
return;
var parentNode = node.parentNode;
// if the node does not have siblings and the parent is a span element, then modify its color
if (!node.previousSibling && !node.nextSibling) {
if (parentNode.tagName.toLowerCase() == "span") {
//parentNode.style.color = color;
parentNode.style.fontSize = size + "px";
return;
}
}
// Create a span element around the node
var span = document.createElement("span");
//span.style.color = color;
span.style.fontSize = size + "px";
var nextSibling = node.nextSibling;
parentNode.removeChild(node);
span.appendChild(node);
parentNode.insertBefore(span, nextSibling);
}
function ColorizeLeafFromTo(node, size, from, to) {
var text = node.textContent;
if (!IsTextVisible(text))
return;
if (from < 0)
from = 0;
if (to < 0)
to = text.length;
if (from == 0 && to >= text.length) {
// to avoid unnecessary span elements
ColorizeLeaf(node, size);
return;
}
var part1 = text.substring(0, from);
var part2 = text.substring(from, to);
var part3 = text.substring(to, text.length);
var parentNode = node.parentNode;
var nextSibling = node.nextSibling;
parentNode.removeChild(node);
if (part1.length > 0) {
var textNode = document.createTextNode(part1);
parentNode.insertBefore(textNode, nextSibling);
}
if (part2.length > 0) {
var span = document.createElement("span");
//span.style.color = color;
span.style.fontSize = size + "px";
var textNode = document.createTextNode(part2);
span.appendChild(textNode);
parentNode.insertBefore(span, nextSibling);
}
if (part3.length > 0) {
var textNode = document.createTextNode(part3);
parentNode.insertBefore(textNode, nextSibling);
}
}
function ColorizeNode(node, size) {
var childNode = node.firstChild;
if (!childNode) {
ColorizeLeaf(node, size);
return;
}
while (childNode) {
// store the next sibling of the childNode, because colorizing modifies the DOM structure
var nextSibling = childNode.nextSibling;
ColorizeNode(childNode, size);
childNode = nextSibling;
}
}
function ColorizeNodeFromTo(node, size, from, to) {
var childNode = node.firstChild;
if (!childNode) {
ColorizeLeafFromTo(node, size, from, to);
return;
}
for (var i = from; i < to; i++) {
ColorizeNode(node.childNodes[i], size);
}
}
var font_size = 14;
var selection_range;
function ColorizeSelection(size) {
if (window.getSelection) { // all browsers, except IE before version 9
var selectionRange = window.getSelection();
if (selectionRange.isCollapsed) {
font_size = size;
document.getElementById("editor").addEventListener("keypress", clickHandler);
selection_range = selectionRange;
}
else {
var range = selectionRange.getRangeAt(0);
// store the start and end points of the current selection, because the selection will be removed
var startContainer = range.startContainer;
var startOffset = range.startOffset;
var endContainer = range.endContainer;
var endOffset = range.endOffset;
// because of Opera, we need to remove the selection before modifying the DOM hierarchy
selectionRange.removeAllRanges();
if (startContainer == endContainer) {
ColorizeNodeFromTo(startContainer, size, startOffset, endOffset);
}
else {
if (startContainer.firstChild) {
var startLeaf = startContainer.childNodes[startOffset];
}
else {
var startLeaf = GetNextLeaf(startContainer);
ColorizeLeafFromTo(startContainer, size, startOffset, -1);
}
if (endContainer.firstChild) {
if (endOffset > 0) {
var endLeaf = endContainer.childNodes[endOffset - 1];
}
else {
var endLeaf = GetPreviousLeaf(endContainer);
}
}
else {
var endLeaf = GetPreviousLeaf(endContainer);
ColorizeLeafFromTo(endContainer, size, 0, endOffset);
}
while (startLeaf) {
var nextLeaf = GetNextLeaf(startLeaf);
ColorizeLeaf(startLeaf, size);
if (startLeaf == endLeaf) {
break;
}
startLeaf = nextLeaf;
}
}
}
}
else {
// Internet Explorer before version 9
alert("Your browser does not support this example!");
}
}
function pasteHtmlAtCaret(html) {
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
// non-standard and not supported in all 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);
}
range.insertNode(frag);
// Preserve the selection
if (lastNode) {
range = range.cloneRange();
range.setStartAfter(lastNode);
range.collapse(lastNode);
sel.removeAllRanges();
sel.addRange(range);
}
}
} else if (document.selection && document.selection.type != "Control") {
// IE < 9
document.selection.createRange().pasteHTML(html);
}
}
var clickHandler = function (event) {
document.getElementById("editor").removeEventListener("keypress", clickHandler);
updateFontSizeForNewText(event);
};
function updateFontSizeForNewText(e) {
var timestamp = new Date().getUTCMilliseconds();
var key="";
if (isValidKeyPress(e)) {
event.preventDefault();
key = e.key;
var span = document.createElement("span");
span.id = timestamp;
var txt = document.createTextNode(key);
span.style.fontSize = font_size + "px";
span.appendChild(txt);
var wrap = document.createElement('div');
wrap.appendChild(span.cloneNode(true));
pasteHtmlAtCaret(wrap.innerHTML);
}
}
function isValidKeyPress(e) {
var keycode = e.keyCode;
var valid =
(keycode > 47 && keycode < 58) || // number keys
(keycode > 64 && keycode < 91) || // letter keys
(keycode > 95 && keycode < 112) || // numpad keys
(keycode > 185 && keycode < 193) || // ;=,-./` (in order)
(keycode > 218 && keycode < 223); // [\]' (in order)
return valid;
}
</script>
</head>
<body>
Select some content on this page and use the buttons below to colorize the selected text.<br /><br />
<button onclick="ColorizeSelection (12);">Font 12</button>
<button onclick="ColorizeSelection (14);">Font 14</button>
<button onclick="ColorizeSelection (18);">Font 18</button>
<button onclick="ColorizeSelection (28)">Font 28</button>
<!--<button onclick="ColorizeSelection ('#FF0000');">Set color to red!</button>
<button onclick="ColorizeSelection ('#0000FF');">Set color to blue!</button>-->
<br />
<div>Some text for selection</div>
<div contentEditable="true" id="editor"><b>Some bold text for selection.</b></div>
<ul>
<li>One </li>
<li>Two </li>
<li>Three </li>
<li>Four </li>
</ul>
</body>
</html>