Is there a way to enable/disable the save button on SunEditor externally?

Question

I'm using SunEditor in a React app and it's working fine. I do have a nit-pick with it though. On a save I save the document generated by SunEditor along with additional meta data about the document. SunEditor seems to control whether the save button is enabled/disabled internally by watching for changes in it's edit control, which is nice but if the save button is currently disabled and someone edits the meta data associated with the document I want to enable the save button. I've gone through the docs but I can't seem to find a configuration setting that says 'hey, enable that save button!' Is there a way to do that?

A link to the SunEditor for React docs

A link to the javascript SunEditor docs

Answer 1

You may use useRef() to identify the editor node, then select the save button element and remove the disabled attribute from it.

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>
   );
}