reactjs 设置内容SunEditor不起作用

qvk1mo1f 于 2023-03-17 发布在 React

关注(0)|答案(2)|浏览(165)

我一直在测试与SunEditor，因为我想预加载存储在DB中的HTML文本，让用户修改它，如果必要的话。我从父传递一个ref变量，所以当提交按钮被点击，他可以得到值并保存修改。setContents只是有时工作。当我保存项目，并再次编译文本出现。但如果我使用应用程序或刷新窗口文本消失。我已经检查了变量仍然有值。我是第一次使用React，我不确定是我做错了还是suneditor-react失败了。你能帮助我吗？
下面是我的代码：

export const TranslationArea = React.forwardRef((props, ref) =>{    
    
    const handleEditorChange = (value) => {
        console.log(value);  
    
        ref.current= value;
      }
     const handleClick  = () => {
         console.log(ref.current);
     } 
    return(
        <div>
            <h2>{props.title}</h2>
                <SunEditor 
                    autoFocus={true}
                    width="100%"
                    height="150px"
                    setOptions={{
                        buttonList: [
                            // default
                            ['undo', 'redo'],
                            ['bold', 'underline', 'italic', 'list'],
                            ['table', 'link', 'image'],
                            ['fullScreen']
                        ]
                    
                    }}
                    setContents={props.content}
                    onChange={handleEditorChange}
            
                />
                <div>{props.content}</div>
            <button onClick={handleClick}>Content</button>
        </div>
    );
});

以下是SunEditor div中正确加载内容的屏幕截图（仅在编译项目时）：

如果刷新页面或导航到同一链接...

我已经显示了一个具有相同props.content的div，只是为了检查fowardRef是否工作。为什么setContents现在工作了？我已经用React工具检查过了，并且加载了属性：

你知道吗？

reactjs

来源：https://stackoverflow.com/questions/64349295/setcontents-suneditor-is-not-working-react

2条答案

按热度按时间

os8fio9y1#

我从parent传递了一个ref变量，这样当提交按钮被点击时，他就可以得到值并保存修改。
如果你只需要访问值，那么让我们传递一个回调函数，我们将它命名为onSumbit，它将是一个从SunEditor组件中获取string值的函数。
为了访问当前编辑的值，我在TranslationArea组件中使用了一个本地状态，并通过编辑器的onChange方法更新了该状态，然后当单击提交按钮时，我使用本地状态中的值content调用onSubmit（可能还有其他方法可以做到这一点，但我不熟悉SunEditor）。
TranslationArea组件如下所示：

export const TranslationArea = ({initialContent = "", title, onSubmit}) => {    
  const [content, setContent] = useState(initialContent);

  return(
      <div>
          <h2>{title}</h2>
              <SunEditor 
                  autoFocus={true}
                  width="100%"
                  height="150px"
                  setOptions={{
                      buttonList: [
                          // default
                          ['undo', 'redo'],
                          ['bold', 'underline', 'italic', 'list'],
                          ['table', 'link', 'image'],
                          ['fullScreen']
                      ]
                  
                  }}
                  setContents={initialContent}
                  onChange={setContent}
              />
              <div>{content}</div>
          <button onClick={() => onSubmit(content)}>Submit</button>
      </div>
  );
};

我在我的CodeSandbox中测试了它，给它一个onSubmit函数来记录提交的内容，但是您可以使用它做任何需要做的事情。

export default function App() {
  const initialContent = "Hello World";
  const onSubmit = (content: string) => {
    console.log("Submitted Content", content);
  };

  return (
    <div className="App">
      <TranslationArea
        initialContent={initialContent}
        onSubmit={onSubmit}
        title="Edit Text"
      />
    </div>
  );
}

CodeSandbox Link

赞(0）回复(0）举报 2023-03-17

njthzxwz2#

const [content,setContent] = useState('');
var initialContent = YOUR_PROPS_FROM_DB_STATE;

在SunEditor组件中：

<SunEditor 
defaultValue={initialContent}
setContents={YOUR_PROPS_FROM_DB_STATE}
placeholder={placeholder}
onChange={setContent}
/>

在我的例子中，YOUR_PROPS_FROM_DB是状态来自父组件。占位符-里面的任何变量或字符串。当然这不是最好的解决方案。但不知何故它起作用了。
希望这对你有帮助！问候，

赞(0）回复(0）举报 2023-03-17

我来回答

reactjs 设置内容SunEditor不起作用

2条答案

相关问题

热门标签

最新问答