Как можно изменить поведение свойства contentEditable?

Question

Фидель

react

Как можно изменить поведение свойства contentEditable?

Здравствуйте!

Можно ли изменить поведение атрибута contentEditable так, чтобы текст добавлялся только в дочерний элемент (тег p), если атрибут задается для родительского элемента? Возможно ли это или нужно задать атрибут contentEditable именно для тега p? Есть ли способы перехватить введенный текст и передать его дочернему элементу?

Если у вас есть полезная статья на эту тему, я буду очень благодарен за ее предоставление! Или можете посоветовать краткий способ реализации этого без использования сторонних библиотек.

<div className={styles.editorText} contentEditable={true}>
    <p></p>
</div>

20 октября 2023 г. 20:49

Ответы на вопрос 2

Похожие вопросы

Answer 1

Да, вы можете изменить поведение свойства contentEditable, чтобы текст добавлялся только в дочерний элемент (тег p), даже если атрибут задается для родительского элемента. Для этого вам нужно использовать JavaScript для перехвата введенного текста и перемещения его в дочерний элемент.

Вот пример функции, которая сделает это:

```javascript
const editorText = document.querySelector('.editorText');
editorText.addEventListener('input', function(event) {
  const paragraph = editorText.querySelector('p');
  paragraph.textContent = event.target.textContent;
  event.target.textContent = '';
});
```

В этом примере мы используем метод `addEventListener` для прослушивания события `input` на элементе с классом `editorText`. Когда пользователь вводит текст, мы находим дочерний элемент `p` и устанавливаем его содержимое равным введенному тексту. Затем мы очищаем содержимое родительского элемента.

Вы также можете использовать этот код в React компоненте:

```jsx
import React, { useState } from 'react';
import styles from './styles.module.css';

function MyEditor() {
  const [content, setContent] = useState('');

  const handleInput = (event) => {
    const paragraph = event.currentTarget.querySelector('p');
    paragraph.textContent = event.target.textContent;
    event.target.textContent = '';
    setContent(event.target.textContent);
  }

  return (
    <div className={styles.editorText} onInput={handleInput} contentEditable={true}>
      <p>{content}</p>
    </div>
  );
}

export default MyEditor;
```

В этом примере мы используем хук `useState` для хранения содержимого родительского элемента. Когда пользователь вводит текст, мы обновляем состояние и выводим его в дочернем элементе `p`.

Надеюсь, это поможет вам изменить поведение свойства contentEditable и достичь желаемого результата!

Answer 2

Поведение нельзя изменить, но можно следить за его изменениями и вносить корректировки, если нужно.