如何使用原始文本处理在内容可编辑 div 中制作粗体文本

Question

我正在尝试使用文本处理而不是使用execute.commands来制作字体粗体文本。 因为我想创建另一个不在execute.command功能。

这是代码：

 var selectedRange; var selectedText = ''; let editor = document.getElementById('editor') String.prototype.replaceBetween = function(start, end, what) { return this.substring(0, start) + what + this.substring(end); }; function actionBold(e){ let input = e.getElementsByTagName('input')[0] if(input != null){ input.checked = !input.checked } if(selectedText.length != 0){ let edited = editor.innerHTML.replaceBetween(selectedRange.start, selectedRange.end, `<b>${selectedText}</b>`) editor.innerHTML = edited } } function getSelectionCharacterOffsetWithin(element) { var start = 0; var end = 0; var doc = element.ownerDocument || element.document; var win = doc.defaultView || doc.parentWindow; var sel; if (typeof win.getSelection != "undefined") { sel = win.getSelection(); if (sel.rangeCount > 0) { var range = win.getSelection().getRangeAt(0); var preCaretRange = range.cloneRange(); preCaretRange.selectNodeContents(element); preCaretRange.setEnd(range.startContainer, range.startOffset); start = preCaretRange.toString().length; preCaretRange.setEnd(range.endContainer, range.endOffset); end = preCaretRange.toString().length; } } else if ( (sel = doc.selection) && sel.type != "Control") { var textRange = sel.createRange(); var preCaretTextRange = doc.body.createTextRange(); preCaretTextRange.moveToElementText(element); preCaretTextRange.setEndPoint("EndToStart", textRange); start = preCaretTextRange.text.length; preCaretTextRange.setEndPoint("EndToEnd", textRange); end = preCaretTextRange.text.length; } return { start: start, end: end }; } function onMouseUp() { const sel = window.getSelection(); var arr = [] for (var i = 0, len = sel.rangeCount; i < len; ++i) { arr.push(sel.getRangeAt(i).cloneContents().textContent); } selectedText = arr.join(); selectedRange = getSelectionCharacterOffsetWithin(editor) }

 input{ display: none; } input:checked+svg{ background-color: rgb(194, 10, 10); fill: #fff; } label{ cursor: pointer; } #editor{ width: 50%; min-height: 40px; background-color: antiquewhite; }

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Test</title> <link rel="stylesheet" href="style.css"> </head> <body> <label onclick="actionBold(this); return false"> <input class="none" type="checkbox" name="0" checked> <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M15.6 10.79c.97-.67 1.65-1.77 1.65-2.79 0-2.26-1.75-4-4-4H7v14h7.04c2.09 0 3.71-1.7 3.71-3.79 0-1.52-.86-2.82-2.15-3.42zM10 6.5h3c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5h-3v-3zm3.5 9H10v-3h3.5c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5z"/><path d="M0 0h24v24H0z" fill="none"/></svg> </label> <div onmouseup="onMouseUp()" id="editor" contenteditable> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim omnis ea, voluptas maxime perspiciatis praesentium magni repellendus earum suscipit sint. Veritatis fuga adipisci accusantium similique distinctio vero tenetur ipsam fugiat.</p> </div> <script src="script.js"></script> </body> </html>

我能够获得选定的范围，并将选定的字符串替换为<b>标记以获得粗体。 但问题是 HTML 标签不计入范围，或者我不知道如何进一步处理。

我对开源库和高级库很满意，但我想研究它是如何工作的。 这就是我自己尝试的原因。

目前我正在使用原始文本处理。 谁能知道如何从逻辑上进行此操作以获得仅适用于粗体字体的成功文本编辑器？ 提前致谢。

Answer 1

我使用了Range API 中的以下方法

extractContents : 提取选定的内容，所以我们可以用粗体标签包装它。

insertNode ：将修改后的内容放回同一位置。

let editor = document.getElementById('editor');
var preCaretRange;

function actionBold(e){
    var bold = document.createElement('b'); // created bold tag
    bold.appendChild(preCaretRange.extractContents()); // extracting and wrapping the content with tag
    preCaretRange.insertNode(bold); // insert the modified content back

}

function onMouseUp() {
    var doc = editor.ownerDocument || editor.document;
    var win = doc.defaultView || doc.parentWindow;
    preCaretRange = win.getSelection().getRangeAt(0);
}

如何使用原始文本处理在内容可编辑 div 中制作粗体文本

问题描述

1 个解决方案

解决方案1
1 已采纳 2020-03-14 14:41:27

如何使用原始文本处理在内容可编辑 div 中制作粗体文本

问题描述

1 个解决方案

解决方案1 1 已采纳 2020-03-14 14:41:27

解决方案1
1 已采纳 2020-03-14 14:41:27