vue-at icon indicating copy to clipboard operation
vue-at copied to clipboard

Froala integration

Open gabaum10 opened this issue 6 years ago • 3 comments

I'm in the process of porting an old jquery/backbonejs app over to vue. One of the components is a Froala editor. I've successfully got that all wired in, but can't seem to get the vue-at component wired in.

Is there an official way to integrate the at component into an external, non div.contenteditable container? I could manually set it up when the editor opens

gabaum10 avatar Oct 17 '18 20:10 gabaum10

@gabaum10 hi, worth a try! Is it https://github.com/froala/django-froala-editor ?

fritx avatar Oct 29 '18 12:10 fritx

@fritx so I was able to sort of hack it in there via the froala.initialized event like so:

      'froalaEditor.initialized': function (e, editor) {
            this.editor = editor
            if (this.options.disabled) {
              editor.edit.off()
            }

            if (this.enableMentions) {
              editor.$el.atwho(atjsConfig.call(this))
                .on('inserted.atwho', (e, $user) => {
                  editor.$el.find('.atwho-inserted[contenteditable=false]').removeAttr('contenteditable')
                  const user = $user.data().itemData
         
                  // not sure why this isn't triggering a change in the editor, so do it manually now
                  editor.$el.trigger('change')
                })
            }
          }.bind(this)

gabaum10 avatar Oct 29 '18 12:10 gabaum10

@gabaum10 Is this the only way so far or have you found another way of doing this?

rcheung9 avatar Feb 27 '20 18:02 rcheung9