Hi
We have a list of names that we would like the user to pick and insert from a drop-down list located inside the editor.
We have created a custom tool for the drop-down list but am wondering as to how we can pass the list of names from the main editor component, into the custom tool. Any ideas?
const TargetEditor = ({names}) => {
return (
<Editor
tools={[
[Bold, Italic, Underline, Strikethrough],
NamesDropDownTool, // we want to pass the list of names (which can be changed by the parent control), into this custom tool
]}
contentStyle={{
height: 630,
}}
/>
);
};
Hey, Thushan,
Thank you for the code snippet.
Here is a demo of the `Editor` with a DropDownList which allows inserting text:
https://stackblitz.com/edit/react-vbygtd?file=app%2Fmain.jsx,app%2FInsertText.jsx
In the above demo, `view.dispatch` and `view.state.tr.insertText` are used in order to insert the selected text from the dropdown.
There are other examples on this matter which you can find in this KB article:
https://www.telerik.com/kendo-react-ui/knowledge-base/add-custom-tools-to-the-editor-and-customize-built-in-tools/
I hope this helps, but please let us know if you have further questions.
Regards,Wissam
Progress Telerik
Thanks Wissam for pointing me in the right direction.
Made a slight tweak to your code to match my use case - just in case someone comes across this in the future.
Ahqheb (forked) - StackBlitz