标签: lexicaljs

使用词法文本编辑器框架，在 React 中使用默认文本字符串初始化编辑器的最简单方法是什么？

例如，我可以创建一个实例，手动保存 JSON 状态，然后将该 JSON blob 复制到我的代码中，以设置为initialEditorState，PlainTextPlugin但这似乎我必须缺少一些东西。

谢谢

我正在使用 nextjs 中的词法编辑器开发类似博客的网络项目。我正在尝试在词法编辑器中实现图像插件。目前它转换为 base64 格式，这对于存储在数据库中来说将是昂贵的。我不想存储 base64，而是想将图像链接与数据库中的其他文本一起存储。我还面临着在 nextjs 中实现词法编辑器的图像插件的问题。

我想要遵循的步骤

• 我想在 aws s3 中上传图像，然后想在编辑器中显示为图像。
• 我尝试实现的另一种方式是，模态将打开，可以选择图像并将其上传到 aws s3 并获取图像 url，然后想要在编辑器中显示图像 url。

有什么解决办法吗？预先感谢您的任何建议

我需要完成什么

我想制作一个简单的受控 词汇明文编辑器 - 一个由父字符串字段控制的编辑器。

但我真的很难让我的编辑同时：

1. 每当父状态发生变化时就采用它
2. Selection收养母国后保留
3. 不会仅仅因为外部值发生变化（并被采用）而自动聚焦

到目前为止我得到了什么

我尝试了一些方法，但这是我得到的最接近的 -沙盒：

export const useAdoptPlaintextValue = (value: string) => {
  const [editor] = useLexicalComposerContext();

  useEffect(() => {
    editor.update(() => {
      const initialSelection = $getSelection()?.clone() ?? null;
      $getRoot().clear();
      $getRoot().select(); // for some reason this is not even necessary
      $getSelection()?.insertText(value);
      $setSelection(initialSelection);
    });
  }, [value, editor]);
};

这种方法在写入输入本身时效果很好，但强制采用value 仅在首次选择输入之前有效。在选择它之后（即使再次取消选择），编辑器仅采用一个“渲染帧”的值，然后立即使用旧值重新渲染。我显然在选择上做错了，因为：

1. 删除setSelection(initialSelection)也可以解决这个问题 - 但更新之间不会保持选择，这也是不可接受的。
2. 每次击键时我都会收到此错误：

updateEditor：选择已丢失，因为先前选择的节点已被删除并且选择未移动到另一个节点。确保删除/替换选定节点后选择发生更改。

...在我看来，initialSelection保留了对被删除的节点的引用$getRoot().clear()，但我尝试绕过它，但一无所获。

我很高兴获得有关我的代码或实现我的目标的任何建议/帮助。

谢谢

当我尝试制作博客时，我无法通过表单中的编辑器。我找到了这个：

DraftJS React-Hook-Form - 提交编辑器作为输入

但似乎 LexicalRichTextEditor 没有这样的标签可以传递。谁能帮我？如何传递属性来实现添加内容和修改内容功能？

type LexicalEditorProps = {
    //config: Parameters<typeof LexicalComposer>["0"]["initialConfig"];
    content: any;
};

export default function MyEditor(props: LexicalEditorProps) {
    const [ editor ] = useLexicalComposerContext();
    const editorStateRef = useRef();
    const [saveContent, setSaveContent] = useState('');
    const editorConfig: any = {
        // The editor theme
        theme: EditorTheme,
        // Handling of errors during update
        onError(error: any) {
            throw error;
        },
        editorState: props.content,
        // Any custom nodes go here
        nodes: [
            HeadingNode,
            ListNode,
            ListItemNode,
            QuoteNode,
            CodeNode,
            CodeHighlightNode,
            TableNode,
            TableCellNode, …

我在文档中找不到任何内容。这是我发现的https://lexical.dev/docs/api/modules/lexical#createeditorargs。

我正在为问答网站构建一个富文本编辑器。

据我所知，Lexical 可以让我们将输出数据转换为 JSON、JSON 字符串、HTML、Markdown 等。

根据推荐的最佳实践，我应该将哪些数据保存到 MySQL 或 MongoDB 数据库？

这是一个新网站。

我是 lexical.js 的新手，不完全理解如何收听不同的击键组合。我想听“Ctrl/Cmd+S”，然后触发回调（以保存数据）。我怎样才能做到这一点？

使用文本区域我可以做类似的事情：

const onKeyDown = (event) => {
  // "Ctrl" or "Cmd" + "s"
  if ((event.ctrlKey || event.metaKey) && event.which === 83) {
    // save data
  }
}

<textarea onKeyDown={onKeyDown} />

对于词汇，我尝试做类似的事情：

const MY_SAVE_COMMAND: LexicalCommand<string> = createCommand('MY_SAVE_COMMAND')

editor.registerCommand<KeyboardEvent>(
  MY_SAVE_COMMAND,
  (event) => {
    console.log('[MY_SAVE_COMMAND] event', event)
    return true
  },
  COMMAND_PRIORITY_HIGH,
)

这是行不通的。我应该在哪里插入听击键的部分，或者是否有不同的方法来完成此操作？

我想创建一个可以确定我的编辑器是否具有焦点的函数：

function hasFocus(editor: LexicalEditor) {
  const hasFocus = editor.getEditorState().read(() => {
      // return $...
  })
  
  return hasFocus
}

我浏览了源代码和文档，但没有找到可以直接检测到这一点的方法。在我的测试中，Selection对象似乎无法可靠地确定编辑器是否专注于 DOM。

那么，如何检测编辑器焦点呢？

我正在尝试以 HTML 格式导出使用 Lexical 开发的 RTE 内容。为此，我有一个按钮，其handleClick功能应该是console.logHTML 中 RTE 的内容。

当我尝试将内容导出为字符串化 JSON 时，没有问题，我可以看到我的内容，例如：

{"root":{"children":[{"children":[{"detail":0,"format":0,"mode":"normal","style":"","text":"test content","type":"text","version":1}],"direction":"ltr","format":"","indent":0,"type":"paragraph","version":1}],"direction":"ltr","format":"","indent":0,"type":"root","version":1}}

然而，当我尝试将内容转换为 HTML 时，我仍然得到一个空字符串。

知道我在这里可能做错了什么吗？以下是将内容导出为 HTML 的函数：

import { $generateHtmlFromNodes } from '@lexical/html';

const handleClick = (editor: LexicalEditor) => {
  editor.update(() => {
    const editorState = editor.getEditorState();
    const jsonString = JSON.stringify(editorState);
    console.log('jsonString', jsonString);

    const htmlString = $generateHtmlFromNodes(editor);
    console.log('htmlString', htmlString);
  });
};

谢谢

I\xc2\xb4m 尝试创建一个基于 Lexical 的“一行”消息组件，但 i\xc2\xb4m 无法阻止 Enter 键创建新段落。

有什么想法如何实现这一点？

I\xc2\xb4ve 添加了样式

white-space: nowrap!important; \n      resize: none;\n

和 i\xc2\xb4ve 尝试 MaxLengthPlugin （它可以工作，但如果在那里输入它会创建两行）

还尝试添加

<EditorWrapper ref={onRef} data-testid="editor" \n        onKeyDown={event => {\n            if (event.key === 'Enter') {\n              event.preventDefault();\n            } \n          }}>\n

我原以为这会阻止输入新段落，但仍然在编辑器中添加了一个新段落。