How can I obtain mentioned user data from Froala Editor using TributeJS

205 views Asked by At

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>&nbsp; <span class="fr-deletable fr-tribute" data-reactroot=""><a>@<!-- -->Test Test</a></span>&nbsp;</p>
0

There are 0 answers