使用JavaScript实现一个简单的富文本编辑器_javascript UI组件

<div id="editor-toolbar">
  <button data-command="bold">加粗</button>
  <button data-command="italic">斜体</button>
  <button data-command="underline">下划线</button>
  <button data-command="createlink" data-prompt="输入链接地址:">插入链接</button>
  <button data-command="insertimage" data-prompt="输入图片URL:">插入图片</button>
</div>
<div id="editor" contenteditable="true"><br></div>

document.querySelectorAll('#editor-toolbar button').forEach(button => {
  button.addEventListener('click', function() {
    const command = this.dataset.command;
    let arg = null;

    if (this.dataset.prompt) {
      arg = prompt(this.dataset.prompt);
    }

    if (command && arg !== null) {
      document.execCommand(command, false, arg);
    } else if (command) {
      document.execCommand(command);
    }

    document.getElementById('editor').focus();
  });
});

#editor {
  border: 1px solid #ccc;
  padding: 10px;
  min-height: 200px;
  font-family: Arial, sans-serif;
  line-height: 1.5;
}
#editor-toolbar {
  margin-bottom: 5px;
}
button {
  padding: 5px 10px;
  margin-right: 5px;
}