如何为 react.js 中的可编辑 div 制作粗体按钮

Question

我想在 react.js 中从头开始制作一个内容可编辑的 div 编辑器 div 是可编辑的，但如何添加按钮使所选文本变为粗体？我尝试了“document.execCommand('bold', false, null);”，但无法正常工作。

import React from 'react';

const Editor = () => {
    return (
        <div className="editor">
            <div className="toolbar">
                <button onclick={(e) => {
                    document.execCommand('bold', false, null);
                    e.preventDefault();
                }}>b</button>
            </div>
            <div className="editor-content" contenteditable>
                <h1>Test</h1>
                <p>Test</p>
            </div>
        </div >
    )
}

export default Editor;

Answer 1

道具是case-sensitive。将 onclick 重构为 onClick，将 contenteditable 重构为 contentEditable，此实现应该有效

如何为 react.js 中的可编辑 div 制作粗体按钮

How to make a bold button for an editable div in react.js

contenteditable

execcommand

reactjs