editor | 如何寫一個自己的 editor ?

Question

我用太多套件，但是很多都有限制，或是一些我不需要的功能太多
我現在知道的 https://paper.dropbox.com/ 和 https://medium.com/
現在卡些問題是

問題1
怎麼樣像這兩個editor功能一樣
我圈起我要改變的字串後，可以浮現editor?

問題2
浮現editor後，能夠對圈起的字串做改變，例如加上 <h1> 或變粗體，加上 blockquote？
這種原理是甚麼？

問題3
像這種可以即時顯示HTML的EDITOR，應該是用 div標籤的 contenteditable 實現？

Answer 1

首先，我说的这些都是凭感觉，自己没有实践过的，如果想稳一点还是建议看那些有名气的开源项目。。。
然后改变选择的文本，注意，我下面的方法很可能只能改文本，不能跨节点，将下面的代码复制到控制台中，选择一段文本，然后在控制台按回车，效果如图

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--------------------------------------------------

哦，这样啊，我分享这些开源编辑器是希望能帮助题主了解一下其他人选择了什么方案，比如题主提出的如何选择字串的问题，可以看看别人是怎么做的。

如果希望快速完成，选择这些开源项目，自定义比较好。如果是为了学习当然选择一步一步自己完成，坚持去钻研他一定能搞定的。。。加油

关于问题一
可以 监听mousedown和mouseup，然后有这个使用window.getSelection()可以获得选择的一些信息。
https://developer.mozilla.org...

问题二、三
如果使用contenteditable，document.execCommand可以做一些，但是这个方法能实现的功能有限。。
https://developer.mozilla.org...
https://codepen.io/chrisdavid...

我也是小菜鸟一枚，希望能有大神来回复。。。

------------------------我是分割线----------------------------------------

额，我不会写，但是提醒一下富文本编辑器是个坑，，，开源的有：

https://github.com/quilljs/quill 一个富文本编辑器
https://github.com/codemirror... 代码编辑器
https://github.com/benweet/st... markdown编辑器
https://github.com/facebook/d... 基于react框架的富文本编辑器
https://github.com/tinymce/ti... 一个使用广泛的富文本编辑器

这些要么是使用contenteditable，或者隐藏textarea标签，自己用dom模拟编辑器的操作。。。