window.getSelection「reselect」/「refresh」

我嘗試爲可編輯的html元素構建工具欄。我有一些帶有「大膽」，「斜體」等的工具欄。window.getSelection「reselect」/「refresh」

當用戶被選中任何文本，並點擊「大膽」我檢查是否存在跨度和插入，如果不是。

let hasWrap = (selectionObject.node==='SPAN'); 

if(!isBold){ 

    this.addClassToSelection('bold', !hasWrap, selectionObject); 

} 

addClassToSelection(className, wrapSpan = false, selectionObject = {}){ 

if(wrapSpan){ 
    let wrapper = document.createElement('SPAN'); 
    wrapper.className = className; 
    wrapper.textContent = selectionObject.text; 

    selectionObject.range.deleteContents(); 
    selectionObject.range.insertNode(wrapper); 
}else{ 
    let selection = window.getSelection(); 
    selection.anchorNode.parentNode.classList.add(className); 
}

}

和它的作品。如果用戶將取消選擇文本並再次選擇，它也可以工作。

但是，當用戶添加粗體（和js插入跨度元素），然後再次點擊「粗體」刪除粗體。系統沒有檢測到「span」元素，因爲仍然記得舊的window.getSelection()。

我已經嘗試過直接使用window.getSelection()而沒有用方法換行，但我仍然看到「p」或「div」作爲父節點。「span」是在再次選擇該文本之後。

如何「重新選擇」此文本以檢測跨度，但無需用戶操作。

我想什麼

再度用戶選擇文本
用戶在點擊「大膽」按鈕，在跨度
系統自動換行與大膽類
用戶點擊「加粗」按鈕和window.getSelection檢測插入點3中的此跨度

我在ES6中使用React，我想使用純js而不使用jQuery（wrap ，解包）。

來源

2017-03-01 jaroApp

<div contenteditable="true">Make bold with Ctrl+b</div>

會好得多使用document.execCommand - window.getSelection更難

HTML

<div contenteditable="true">Some Text</div>

JS - 當需要自定義事件處理

document.execCommand('bold',false,true);

看到的命令列表在這裏：https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand

和「如何使用」的位置：http://codepen.io/netsi1964/full/QbLLGW/

來源

2017-03-01 09:09:44 levi

感謝。在代碼片斷中，ctrl/cmd + b不起作用。 dow document.exectCommand我可以使大膽的所有div，p。對我而言，需要的是選定的文字也不要強壯的元素只有一個跨度和許多類像下劃線，粗體，斜體不設置許多html元素。這不是我的想法，但客戶端。這就是爲什麼我想要選擇窗口的原因。 – jaroApp

document.execCommand僅適用於所選文本 – levi

它的工作原理，謝謝。在客戶端需求是span.bold而不是b，但也許他會改變它。它適用於鏈接的所有元素。 – jaroApp

window.getSelection「reselect」/「refresh」

回答

相關問題