document.execCommand()的用法小结

示例

以下是两个常见的示例。

示例一：在富文本编辑器中插入图片

<!-- 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() 方法创建链接并将其插入到富文本编辑器中。