我如何设计draft-js编辑器本身？

Question

我正在尝试学习如何使用draftjs，但我无法弄清楚如何将css应用于编辑器本身。我在文档中读到可以设计内容块，但我正在寻找一种设计编辑器的方法。

Answer 1

草稿在编辑器上设置了一些可以使用的类名。这是一个（非全面的）清单：

• .DraftEditor根
• .DraftEditor-editorContainer
• 。公共-DraftEditor含量
• 。公共-DraftEditorPlaceholder根
• 。公共-DraftEditorPlaceholder-内
• 。公共-DraftStyleDefault块

Here's a fiddle展示他们。这里是小提琴中使用的风格：

.DraftEditor-root,
.DraftEditor-editorContainer,
.public-DraftEditor-content {
  padding: 5px;
  margin: 5px;
}

.public-DraftEditorPlaceholder-root {
  margin-top: 28px;
  margin-left: 25px;
}

.public-DraftEditorPlaceholder-inner {
  background: rgba(0, 0, 0, .5);
  color: white;
}

.DraftEditor-root {
  border: 1px solid black;
}

.public-DraftEditor-content {
   border: 1px solid blue;
}

.DraftEditor-editorContainer {
  border: 1px solid green;
}

.public-DraftStyleDefault-block {
  border: 1px solid red;
  margin: 5px 0;
}

草稿还会输出一些更多的类名，具体取决于文本对齐等。我建议你检查一下这些元素。 Chrome DevTools可以查看可用的内容。