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

【问题标题】：How to make a bold button for an editable div in react.js如何在 react.js 中为可编辑的 div 制作粗体按钮
【发布时间】：2020-12-25 20:40:52
【问题描述】：

我想在 react.js 中使用 contenteditable 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;

【问题讨论】：

标签： reactjs contenteditable execcommand

【解决方案1】：

道具区分大小写。重构 onclick 到 onClick 和 contenteditable 到 contentEditable 并且这个实现应该可以工作

【讨论】：