document.execCommand()的用法小结-前端开发

标题：document.execCommand()的用法小结

标题：document.execCommand()的用法小结

简介

document.execCommand() 是一个可以对富文本编辑器进行操作的 JavaScript API。它可用于设置文本样式、格式化或插入内容等操作。它最初在 Internet Explorer 5.5 中引入，但现在大多数主流浏览器都支持这个 API 了。


语法
document.execCommand(command, showUI, value);

命令有许多，这里列出常用的命令：
- bold - 加粗
- italic - 斜体
- underline - 下划线
- removeFormat - 移除格式
- foreColor - 字体颜色
- backColor - 背景色
- justifyLeft - 文本左对齐
- justifyCenter - 文本居中
- justifyRight - 文本右对齐
- insertImage - 插入图片
- createLink - 创建链接

参数说明：
- command：命令名称
- showUI：是否显示对话框，一般为 false
- value：命令相关的值，例如指定字体颜色或插入图片链接

示例
以下是两个常见的示例。
示例一：在富文本编辑器中插入图片
<!-- HTML代码 -->
<div contenteditable="true" id="editor">
  在此处输入文本....<br>
  <img src="https://www.example.com/images/pic.jpeg">
</div>
<script>
  // JavaScript代码
  const editor = document.getElementById('editor');
  editor.addEventListener('paste', function(event) {
    event.preventDefault(); // 阻止默认粘贴操作
    const image = event.clipboardData.items[0].getAsFile(); // 获取图片文件
    const reader = new FileReader(); // 创建一个 FileReader
    reader.readAsDataURL(image); // 将文件转换为 base64 格式
    reader.onload = function() {
      document.execCommand('insertImage', false, this.result); // 插入图片
    }
  });
</script>

以上示例中，我们在 contenteditable 元素上添加了粘贴事件监听器，以捕获用户的粘贴操作。当用户粘贴一个图片时，我们使用 FileReader 对象读取图片文件，并将其转换为 base64 格式。最后，我们通过 execCommand() 方法将 base64 格式的图片插入到富文本编辑器中。
示例二：在富文本编辑器中创建链接
<!-- HTML代码 -->
<div contenteditable="true" id="editor">
  在此处输入文本....
</div>
<button id="create-link">创建链接</button>
<script>
  // JavaScript代码
  const editor = document.getElementById('editor');
  const createLinkBtn = document.getElementById('create-link');
  createLinkBtn.addEventListener('click', function() {
    const url = prompt('请输入链接地址:', 'http://');
    document.execCommand('createLink', false, url); // 创建链接
  });
</script>

以上示例中，我们给富文本编辑器添加了一个按钮和一个单击事件监听器来创建链接。当用户单击按钮时，我们通过 prompt() 方法弹出一个对话框，要求用户输入链接 URL。最后，我们通过 execCommand() 方法创建链接并将其插入到富文本编辑器中。