trumbowyg反应输入数据键入反向顺序

Question

我现在将Trumbowyg编辑器集成到React Project中。

const [content, setContent] = useState();

return (
    <Trumbowyg
        onChange={e => setContent(e.target.innerHTML)}
        data={content}
    />
)

但是对于每个按键事件，光标都会移至起始位置，因此内容会逆转

https://i.sstatic.net/iza0j.png“ alt =“在此处输入图像说明”>

我键入“ start”，但它们的顺序是相反的，您会看到。

Answer 1

RichTexteditor.js

import React, { useEffect, useState } from "react";
import 'react-trumbowyg/dist/trumbowyg.min.css'
import dynamic from "next/dynamic";

const Trumbowyg = dynamic(import("react-trumbowyg"),
  {
    ssr: false,
  }
);


export default ({ initialHtml, onChange }) => {
  const [value, setValue] = useState("");

  useEffect(() => {
    console.log({initialHtml})
    if (value) return;
    setValue(initialHtml);
  }, [initialHtml])

  const onHtmlChange = (html) => {
    onChange(html);
  }

  return (
    <Trumbowyg
      id='react-trumbowyg'
      data={value}
      // dir="ltr"
      onChange={(e) => { onHtmlChange(e.target.innerHTML) }}
      buttons={
        [

          // ['viewHTML'],
          // ['formatting'],
          ['strong', 'em', 'del'],
          ['superscript', 'subscript'],
          ['link'],
          // ['image'], // Our fresh created dropdown
          ['justifyLeft', 'justifyCenter', 'justifyRight', 'justifyFull'],
          ['unorderedList', 'orderedList'],
          ['horizontalRule'],
          ['removeformat'],
          ['fullscreen']
        ]
      }
    />
  )
}

只是复制和使用！

nb：我在这里使用了Next.js

Answer 2

您无需将内容传递给trumbowyg，只需删除它

<Trumbowyg
        onChange={e => setContent(e.target.innerHTML)}
/>