富文本编辑器的一二事

如何实现一个简单的富文本编辑器

步骤

  1. 首先需要一个普通的div标签元素

    1
    <div></div>

  2. 然后我想放着普通的disco在它内部编辑文本,添加contenteditable属性来实现

    1
    <div contenteditable="true"></div>

  3. 接着添加一个按钮,为了省事美观使用fontawesome的图标
  4. 添加按钮的响应事件,使用execCommand中的’createLink’命令来添加一个超链接

    1
    2
    3
    4
    btn.addEventListener('click', (e) => {
    url = prompt('请输入链接: ', 'http:\/\/')
    document.execCommand('createLink', false, url)
    })

    关于execCommand引用MDN的一段话

    当一个HTML文档切换到设计模式(designMode)时,文档对象暴露execCommand方法,该方法允许运行命令来操纵可编辑区域的内容。大多数命令影响文档的选择(粗体,斜体等),而其他命令插入新元素(添加链接)或影响整行(缩进)。当使用contentEditable时,调用execCommand()将影响当前活动的可编辑元素。

  5. 这样点击按钮输入链接点击确定即可在div元素内插入一段超链接
  6. 要想实现更多的功能,像下图这样,仅需使用execCommand中的各种命令即可,包含字体、背景色、删除、插入、对齐等各种操作。

    总结

因此,要实现一个富文本编辑器,关键在于:

  1. 使用contenteditable开启编辑模式
  2. 实现execCommand命令执行各种操作

除此之外,也可以使用以前的方法 - 通过一个iframe来实现。

文章目录
  1. 1. 步骤
  2. 2. 总结
|