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

Question

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

Answer 1

草稿在您可以使用的编辑器上设置了几个 class 名称。这是一个（不全面的）列表：

.DraftEditor-root
.DraftEditor-editorContainer
.public-DraftEditor-内容
.public-DraftEditorPlaceholder-root
.public-DraftEditorPlaceholder-inner
.public-DraftStyleDefault-块

Here's a fiddle 显示它们。这是 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;
}

Draft 还将根据文本对齐方式等输出更多 class 名称。我鼓励您检查元素，例如Chrome DevTools 查看可用的内容。

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

How do i design the draft-js editor itself?

draftjs