search

jpuri / react-draft-wysiwyg

A Wysiwyg editor build on top of ReactJS and DraftJS. https://jpuri.github.io/react-draft-wysiwyg
MIT License
6.42k stars 1.16k forks source link

How do set "name" for the editor? #539

Open sontek opened 6 years ago

sontek commented 6 years ago

Hey, we put a label on our react-draft-wysiwyg editor. We want that label to focus the editor (<label for="editor" />) like we would in standard HTML for accessibility. How do I do this?

Normally I would do <input name="editor" />

jpuri commented 6 years ago

Properties passed to the editor are passed down to underlying draft editor check this.

Except for [these])https://github.com/jpuri/react-draft-wysiwyg/blob/master/src/Editor/index.js#L317) props which are filtered out.

Id draftjs supports name wysiwyg will also support it.

nathannewyen commented 3 years ago

Sorry I dont understand. Can you point out specific how can I pass properties to editor ?

dyedwiper commented 1 year ago

As far as I see, it is possible to pass down a wrapperId. I set this to the same as the label's for, but it does not set the focus to the editor, when I click on the label.

One reason why it doesn't work is definitely, that the id of the wrapper is altered to "rdw-wrapper-[yourId]": https://github.com/jpuri/react-draft-wysiwyg/blob/master/src/Editor/index.js#L46

But I'm also not sure if the wrapper is the right element to set the id to. When I have a cursor in the editor, then the active element is <div aria-role="rdw-editor" ... role="textbox" ... > (checked with document.activeElement in the console). So maybe this is the element, the id should be set to, but I'm not sure. I couldn't make it work be altering the ids with Chrome Dev Tools.