开发随笔:富文本编辑器简单原理

最新推荐文章于 2023-04-12 16:57:32 发布

月半叫做胖

最新推荐文章于 2023-04-12 16:57:32 发布

阅读量362

点赞数

分类专栏： React学习笔记前端学习文章标签：富文本编辑器 react 原理

本文链接：https://blog.csdn.net/qq_24724109/article/details/103885108

版权

本文探讨了富文本编辑器的工作原理，通过将`div`标签的`contentEditable`属性设为真，创建一个可编辑区域。利用`document.execCommand` API进行文本操作，介绍了如何在React中实现一个简单的富文本编辑器。

摘要由CSDN通过智能技术生成

1. 参考博文

富文本编辑器的简单原理

2. 所用API文档

mdn document.execCommand

3. 原理简述

通过将div标签设置其contentEditable之后会得到一个可编辑的区域，之后该区域就会获得一个类似

4. 简单实现代码

import React, {
    useRef, useState } from "react";
import "./styles.css";

export default function App() {
   
  const refContent = useRef(null);
  const uploadRef = useRef(null);
  const [content, setContent] = useState("");

  const execCmd = (cmd, value = null) => {
   
    document.execCommand