reactjs 如何绑定文本区域ID到tiptap编辑器？

xe55xuns 于 2023-02-18 发布在 React

关注(0)|答案(1)|浏览(147)

我对Tiptap有点陌生。我想使用来自另一个组件（FormComponent）的textarea元素，而不是使用content属性（编辑器选项）。这可能吗？

const TiptapEditor = () => {
  const editor = useEditor({
    element: document.getElementById('description'), // It didn't work.
    extensions: [StarterKit],
    content: 'Hello World! 🌎️', // I don't want this
  })

  return <EditorContent editor={editor} />
}

export default TiptapEditor

textarea元素所在的另一个组件。

const FormComponent = () => {
  const {
    register,
    handleSubmit,
    watch,
    formState: { errors, isSubmitting, isSubmitted, isDirty, isValid },
  } = useForm<ExampleType>({
    mode: 'onChange',
    resolver: zodResolver(ExampleSchema),
    defaultValues: {
      description: '',
    },
  })
  return (
    <form onSubmit={handleSubmit(submit)} noValidate>
      <TiptapEditor /> // obviously, this does not work at the moment.
      <textarea
          id="description" // I want to use this textarea so that I don't have to add another styling.
          placeholder={DESCRIPTION_PLACEHOLDER}
          {...register('description')}
        />
      <button></button>
    </form>
  )
}

我找不到与此问题相关的示例或文档。有什么想法吗？

reactjs

来源：https://stackoverflow.com/questions/75418122/how-to-bind-textarea-id-to-tiptap-editor

1条答案

按热度按时间

qcuzuvrc1#

您能否详细说明不想使用内容字段的原因？
我在窗体中使用Tippap，带有react钩子窗体。我不使用register，而是使用controller：

const CompactNotepadController: React.FC<CompactNotepadControllerProps> = ({
  name,
  required = false,
  readOnly = false,
  active = !readOnly,
  value,
  label,
  contacts,
}) => {
  return (
    <Controller
      name={name}
      rules={{ required }}
      render={({ field: { onChange, value: rhfValue, ref } }) => {
        return (
          <Input.Wrapper ref={ref} label={label} required={required}>
            <Box
              sx={{
                border: active ? "1px solid #ced4da" : "1px solid transparent",
                borderRadius: "4px",
                "&:focus-within": {
                  borderColor: "#fd7e14",
                },
              }}
            >
              <Notepad
                initialValue={rhfValue}
                onChange={onChange}
                readOnly={readOnly}
                contacts={contacts}
              />
            </Box>
          </Input.Wrapper>
        );
      }}
    />
  );
};

内容字段只是用作初始值，编辑器将处理状态，我只是将更改反馈到表单。
如果你能分享更多的信息，为什么内容字段是你的问题，我可以尝试扩大我的答案。

赞(0）回复(0）举报 2023-02-18

我来回答

reactjs 如何绑定文本区域ID到tiptap编辑器？

1条答案

相关问题

热门标签

最新问答