数据库中的数据不会保留在tiptap编辑器内容中

Question

当我将数据库中字段的数据传递到 TipTap 编辑器的内容时，我遇到刷新时丢失 TipTap 编辑器（基于 ProseMirror）的内容的问题。

我的目标是从数据库中的菜谱对象中获取成分字段并将其传递给tiptap 编辑器。数据采用 html 格式，是使用 TipTap 编辑器在我的“添加菜谱”表单中创建的。我希望数据在这个新的 TipTap 编辑器中显示并可编辑，该编辑器将成为用户“编辑菜谱”表单的一部分。请注意，我相信这与此处提出的问题相同：How to persist data so that it do not geteraed in TipTap editor? 但是该问题没有提供任何示例代码，因此我提供了更多上下文在我的问题中。

这是我当前的代码，我将recipe.ingredients 数据传递到TipTap 编辑器内容：

// define your extension array
const extensions = [
  Color.configure({ types: [TextStyle.name, ListItem.name] }),
  TextStyle.configure({ types: [ListItem.name] }),
  StarterKit.configure({
    bulletList: {
      keepMarks: true,
      keepAttributes: false, // TODO : Making this as `false` becase marks are not preserved when I try to preserve attrs, awaiting a bit of help
    },
    orderedList: {
      keepMarks: true,
      keepAttributes: false, // TODO : Making this as `false` becase marks are not preserved when I try to preserve attrs, awaiting a bit of help
    }
  }),
  // Placeholder.configure({
  //   placeholder: 'Ingredients',
  // }),
  Underline, 
  TextAlign.configure({
    types: ['heading', 'paragraph'], 
    alignments: ['left', 'right'],
    defaultAlignment: 'left',
  })
]

const TiptapIngredientsEdit = ({setIngredients}) => {
    const { id }= useParams();

    const initialRecipeState = {
    id: null,
    title: "",
    description: "",
    recipeType: "",
    servingSize: null,
    ingredients: "",
    directions: "",
    source: "",
    userId: undefined
  };

  const [recipe, setRecipe] = useState(initialRecipeState);

     //get recipe
     const getRecipe = id => {
    RecipeDataService.get(id)
    .then(response => {
      setRecipe(response.data);
      console.log(response.data.ingredients);
    })
    .catch(e => {
      console.log(e);
    });
  };
  
  useEffect(() => {
    if(id)
    getRecipe(id);
  }, [id]);

  const editor = useEditor({
    extensions,
    content: recipe.ingredients,
    onUpdate: ({ editor }) => {
      const html = editor.getHTML();
      setIngredients(html);
      console.log(html);
    }
  })

  return (
  <>
    <Box sx={{ mb: "4px", border: 1, borderColor: 'rgb(196, 196, 196)', borderRadius: '5px'}}>
      <MenuBar editor={editor} />
      <EditorContent editor={editor} /> 
    </Box>
  </>
  )
}

export default TiptapIngredientsEdit

成分首先按预期从 html 呈现，并且可以根据需要进行编辑：

但是页面刷新后，编辑器内容变成空白：

如果我提供一个 html 字符串作为这样的内容，我不会遇到同样的问题，因此将数据从数据库传递到内容似乎是一个问题：

const editor = useEditor({

    extensions,
    content: '<b>test content</b>',
    onUpdate: ({ editor }) => {
      const html = editor.getHTML();
      setIngredients(html);
      console.log(html);
    }
  })

Answer 1

你需要

ingredients

才能编辑，而

ingredients

初始化时你的

useEditor

是空白的，我们需要直接将内容设置到编辑器对象。

因此，根据解决方案，只需使用

editor

命令将成分设置为

setContent

即可。您可以在这里查看详细信息。

// define your extension array
const extensions = [
  Color.configure({ types: [TextStyle.name, ListItem.name] }),
  TextStyle.configure({ types: [ListItem.name] }),
  StarterKit.configure({
    bulletList: {
      keepMarks: true,
      keepAttributes: false, // TODO : Making this as `false` becase marks are not preserved when I try to preserve attrs, awaiting a bit of help
    },
    orderedList: {
      keepMarks: true,
      keepAttributes: false, // TODO : Making this as `false` becase marks are not preserved when I try to preserve attrs, awaiting a bit of help
    }
  }),
  // Placeholder.configure({
  //   placeholder: 'Ingredients',
  // }),
  Underline, 
  TextAlign.configure({
    types: ['heading', 'paragraph'], 
    alignments: ['left', 'right'],
    defaultAlignment: 'left',
  })
]

const TiptapIngredientsEdit = ({setIngredients}) => {
    const { id }= useParams();

    const initialRecipeState = {
    id: null,
    title: "",
    description: "",
    recipeType: "",
    servingSize: null,
    ingredients: "",
    directions: "",
    source: "",
    userId: undefined
  };

  const [recipe, setRecipe] = useState(initialRecipeState);

     //get recipe
     const getRecipe = id => {
    RecipeDataService.get(id)
    .then(response => {
      setRecipe(response.data);
      console.log(response.data.ingredients);
    })
    .catch(e => {
      console.log(e);
    });
  };
  
  useEffect(() => {
    if(id)
    getRecipe(id);
  }, [id]);

  useEffect(() => {
     editor.commands.setContent(recipe.ingredients)
  }, [recipe]);

  const editor = useEditor({
    extensions,
    content: recipe.ingredients,
    onUpdate: ({ editor }) => {
      const html = editor.getHTML();
      setIngredients(html);
      console.log(html);
    }
  })

  return (
  <>
    <Box sx={{ mb: "4px", border: 1, borderColor: 'rgb(196, 196, 196)', borderRadius: '5px'}}>
      <MenuBar editor={editor} />
      <EditorContent editor={editor} /> 
    </Box>
  </>
  )
}

export default TiptapIngredientsEdit

谢谢你