contentEditable 实现可编辑区域

0背景

最近看豆包的时候，发现他的代码写 AI 编程模块如下：

借助的是 contentEditable 来实现的，操作比较友好，可以随意输入可编辑数据，有类似于 placeholder 等属性。

如果我们开发大模型，免不了借鉴一下，下面基于 react 来封装一个使用 contentEditable 来实现的可编辑区域组件。

1实现重点

• 开启 contentEditable 后如何模拟 placeholder；
• 如何判断何时展示 placeholder、何时展示真实内容；
• 调整优化以及受控组件封装。

2完整组件代码

import React, { useState, useRef, useEffect } from 'react'

interface ContentEditablePromptProps {
  placeholder?: string
  className?: string
  value?: string
  onChange?: (value: string) => void
}

const ContentEditablePrompt: React.FC<ContentEditablePromptProps> = ({
  placeholder = '请输入',
  className = '',
  value = '',
  onChange
}) => {
  const contentEditableRef = useRef<HTMLDivElement>(null)
  const [isEmpty, setIsEmpty] = useState(true)
  const [internalValue, setInternalValue] = useState(value)

  useEffect(() => {
    if (contentEditableRef.current) {
      contentEditableRef.current.textContent = value
      setIsEmpty(value.trim() === '')
    }
  }, [])

  const updateContent = (newValue: string) => {
    if (!contentEditableRef.current) return

    setInternalValue(newValue)

    if (onChange) {
      onChange(newValue)
    }

    const isNowEmpty = newValue.trim() === ''
    setIsEmpty(isNowEmpty)

    if (isNowEmpty && contentEditableRef.current.innerHTML === '<br>') {
      contentEditableRef.current.innerHTML = ''
    }
  }

  const handleInput = () => {
    if (!contentEditableRef.current) return
    updateContent(contentEditableRef.current.textContent || '')
  }

  const handleBlur = () => {
    if (!contentEditableRef.current) return

    const newValue = contentEditableRef.current.textContent || ''
    updateContent(newValue)

    if (contentEditableRef.current.textContent !== internalValue) {
      contentEditableRef.current.textContent = internalValue
    }
  }

  useEffect(() => {
    if (!contentEditableRef.current) return
    if (value !== internalValue) {
      setInternalValue(value)
      contentEditableRef.current.textContent = value
      setIsEmpty(value.trim() === '')
    }
  }, [value])

  return (
    <div
      ref={contentEditableRef}
      className={`p-2 px-3 w-fit rounded-2xl flex items-center ${
        isEmpty
          ? 'after:content-[attr(data-placeholder)] after:tracking-[1px] bg-[#EEF6FF] font-bold text-[#007DFA] word-spacing-2'
          : 'bg-[#EEF6FF] font-bold text-[#007DFA] word-spacing-2'
      } ${className}`}
      contentEditable
      data-placeholder={placeholder}
      onInput={handleInput}
      onBlur={handleBlur}
      suppressContentEditableWarning
    />
  )
}

export default ContentEditablePrompt

组件逻辑拆解

3使用示例

<EditableArea placeholder='预设提取项' value='' onChange={onChangeValue}></EditableArea>

4结束

以上即基于 contentEditable 的可编辑区域组件完整实现，可借鉴用于大模型产品的输入模块。