The main "hack" I had to do was to wait on the Javascript side for the DOM element to be rendered by ELM.
A setTimeout recursively checking if the element exists (and so if I can attach a CKEditor to it) did the trick. Le mardi 27 septembre 2016 01:26:45 UTC+2, Steve Jones a écrit : > > Well, I'm not sure yet. But I think it was to do do with dom lifecycle and > timing (I haven't tried CKeditor yet though. So far, I've tried tinymce and > quill). Things that work with static HTML do not with HTML generated with > elm. I've not found a lot of people doing this sort of thing successfully, > so I'm mostly trying to determine what's been done. > > Quill gives me "Invalid Quill container". And tinymce just silently fails > to do anything. > > > On Monday, September 26, 2016 at 7:01:16 PM UTC-4, Vincent Jousse wrote: >> >> Yes it works for me. >> >> What's your problem exactly? >> >> Le lundi 26 septembre 2016 23:54:49 UTC+2, Steve Jones a écrit : >>> >>> Vincent, >>> >>> So, you've had some success with CKeditor? I'm having some difficulty >>> getting any of these rich text editors to work within my app. I have tried >>> CKeditor yet though. >>> >>> On Friday, September 2, 2016 at 9:34:19 AM UTC-4, Vincent Jousse wrote: >>>> >>>> Nice trick :D >>>> >>>> I think I'll stay with my CKeditor solution for the moment, but thanks >>>> a lot anyway. >>>> >>>> Le mercredi 31 août 2016 16:02:30 UTC+2, Damir Batinović a écrit : >>>>> >>>>> I had to use contenteditable in my project. The true way to handling >>>>> cursor position was to hard (I don't remeber what it was but I thing it >>>>> involves window.selection) so I went with a dirty hack. Added another >>>>> field to my model (tmpInput), saving input events into that field until >>>>> Blur event was fired. Upon blur event tmpInput is copied to real input. >>>>> So >>>>> model and view are out of sync until blur happens. It's not nice but >>>>> there >>>>> where no problems with implementation so far. >>>>> >>>>> Dana utorak, 30. kolovoza 2016. u 17:18:37 UTC+2, korisnik Vincent >>>>> Jousse napisao je: >>>>>> >>>>>> I didn't but it's a very good idea :-) >>>>>> >>>>>> Do you see a way to overcome the cursor position problem with that >>>>>> approach? >>>>>> >>>>>> Le mardi 30 août 2016 17:16:21 UTC+2, Peter Damoc a écrit : >>>>>>> >>>>>>> It makes perfect sense. >>>>>>> >>>>>>> Have you thought about putting contenteditable on each individual >>>>>>> span? >>>>>>> This should allow for single word editing and for individual double >>>>>>> clicks. >>>>>>> >>>>>>> >>>>>>> On Tue, Aug 30, 2016 at 5:43 PM, Vincent Jousse <[email protected]> >>>>>>> wrote: >>>>>>> >>>>>>>> I mainly need double click events. I'm doing a transcription >>>>>>>> editor: I'm using a Speech To Text tool to generate words with their >>>>>>>> timestamps. >>>>>>>> >>>>>>>> I'm putting the words in a contenteditable div so that people can >>>>>>>> correct the transcription, and each word is surrounded by a span >>>>>>>> containing >>>>>>>> the timestamp info in some data- attribute. >>>>>>>> When people double click on the span, I want the audio player to >>>>>>>> play the file starting at this timestamp. And when the audio is >>>>>>>> playing, I >>>>>>>> want the «current word» to be highlighted in the contenteditable div. >>>>>>>> >>>>>>>> Does it make sense? >>>>>>>> >>>>>>>> Le mardi 30 août 2016 16:36:10 UTC+2, Peter Damoc a écrit : >>>>>>>>> >>>>>>>>> Well, it was a naive approach. ^_^ >>>>>>>>> >>>>>>>>> As for events inside the contenteditable div, I have no idea but >>>>>>>>> what kind of events do you want to handle in this kind of a scenario? >>>>>>>>> >>>>>>>>> >>>>>>>>> >>>>>>>>> On Tue, Aug 30, 2016 at 5:11 PM, Vincent Jousse <[email protected]> >>>>>>>>> wrote: >>>>>>>>> >>>>>>>>>> Thanks, but I would not say that it's "working" as it seems that >>>>>>>>>> the cursor position is reset after each event, causing the text to >>>>>>>>>> be >>>>>>>>>> written from right to left :-) >>>>>>>>>> >>>>>>>>>> It's seems related to this issue: >>>>>>>>>> https://github.com/elm-lang/virtual-dom/issues/23 >>>>>>>>>> >>>>>>>>>> And with this approach (storing a string), how could I trigger >>>>>>>>>> events on the HTML inside the contenteditable div? >>>>>>>>>> >>>>>>>>>> >>>>>>>>> -- >>>>>>>>> There is NO FATE, we are the creators. >>>>>>>>> blog: http://damoc.ro/ >>>>>>>>> >>>>>>>> -- >>>>>>>> You received this message because you are subscribed to the Google >>>>>>>> Groups "Elm Discuss" group. >>>>>>>> To unsubscribe from this group and stop receiving emails from it, >>>>>>>> send an email to [email protected]. >>>>>>>> For more options, visit https://groups.google.com/d/optout. >>>>>>>> >>>>>>> >>>>>>> >>>>>>> >>>>>>> -- >>>>>>> There is NO FATE, we are the creators. >>>>>>> blog: http://damoc.ro/ >>>>>>> >>>>>> -- You received this message because you are subscribed to the Google Groups "Elm Discuss" group. To unsubscribe from this group and stop receiving emails from it, send an email to [email protected]. For more options, visit https://groups.google.com/d/optout.
