reactjs 词汇React获取降价值

uidvcgyl  于 2023-02-18  发布在  React
关注(0)|答案(1)|浏览(127)

我是新手。我想从lexical/react编辑器中得到降价值。我在我的项目中使用RichTextPlugin。但是我不能得到降价值。我怎样才能得到降价值呢?这是我的代码;

function Placeholder() {
    return <div className="editor-placeholder">Yazmaya başlayabilirsiniz...</div>;
}

const editorConfig = {
    // The editor theme
    namespace: "ArticleEditor",
    theme: ExampleTheme,
    // Handling of errors during update
    onError(error) {
        throw error;
    },
    // Any custom nodes go here
    nodes: [
        HeadingNode,
        ListNode,
        ListItemNode,
        QuoteNode,
        CodeNode,
        CodeHighlightNode,
        TableNode,
        TableCellNode,
        TableRowNode,
        AutoLinkNode,
        LinkNode
    ]
};

export default function Editor() {
    const onChange = (editorState) => {
        editorState.read(() => {
            // Read the contents of the EditorState here.
            const root = $getRoot();
            const selection = $getSelection();
        });
    }
    return (
        <LexicalComposer initialConfig={editorConfig}>
            <div className="editor-container border rounded-2">
                <div className="overflow-auto bg-100 position-relative">
                    <ToolbarPlugin/>
                </div>
                <div className="editor-inner border-top border-dashed">
                    <RichTextPlugin
                        contentEditable={<ContentEditable className="editor-input"/>}
                        placeholder={<Placeholder/>}
                        ErrorBoundary={LexicalErrorBoundary}
                    />
                    <OnChangePlugin onChange={onChange}/>
                    <HistoryPlugin/>
                    {/*<TreeViewPlugin/>*/}
                    {/*<AutoFocusPlugin/>*/}
                    <CodeHighlightPlugin/>
                    <ListPlugin/>
                    <LinkPlugin/>
                    <AutoLinkPlugin/>
                    <TablePlugin/>
                    <ListMaxIndentLevelPlugin maxDepth={7}/>
                    <MarkdownShortcutPlugin transformers={TRANSFORMERS}/>
                </div>
            </div>
        </LexicalComposer>
    );
}

onChange()函数中使用$getRoot()可以得到plain text形式的值。

myzjeezk

myzjeezk1#

根据词法文档,你可以使用markdown包将编辑器的节点转换为markdown:https://lexical.dev/docs/packages/lexical-markdown

import {
  $convertToMarkdownString,
  TRANSFORMERS,
} from '@lexical/markdown';

const onChange = (editorState) => {
    editorState.read(() => {
        const markdown = $convertToMarkdownString(TRANSFORMERS);
        console.log(markdown);
    });
}

相关问题