API execCommand 过时了，该用什么替代？

Question

最近在做一个简谱编辑器，我现在就觉得是个个性化定制的富文本编辑器。

思路是 <div contenteditable="true"> 然后配合 document.execCommand 来实现。
比如我先运行以下代码：

      document.execCommand('justifyCenter', 'false', null );
      document.execCommand('Bold', 'false', null);
      document.execCommand('fontSize', 'false', 7);

之后输入的文字就是居中，加粗的大号字体了。

但是有几个问题：

1，如果想在输入框添加默认内容，那么默认内容的样式怎么调整？而且光标是在默认内容前面，怎么调整到指定位置？

2.我的字体都已经修改过了，输入的也是我修改过后的字体，但是光标的大小没有改变，只有在输入新内容后才会发生改变，这个感觉很不友好，有什么解决办法吗？

3，该API 虽然还能用，但IDE 提示已经是过时的API 了，有更好用的新API 吗？或者有什么其他的更好的实现方案？

Answer 1

1. 因为 document.execCommand 这个API就不是一个标准的API。只不过因为其它浏览器为了做兼容而去了做兼容支持。
2. 不再被支持的主要原因就是安全性，可以从MDN的文档上面看到 Document.execCommand() - Web APIs | MDN
3. 替代品现在应该没有。但是一时半会 document.execCommand 也不会直接不能使用，毕竟浏览器也得考虑现在大部分历史遗留项目的兼容问题。
4. 个人开发富文本编辑器还是一个很困难的事情，不过应该是可以基于现在一些已经成熟的开源富文本编辑器去做一些扩展来支持你的需求，这样实现起来会更容易一些。

Answer 2

Input Events Level 2

但是资料相当的少https://w3c.github.io/input-e...

Answer 3

这是我目前能找到的最好的回答了。。。


原文出处:https://qa.1r1g.com/sf/ask/42...
我先去学习一下Content Editable和Input Events
期待有大佬给出更好的解决方案。

Answer 4

自己实现，最重要的就是光标处理。可以看slate的实现。