editor | 如何寫一個(gè)自己的 editor ?

首先，我說(shuō)的這些都是憑感覺，自己沒有實(shí)踐過(guò)的，如果想穩(wěn)一點(diǎn)還是建議看那些有名氣的開源項(xiàng)目。。。
然后改變選擇的文本，注意，我下面的方法很可能只能改文本，不能跨節(jié)點(diǎn)，將下面的代碼復(fù)制到控制臺(tái)中，選擇一段文本，然后在控制臺(tái)按回車，效果如圖

var { focusNode, focusOffset, anchorOffset } = window.getSelection();
var range = document.createRange();
range.setStart(focusNode, anchorOffset);
range.setEnd(focusNode, focusOffset);
range.deleteContents();
var title = document.createElement('h1');
title.appendChild(document.createTextNode('a title'));
range.insertNode(title);
range.detach();
range = null;

--------------------------我是分割線2--------------------------------------------------

哦，這樣啊，我分享這些開源編輯器是希望能幫助題主了解一下其他人選擇了什么方案，比如題主提出的如何選擇字串的問題，可以看看別人是怎么做的。

如果希望快速完成，選擇這些開源項(xiàng)目，自定義比較好。如果是為了學(xué)習(xí)當(dāng)然選擇一步一步自己完成，堅(jiān)持去鉆研他一定能搞定的。。。加油

關(guān)于問題一
可以 監(jiān)聽mousedown和mouseup，然后有這個(gè)使用window.getSelection()可以獲得選擇的一些信息。
https://developer.mozilla.org...

問題二、三
如果使用contenteditable，document.execCommand可以做一些，但是這個(gè)方法能實(shí)現(xiàn)的功能有限。。
https://developer.mozilla.org...
https://codepen.io/chrisdavid...

我也是小菜鳥一枚，希望能有大神來(lái)回復(fù)。。。

------------------------我是分割線----------------------------------------

額，我不會(huì)寫，但是提醒一下富文本編輯器是個(gè)坑，，，開源的有：

https://github.com/quilljs/quill 一個(gè)富文本編輯器
https://github.com/codemirror... 代碼編輯器
https://github.com/benweet/st... markdown編輯器
https://github.com/facebook/d... 基于react框架的富文本編輯器
https://github.com/tinymce/ti... 一個(gè)使用廣泛的富文本編輯器

這些要么是使用contenteditable，或者隱藏textarea標(biāo)簽，自己用dom模擬編輯器的操作。。。