如何构建自己的所见即所得编辑器

你见过所见即所得的编辑器吗？今天我展示的是所见即所得编辑器的简易版本。

如果您熟悉 HTML 和 JavaScript，那么您就可以开始了。

那么让我们开始我们的简单版本，
我不会解释所有内容，但会解释重要的事情

首先，我们需要向 HTML 元素添加contentEditable属性

 <div class="editor" contenteditable>
      <h1>Simple Html editor</h1>
      <p>Good to start</p>
    </div>

现在， div 元素是可编辑的，并且我们的 HTML 文档公开了execCommand。

让我们看看什么是 execCommand

document.execCommand(cmd,defaultUI,value);

execCommand 需要三个参数

cmd：这意味着我们必须告诉需要执行哪个命令。
例如：'bold'命令列表

defaultUI：是否显示默认用户界面，布尔值。

值：我们需要向一些命令添加值参数。
例如：在 createLink cmd 中，我们需要添加一个引用链接中 href 属性的值。

因此，让我们在实践中使用 execCommand

现在我正在创建按钮 HTML 元素并附加一个事件监听器。

  <button class="tool-items fa fa-bold" 
  onclick="document.execCommand('bold', false, '');">
 </button>

现在我们只构建粗体命令查看下面的完整版本。