我正在嘗試通過文本處理而不是使用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 };}我能夠獲取選定的范圍，并用<b>標簽替換選定的字符串以獲得粗體字體。但問題是 HTML 標簽不計入范圍，我也不知道如何進一步處理。我對開源庫和高級庫很滿意，但我想研究它是如何工作的。這就是為什么我自己嘗試一下。目前我正在使用原始文本處理。誰能知道如何按照邏輯進行此操作以獲得僅粗體字體的成功文本編輯器？提前致謝。
1 回答
牛魔王的故事
TA貢獻1830條經驗 獲得超3個贊
我使用了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);
}
- 1 回答
- 0 關注
- 122 瀏覽
添加回答
舉報
0/150
提交
取消