自己写一个类似知乎编辑器的编辑器（3）

吃完饭回办公室，放一首歌《can’t take my eyes off you》，戴上耳机，接着把昨天想写的富文本编辑器做完。

昨天已经搭好一个模型了。今天就是核心问题了：如何将div变成可编译的地方。html5给了一个借口，contentEditable="true"。把那个用来编辑的div加上这个属性就可以编辑了：

加上contenteditable="true"这个属性。

加上以后确实可以编辑了，不过当点击这个div的时候会出现烦人的高亮边框：

恼人的边框

这时候可以用css给屏蔽掉，为这个div加上outline:none;然后设置一下padding就相当相样子了。

有点像样了

下面就是一个JS的命令了。execcommand()命令，这个命令有三个参数，第一个参数是必须的，表示执行的命令；第二个参数和第三个参数是可选的，第二个参数是true/false，表示要不要弹出辅助选框，第三个参数是字符串，配合第二个参数使用的，后面会用到。用jquery给那三个按钮绑定上事件：

be-bold是那个加粗按钮，be-italic是那个斜体按钮

最开始自己看的时候没搞明白这到底怎么操作啊。后来看了MDN文档以后发现很简单，execCommand命令会自动寻找在编辑中的部分然后对它执行命令。

如果想知道execcommand的具体用法，可以去百度一下，一搜一大堆。

不过如果简单的设置以后点击了还是不管用，我发现如果用img图片做按钮点击就能正常工作，如果换成别的就不行。

在这里我要感谢郑任哲大神的提示，execcommand命令只对可拖动元素导致的失焦工作，对不可拖动元素产生的失焦不工作；说起来真是很拗口，不过看代码吧，把那个装着B的按钮（是个div）加上一个属性：draggable="true"就可以了：

draggable="true"

现在运行就正常了：

点击斜体按钮

点击加粗按钮

这样一个简单的知乎风格的编辑器就做完了。

剩下的部分就是我打算做的传图功能了，这个功能比较复杂，需要后台支持。

我的想法是，点击图片按钮的时候，会弹出一个面板，可以选择本地图片上传，也输入关键词，由编辑器给用户从图库里搜索出合适的图片，同时我希望每个人都可以有自己的账号，把自己曾经传过的图都保存到服务器上，并且自主选择是否对外人公开，如果公开，别人在编辑文章需要插图的时候就可以搜到你上传的图片。

这就是目前的想法。不过简单的编辑器算是做完了。这个笔记也就结束了。明天开始搞一下传图模块的原型。准备实现它。