我有两个编辑器实例。 一个是可编辑的 第二个只读,用于预览用户输入的内容 我在这些编辑器之间复制了编辑器状态 - 没有任何问题 但我想当第一个编辑器为空时隐藏第二个编辑器。我正在尝试类似的方法,但它总是返回 false
...
function onChange(editorState) {
console.log(editorState.isEmpty())
}
function Editor() {
...
return (
<>
<LexicalComposer initialConfig={editorConfig}>
<ToolbarPlugin />
<RichTextPlugin
contentEditable={<ContentEditable className="editor-input" />}
placeholder={<Placeholder />}
ErrorBoundary={LexicalErrorBoundary}
/>
<OnChangePlugin onChange={onChange} />
<LexicalComposer />
)
}
最佳答案
不幸的是,目前有几种不同的方法可以做到这一点,具体取决于您所说的“空”的含义。您可以使用 EditorState.isEmpty,但这是检查 _nodeMap 是否仅包含单个节点(根)并且选择是否为空 - 所以它实际上是关于空的,因为 EditorState 处于相同的状态如果它刚刚被初始化。然而,这可能不是您想要的 - 通常,视觉上空的编辑器将有一个带有单个 ParagraphNode 子级的 RootNode,并且您可能会或可能不关心 Selection 是否为空。因此,您可以考虑使用 ElementNode.isEmpty:
$getRoot().isEmpty()
这会检查 RootNode 是否有 0 个子节点。再说一遍,在典型的编辑器中,在很多情况下您希望它返回 true,这可能会返回 false(例如,如果编辑器在 RootNode 下使用空的 ParagraphNode 进行初始化)。所以,你可以这样做:
const isEditorEmpty = editorState.read(() => {
const root = $getRoot();
const isEmpty = root.getFirstChild().isEmpty() && root.getChildrenSize() === 1
return isEmpty;
});
但是,这不会解释空格 - 您可能也关心这一点。如果您想将只有空格的编辑器视为空,那么您可能需要使用 @lexical/text 中的 $isRootTextContentEmpty。您还可以查看此函数的实现,了解如何根据您的用例对其进行调整。
关于lexical - 如何检查编辑器是否为空?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/75493899/