search

Ionaru / easy-markdown-editor

EasyMDE: A simple, beautiful, and embeddable JavaScript Markdown editor. Delightful editing for beginners and experts alike. Features built-in autosaving and spell checking.
https://stackblitz.com/edit/easymde
MIT License
2.39k stars 316 forks source link

How to use tribute.js to achieve the mentions? #198

Open sTeaPig opened 4 years ago

sTeaPig commented 4 years ago

Is there any way to use tribute.js to achieve the mentions in the EasyMDE? or other ways to achieve mentions? thanks!

artknight commented 2 years ago

@sTeaPig did you ever implement tribute.js in easyMDE? If yes, please shine some light :)

Ionaru commented 2 years ago

I'm not familiar with tribute.js, but maybe something similar to https://froala.com/wysiwyg-editor/examples/tribute-js can be done.

artknight commented 2 years ago

@Ionaru how soon do you think this could be implemented?

artknight commented 2 years ago

@Ionaru One issue I noticed is that it seems the keyup and keydown events never make it to tribute. I added a few breakpoints and those never get hit.

artknight commented 2 years ago

@Ionaru an update: setting inputStyle: 'contenteditable' seems to have resolved the event propagation. However, when using the keyboard up/down keys the enter does not select the option... simply goes to the new line leaving just the @ sign

Ionaru commented 2 years ago

Check out https://github.com/zurb/tribute/issues/511

artknight commented 2 years ago

@Ionaru lol I had already commented on there :)

artknight commented 2 years ago

@Ionaru how can i insert an html element into the easymde editor without it getting stripped out?

ex. I would like to add <span contenteditable="false"><a href="...">@JackBauer</a></span>

However, all i get added is the @JackBauer.. the html wrappers are stripped out

Ionaru commented 2 years ago

Maybe you can insert the element after the editor itself is rendered, using DOM manipulation or jQuery.

Tbh this sounds like it's more a CodeMirror issue than something for this repo. I'd suggest you try and get it working using CodeMirror first and then try applying that to easyMDE.

Also you don't need to @ me in every reply.

artknight commented 2 years ago

@Ionaru so it turns out that the reason for the html tags getting stripped out is due to the gfm mode. I have modified my template to return a true md syntax [...](link address...) instead of an actual html tag. However, I would prefer to be able to add an html tag that could be ignored by the sanitizer. Any ideas?