Hi I am using Froala wysiwyg editor and I need an array which includes mentioned users to send server. I know editor gives me a html as string. I can scan that html string to obtain mentioned user data but is there any another way to get mentioned data using tributeJS or Froala ? I am waiting your advice to this issue?
Example Code :
const FroalaEditor: FC<IProps> = ({ useReadOnly, setEditorDataMethod }) => {
let refData: any = useRef()
const [isFroalaInitialized, setIsFroalaInitialized] = useState(false);
const [editOpen, setEditOpen] = useState<boolean>(false)
function remoteMentionSearch(text: string, cb: any) {
if (text.length > 2) {
getMethod('exampleUrl' + text + "&maxResultCount=5",
GET_USERINFO_TOKEN()
).then((response: any) => {
cb(response.multiData);
}).catch((response: any) => {
})
}
}
const tribute = new Tribute(
{
{
trigger: '@',
values: function (text, cb) {
remoteMentionSearch(text, (users: any) => cb(users));
},
lookup: (user: any) => {
return (
user.fullName
)
},
fillAttr: 'mention',
selectTemplate: function (item: any) {
return renderToString(
<span className='fr-deletable fr-tribute'>
<a>
@{item.original.fullName}
</a>
</span>
)
}
}
}
);
const [editor, setEditor] = useState<any>(undefined);
const [model, setModel] = useState<string>("");
const handleModelChange = (model: any) => {
setModel(model);
};
useEffect(() => {
if (refData) {
setEditor(videoRef.editor);
setIsFroalaInitialized(true);
}
}, [refData]);
useEffect(() => {
if (isFroalaInitialized) {
tribute.attach(editor.el);
}
}, [isFroalaInitialized]);
return (
<div className="blog-editor-container">
<Froala
ref={(player: any) => {
refData = player
}}
model={model}
onModelChange={handleModelChange}
tag="textarea"
/>
</div>
);
}
export default FroalaEditor
Example Output :
<p>This is example text. <span class="fr-deletable fr-tribute" data-reactroot=""><a>@<!-- -->Emre Sert</a></span> <span class="fr-deletable fr-tribute" data-reactroot=""><a>@<!-- -->Test Test</a></span> </p>