有没有办法在外部启用/禁用 SunEditor 上的保存按钮？答案

【问题标题】：Is there a way to enable/disable the save button on SunEditor externally?有没有办法在外部启用/禁用 SunEditor 上的保存按钮？
【发布时间】：2021-01-25 15:16:13
【问题描述】：

我在 React 应用程序中使用 SunEditor，它运行良好。不过，我确实有一个挑剔的。在保存时，我保存了 SunEditor 生成的文档以及有关该文档的其他元数据。 SunEditor 似乎通过观察其编辑控件中的更改来控制是否在内部启用/禁用保存按钮，这很好，但如果保存按钮当前被禁用并且有人编辑与文档关联的元数据，我想启用保存按钮.我浏览了文档，但似乎找不到显示“嘿，启用保存按钮！”的配置设置。有没有办法做到这一点？

A link to the SunEditor for React docs

A link to the javascript SunEditor docs

【问题讨论】：

标签： javascript reactjs suneditor

【解决方案1】：

您可以使用 useRef() 来识别编辑器节点，然后选择保存按钮元素并从中删除 disabled 属性。

export const YourComponent = () => {
   //...
   const editorReference = useRef(null);

   //...
   let saveElement = !R.isNil(editorReference) && !R.isNil(editorReference.current) ? editorReference.current.getElementsByClassName("se-btn _se_command_save se-resizing-enabled se-tooltip") : undefined;
   if (!R.isNil(saveElement) && saveElement.length>0){
       saveElement[0].removeAttribute("disabled");
   }

   return (
     <div>
          <div ref={editorReference}>
             <SunEditorautoFocus={true} enable={true} showToolbar={true} enableToolbar={true} />
          </div>
     </div>
   );
}

【讨论】：