我正在嘗試通過(guò)文本處理而不是使用execute.commands. 因?yàn)槲蚁胫谱髁硪粋€(gè)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>標(biāo)簽替換選定的字符串以獲得粗體字體。但問(wèn)題是 HTML 標(biāo)簽不計(jì)入范圍，我也不知道如何進(jìn)一步處理。我對(duì)開源庫(kù)和高級(jí)庫(kù)很滿意，但我想研究它是如何工作的。這就是為什么我自己嘗試一下。目前我正在使用原始文本處理。誰(shuí)能知道如何按照邏輯進(jìn)行此操作以獲得僅粗體字體的成功文本編輯器？提前致謝。
1 回答
牛魔王的故事
TA貢獻(xiàn)1830條經(jīng)驗(yàn) 獲得超3個(gè)贊
我使用了Range API中的以下方法
extractContents：提取所選內(nèi)容，因此我們可以用粗體標(biāo)簽將其包裹起來(lái)。
insertNode：將修改后的內(nèi)容放回原位置。
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 關(guān)注
- 116 瀏覽
添加回答
舉報(bào)
0/150
提交
取消