javascript 设置编辑器的初始状态

mpbci0fu  于 2023-01-29  发布在  Java
关注(0)|答案(2)|浏览(135)

我正在使用lexical,并希望设置编辑器的初始文本。
现在,我只是尝试硬编码初始文本,结果发现我不能只传递一个String。
它需要是JSON格式。
因此,我改为传递以下内容。

'{"text":"sample text"}'

但它抛出以下错误:
TypeError:无法读取未定义的属性(读取"type")
我哪里做错了?

function Placeholder() {
  return <div className="editor-placeholder">Enter some rich text...</div>;
}

const editorConfig = {

  // This is how I am trying to set initial value.
  // no errors if I remove this. I need this cos I need to set initial value.
  editorState: '{"text":"sample text"}',

  // other params
};

export default function Editor() {

  return (
    <LexicalComposer initialConfig={editorConfig}>
      <div className="editor-container">
        <ToolbarPlugin />
        <div className="editor-inner">
          <RichTextPlugin
            contentEditable={<ContentEditable className="editor-input" />}
            placeholder={<Placeholder />}
          />
          {/* other login components */}
        </div>
      </div>
    </LexicalComposer>
  );
}
qlckcl4x

qlckcl4x1#

我遇到了同样的问题。显然editorState可以被设置为一个函数:

const editorConfig = {
  editorState: () => {
    const root = $getRoot();
    root.clear();
    const p = $createParagraphNode();
    p.append($createTextNode("preloaded node"));
    root.append(p);
  }
};

我发现这个解决方案在词汇Playground来源:https://github.com/facebook/lexical/blob/main/packages/lexical-playground/src/App.tsx
下面是一个简化的示例:https://codesandbox.io/s/lexical-plain-playground-72pwge?file=/src/Editor.js:683-960

6pp0gazn

6pp0gazn2#

我在使用字符串化的词汇节点树时也遇到了这个问题。对于上下文,我的字符串化内容来自词汇Playground,具有“导出”功能。
它将所需的内容 Package 到{editorState:{...}}中,似乎这不是初始化LexicalComposer的标准方式,因此在移除此 Package 器以直接获取{root:{...}}后,它可以正常工作:)

相关问题