New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Doesn't work with Froala editor #253

Closed
vahtel opened this Issue Feb 12, 2015 · 37 comments

Comments

Projects
None yet
@vahtel

vahtel commented Feb 12, 2015

I'm trying to get it working with Froala editor (https://github.com/froala/wysiwyg-editor) but there is an error:
jquery.atwho.js:542 Uncaught InvalidNodeTypeError: Failed to execute 'surroundContents' on 'Range': the given Node has no parent.

It happens after you have typed "@". Here's the test case http://jsbin.com/lajuni , try typing "@" .

@deronsizemore

This comment has been minimized.

Show comment
Hide comment
@deronsizemore

deronsizemore Feb 13, 2015

I'm getting the same behavior in Froala. Would love to be able to use this with Froala if there's some kind of an easy fix.

deronsizemore commented Feb 13, 2015

I'm getting the same behavior in Froala. Would love to be able to use this with Froala if there's some kind of an easy fix.

@Georg7

This comment has been minimized.

Show comment
Hide comment
@Georg7

Georg7 Feb 20, 2015

+1 getting exact same behaviour. Any ideas/suggestions for a fix?

Georg7 commented Feb 20, 2015

+1 getting exact same behaviour. Any ideas/suggestions for a fix?

@ichord ichord closed this in 0d32ac2 Feb 20, 2015

@ichord

This comment has been minimized.

Show comment
Hide comment
@ichord

ichord Feb 20, 2015

Owner

Ooops... wrong reference.

Owner

ichord commented Feb 20, 2015

Ooops... wrong reference.

@ichord ichord reopened this Feb 20, 2015

@stefanneculai

This comment has been minimized.

Show comment
Hide comment
@stefanneculai

stefanneculai Feb 20, 2015

I checked this and it seems that there is a small change that should be made to At.js in order to get it work with Froala Editor. At.js wraps the range with a <span>. Because Webkit browsers might add unwanted spans, new spans are accepted into the editor only if they have the attribute data-fr-verified="true". I believe it would be good to make the query string a variable / option.

Changing

range.surroundContents(($query = $("<span class='atwho-query'/>", this.app.document))[0]);

to

range.surroundContents(($query = $("<span class='atwho-query' data-fr-verified=true/>", this.app.document))[0]);

will make this work (See http://jsbin.com/xufosinuru/2).

One suggestion: I think it would be good to allow overriding methods of the plugin. I could test easier if there was a way to override the EditableController.prototype.catchQuery. Unfortunately, I couldn't find a way to do that.

stefanneculai commented Feb 20, 2015

I checked this and it seems that there is a small change that should be made to At.js in order to get it work with Froala Editor. At.js wraps the range with a <span>. Because Webkit browsers might add unwanted spans, new spans are accepted into the editor only if they have the attribute data-fr-verified="true". I believe it would be good to make the query string a variable / option.

Changing

range.surroundContents(($query = $("<span class='atwho-query'/>", this.app.document))[0]);

to

range.surroundContents(($query = $("<span class='atwho-query' data-fr-verified=true/>", this.app.document))[0]);

will make this work (See http://jsbin.com/xufosinuru/2).

One suggestion: I think it would be good to allow overriding methods of the plugin. I could test easier if there was a way to override the EditableController.prototype.catchQuery. Unfortunately, I couldn't find a way to do that.

@Georg7

This comment has been minimized.

Show comment
Hide comment
@Georg7

Georg7 Feb 20, 2015

That did it, thanks @stefanneculai

Georg7 commented Feb 20, 2015

That did it, thanks @stefanneculai

@deronsizemore

This comment has been minimized.

Show comment
Hide comment
@deronsizemore

deronsizemore Feb 21, 2015

worked for me too! Thanks @stefanneculai

deronsizemore commented Feb 21, 2015

worked for me too! Thanks @stefanneculai

@ichord ichord closed this in 64ab00d Feb 24, 2015

@ichord

This comment has been minimized.

Show comment
Hide comment
@ichord

ichord Feb 24, 2015

Owner

Please have a try on editableAtwhoQueryAttrs options to attach data-fr-verified to the .atwho-query element before it's inserted.

$editable.atwho({
    at: "@",
    editableAtwhoQueryAttrs: {"data-fr-verified": true}
});
Owner

ichord commented Feb 24, 2015

Please have a try on editableAtwhoQueryAttrs options to attach data-fr-verified to the .atwho-query element before it's inserted.

$editable.atwho({
    at: "@",
    editableAtwhoQueryAttrs: {"data-fr-verified": true}
});
@deronsizemore

This comment has been minimized.

Show comment
Hide comment
@deronsizemore

deronsizemore commented Feb 24, 2015

Thanks @ichord

@ichord

This comment has been minimized.

Show comment
Hide comment
@ichord

ichord Feb 24, 2015

Owner

@stefanneculai Thanks for your works and the suggestion.
It would be better to just modify the source code if overriding methods is for test.
If there still lots of hacks have to be done for EditableController, I would expose it.

Owner

ichord commented Feb 24, 2015

@stefanneculai Thanks for your works and the suggestion.
It would be better to just modify the source code if overriding methods is for test.
If there still lots of hacks have to be done for EditableController, I would expose it.

@stefanneculai

This comment has been minimized.

Show comment
Hide comment
@stefanneculai

stefanneculai Feb 24, 2015

I believe that editableAtwhoQueryAttrs does the job. 👍

stefanneculai commented Feb 24, 2015

I believe that editableAtwhoQueryAttrs does the job. 👍

@aligajani

This comment has been minimized.

Show comment
Hide comment
@aligajani

aligajani Aug 27, 2015

Hey guys..I am using Froala with Atjs and it doesn't work. It doesn't show at all.

If I place a samplet textarea, then it works.

aligajani commented Aug 27, 2015

Hey guys..I am using Froala with Atjs and it doesn't work. It doesn't show at all.

If I place a samplet textarea, then it works.

@deronsizemore

This comment has been minimized.

Show comment
Hide comment
@deronsizemore

deronsizemore Aug 27, 2015

@aligajani did you try all of the suggestions above? If so, it may be hard to tell as I know Froala has been updated since my original post which may have changed some things with regards to At.js and how it works with Froala.

deronsizemore commented Aug 27, 2015

@aligajani did you try all of the suggestions above? If so, it may be hard to tell as I know Froala has been updated since my original post which may have changed some things with regards to At.js and how it works with Froala.

@aligajani

This comment has been minimized.

Show comment
Hide comment
@aligajani

aligajani Aug 27, 2015

@deronsizemore I initially thought the issue was z-index but that seems to be not the issue. At the core, it just doesn't appear on screen. Froala is blocking it perhaps. I am supplying atjs the id of the text area contained inside the froala wrapper.

aligajani commented Aug 27, 2015

@deronsizemore I initially thought the issue was z-index but that seems to be not the issue. At the core, it just doesn't appear on screen. Froala is blocking it perhaps. I am supplying atjs the id of the text area contained inside the froala wrapper.

@stefanneculai

This comment has been minimized.

Show comment
Hide comment
@stefanneculai

stefanneculai commented Aug 27, 2015

A working jsFiddle: http://jsfiddle.net/8myoLgLy/4/

@aligajani

This comment has been minimized.

Show comment
Hide comment
@aligajani

aligajani Aug 27, 2015

Wow, why doesn't it work on mine though. Here's some data you might find helpful.

<script>
         $('#edit').atwho({
             at: "@",
             data:['Peter', 'Tom', 'Anne'],
             editableAtwhoQueryAttrs: {"data-fr-verified": true}
         })
     </script>

http://d.pr/i/17hew

aligajani commented Aug 27, 2015

Wow, why doesn't it work on mine though. Here's some data you might find helpful.

<script>
         $('#edit').atwho({
             at: "@",
             data:['Peter', 'Tom', 'Anne'],
             editableAtwhoQueryAttrs: {"data-fr-verified": true}
         })
     </script>

http://d.pr/i/17hew

@deronsizemore

This comment has been minimized.

Show comment
Hide comment
@deronsizemore

deronsizemore Aug 27, 2015

Thanks @stefanneculai for that Fiddle. I may definitely give this a try again as it looks like it works great and is less buggy than what i'm using at the moment. I just need to figure out how to add some images into the mention dropdown and I'll be good.

deronsizemore commented Aug 27, 2015

Thanks @stefanneculai for that Fiddle. I may definitely give this a try again as it looks like it works great and is less buggy than what i'm using at the moment. I just need to figure out how to add some images into the mention dropdown and I'll be good.

@aligajani

This comment has been minimized.

Show comment
Hide comment
@aligajani

aligajani Aug 27, 2015

Doesn't work with mine though. What could be wrong, using latest versions of all libs. I also tried to make it work on a textarea seperate from my Froala, it worked then.

aligajani commented Aug 27, 2015

Doesn't work with mine though. What could be wrong, using latest versions of all libs. I also tried to make it work on a textarea seperate from my Froala, it worked then.

@aligajani

This comment has been minimized.

Show comment
Hide comment
@aligajani

aligajani Aug 27, 2015

Guys @deronsizemore @stefanneculai , what could be wrong with mine. It doesn't seem to work on a froala element at all.

aligajani commented Aug 27, 2015

Guys @deronsizemore @stefanneculai , what could be wrong with mine. It doesn't seem to work on a froala element at all.

@deronsizemore

This comment has been minimized.

Show comment
Hide comment
@deronsizemore

deronsizemore Aug 27, 2015

@aligajani Hard to tell by looking at your screenshot but the code you supplied looks like you're targeting #edit which is a textarea. Have you attempted to target the Froala id/class instead?

deronsizemore commented Aug 27, 2015

@aligajani Hard to tell by looking at your screenshot but the code you supplied looks like you're targeting #edit which is a textarea. Have you attempted to target the Froala id/class instead?

@aligajani

This comment has been minimized.

Show comment
Hide comment
@aligajani

aligajani Aug 27, 2015

Yeah I have targetted 'froala-element' too bud. Still doesn't work.

aligajani commented Aug 27, 2015

Yeah I have targetted 'froala-element' too bud. Still doesn't work.

@deronsizemore

This comment has been minimized.

Show comment
Hide comment
@deronsizemore

deronsizemore Aug 27, 2015

Any errors in console? Can you view source and ensure that the JS files are included correctly and that you can open them?

deronsizemore commented Aug 27, 2015

Any errors in console? Can you view source and ensure that the JS files are included correctly and that you can open them?

@aligajani

This comment has been minimized.

Show comment
Hide comment
@aligajani

aligajani Aug 27, 2015

as I said, it works if I run it on a plain textarea. No errors in console either.

aligajani commented Aug 27, 2015

as I said, it works if I run it on a plain textarea. No errors in console either.

@deronsizemore

This comment has been minimized.

Show comment
Hide comment
@deronsizemore

deronsizemore Aug 27, 2015

I understand that. Just trying to run through all the usual troubleshooting steps that I typically do. I'm not sure then if you're able to get it going on a textarea and no errors. I'm out of ideas.

deronsizemore commented Aug 27, 2015

I understand that. Just trying to run through all the usual troubleshooting steps that I typically do. I'm not sure then if you're able to get it going on a textarea and no errors. I'm out of ideas.

@aligajani

This comment has been minimized.

Show comment
Hide comment
@aligajani

aligajani Aug 27, 2015

By the way, @deronsizemore , I get Froala to launch using this

{{ Form::textarea('text', '', array('id' => 'edit', 'class' => 'form-control', 'placeholder' => 'Your words go here..', 'data-parsley-required' => 'true', 'data-parsley-trigger' => 'change', 'data-parsley-minlength' => '10', 'size' => '60x10')) }}

Then I use ('#edit').editable to trigger it. Maybe that's the issue?

What Froala does is wrap around its stuff above my text area..then I use At.js to target .froala-element

aligajani commented Aug 27, 2015

By the way, @deronsizemore , I get Froala to launch using this

{{ Form::textarea('text', '', array('id' => 'edit', 'class' => 'form-control', 'placeholder' => 'Your words go here..', 'data-parsley-required' => 'true', 'data-parsley-trigger' => 'change', 'data-parsley-minlength' => '10', 'size' => '60x10')) }}

Then I use ('#edit').editable to trigger it. Maybe that's the issue?

What Froala does is wrap around its stuff above my text area..then I use At.js to target .froala-element

@aligajani

This comment has been minimized.

Show comment
Hide comment
@aligajani

aligajani Aug 27, 2015

Looks like Froala isn't letting me trigger any kind of JS, I tried binding events to it too?

aligajani commented Aug 27, 2015

Looks like Froala isn't letting me trigger any kind of JS, I tried binding events to it too?

@rjsmith

This comment has been minimized.

Show comment
Hide comment
@rjsmith

rjsmith Oct 20, 2015

Hi @stefanneculai Looks like this workround for Froala Editor has broken in V2 . See this fiddle using Froala Editor V2:

http://jsfiddle.net/rj_smith/og18qLza/

I just updated your fiddle from your comment above #253 (comment) using the V2 code.

I would be really grateful if you could suggest how to get this working in V2 again ....

rjsmith commented Oct 20, 2015

Hi @stefanneculai Looks like this workround for Froala Editor has broken in V2 . See this fiddle using Froala Editor V2:

http://jsfiddle.net/rj_smith/og18qLza/

I just updated your fiddle from your comment above #253 (comment) using the V2 code.

I would be really grateful if you could suggest how to get this working in V2 again ....

@rjsmith

This comment has been minimized.

Show comment
Hide comment
@rjsmith

rjsmith Oct 20, 2015

Hmm, I have now got the Atwho menu appearing (by initialising it on the 'div.fr-view' element), but when I select an item, it does not get inserted into the editor DOM, instead it adds a blank line:

http://jsfiddle.net/rj_smith/og18qLza/8/

var config = {
    at: "@",
    data: names,
    editableAtwhoQueryAttrs: {
        "data-fr-verified": true
    },
    displayTpl: "<li>${name} <small>${email}</small></li>",
    limit: 200
}

$('.fr-view').atwho(config);

rjsmith commented Oct 20, 2015

Hmm, I have now got the Atwho menu appearing (by initialising it on the 'div.fr-view' element), but when I select an item, it does not get inserted into the editor DOM, instead it adds a blank line:

http://jsfiddle.net/rj_smith/og18qLza/8/

var config = {
    at: "@",
    data: names,
    editableAtwhoQueryAttrs: {
        "data-fr-verified": true
    },
    displayTpl: "<li>${name} <small>${email}</small></li>",
    limit: 200
}

$('.fr-view').atwho(config);
@escopecz

This comment has been minimized.

Show comment
Hide comment
@escopecz

escopecz May 24, 2016

I get the same error when I select the item by arrows and hit enter with Froala 2.2.4 and Atwho 1.5.0:

jquery.at.js:685 The given range isn't in document.

at this line: https://github.com/ichord/At.js/blob/master/dist/js/jquery.atwho.js#L685

Selecting by mouse cursor or by tab works fine. I'll try to downgrade to 1.2.8 as it seems to be working there, but a proper fix for the latest version would be great.

Tested Atwho versions: 1.5.0, 1.4.1, 1.4.0, 1.3.1

v1.3.1 throws another error:

jquery.at.js:1074 Uncaught TypeError: $ is not a function

so I stopped testing lower versions.

escopecz commented May 24, 2016

I get the same error when I select the item by arrows and hit enter with Froala 2.2.4 and Atwho 1.5.0:

jquery.at.js:685 The given range isn't in document.

at this line: https://github.com/ichord/At.js/blob/master/dist/js/jquery.atwho.js#L685

Selecting by mouse cursor or by tab works fine. I'll try to downgrade to 1.2.8 as it seems to be working there, but a proper fix for the latest version would be great.

Tested Atwho versions: 1.5.0, 1.4.1, 1.4.0, 1.3.1

v1.3.1 throws another error:

jquery.at.js:1074 Uncaught TypeError: $ is not a function

so I stopped testing lower versions.

@luongm

This comment has been minimized.

Show comment
Hide comment
@luongm

luongm Sep 30, 2016

FYI, for anyone else getting this error, I followed the example on froala website, but one difference I made which I thought was smart was instead of the following block in froalaEditor.initialized handler:

editor.events.on('keydown', function (e) {
   if (e.which == $.FroalaEditor.KEYCODE.ENTER && editor.$el.atwho('isSelecting')) {
      return false;
   }
}, true);

I moved this in the event listener of froala post initialization:

$('#froala-editor').on('froalaEditor.keydown', function(e, editor, keydownEvent) {
   if (e.which == $.FroalaEditor.KEYCODE.ENTER && editor.$el.atwho('isSelecting')) {
      return false;
   }
});

and that caused the error The given range isn't in document.

So just do exactly as in the tutorial and add the event listener in the froalaEditor.initialized handler and everything will work fine.

luongm commented Sep 30, 2016

FYI, for anyone else getting this error, I followed the example on froala website, but one difference I made which I thought was smart was instead of the following block in froalaEditor.initialized handler:

editor.events.on('keydown', function (e) {
   if (e.which == $.FroalaEditor.KEYCODE.ENTER && editor.$el.atwho('isSelecting')) {
      return false;
   }
}, true);

I moved this in the event listener of froala post initialization:

$('#froala-editor').on('froalaEditor.keydown', function(e, editor, keydownEvent) {
   if (e.which == $.FroalaEditor.KEYCODE.ENTER && editor.$el.atwho('isSelecting')) {
      return false;
   }
});

and that caused the error The given range isn't in document.

So just do exactly as in the tutorial and add the event listener in the froalaEditor.initialized handler and everything will work fine.

@gefangshuai

This comment has been minimized.

Show comment
Hide comment
@gefangshuai

gefangshuai commented Aug 15, 2017

@ichord don't work
image
image

@stefanneculai

This comment has been minimized.

Show comment
Hide comment
@NathanDubord

This comment has been minimized.

Show comment
Hide comment
@NathanDubord

NathanDubord Aug 18, 2017

@stefanneculai I followed the Froala example and have atjs pretty much working, but there's issues with deleting inserted tags. I noticed the markup is slightly off from the example. This is the markup that's getting inserted:
<span class="atwho-inserted" data-atwho-at-query="@" contenteditable="false">@Nathan</span>

And this is the example site:
<span class="atwho-inserted" data-atwho-at-query="@">@Emma</span>

Any idea why I'm getting contenteditable="false"?

My config:

let config = {
    at: '@',
    data: names,
    displayTpl: '<li>${name} <small>${email}</small></li>',
    limit: 100
};

NathanDubord commented Aug 18, 2017

@stefanneculai I followed the Froala example and have atjs pretty much working, but there's issues with deleting inserted tags. I noticed the markup is slightly off from the example. This is the markup that's getting inserted:
<span class="atwho-inserted" data-atwho-at-query="@" contenteditable="false">@Nathan</span>

And this is the example site:
<span class="atwho-inserted" data-atwho-at-query="@">@Emma</span>

Any idea why I'm getting contenteditable="false"?

My config:

let config = {
    at: '@',
    data: names,
    displayTpl: '<li>${name} <small>${email}</small></li>',
    limit: 100
};
@juliantabona

This comment has been minimized.

Show comment
Hide comment
@juliantabona

juliantabona Sep 13, 2017

I'm using summer note WYSIWYG editor, it seems to work and post fine but the trick is when i post the "Hi @Julian" with no follow up text after the name or if i get post the name "@Julian" alone it starts looking funny or the rendered post after the refresh. It only works when i put text on both sides of the name like "Hi @Julian my friend". I noticed that when it fails it posts the query string
![sample]

sample

sample 2

juliantabona commented Sep 13, 2017

I'm using summer note WYSIWYG editor, it seems to work and post fine but the trick is when i post the "Hi @Julian" with no follow up text after the name or if i get post the name "@Julian" alone it starts looking funny or the rendered post after the refresh. It only works when i put text on both sides of the name like "Hi @Julian my friend". I noticed that when it fails it posts the query string
![sample]

sample

sample 2

@chrisfay

This comment has been minimized.

Show comment
Hide comment
@chrisfay

chrisfay Feb 6, 2018

I am seeing the same behavior as @juliantabona. If I don't place text immediately after the match it doesn't insert, but leaves something like this behind that breaks it moving forward:

<span data-fr-verified="true" class="atwho-query">@cfay</span>

chrisfay commented Feb 6, 2018

I am seeing the same behavior as @juliantabona. If I don't place text immediately after the match it doesn't insert, but leaves something like this behind that breaks it moving forward:

<span data-fr-verified="true" class="atwho-query">@cfay</span>

@feroj21

This comment has been minimized.

Show comment
Hide comment
@feroj21

feroj21 Mar 23, 2018

@juliantabona @chrisfay Did you get any solution? I am having same problem.

feroj21 commented Mar 23, 2018

@juliantabona @chrisfay Did you get any solution? I am having same problem.

@loutocky

This comment has been minimized.

Show comment
Hide comment
@loutocky

loutocky Apr 3, 2018

If you want to navigate inside variable, this works for me (froala + at.js)

private froalaInitializedEvent(atJsconfig: Object): Object {
    return function (e, editor) {
      editor.$el
        .atwho(atJsconfig)
          .on('inserted.atwho', function () {
            // we need to edit also text, which was added by autocomplete
            editor.$el.find('.atwho-inserted').removeAttr('contenteditable').removeAttr('data-atwho-at-query');
        })
   editor.events.on('keydown', function (e) {
        if (e.which == $.FroalaEditor.KEYCODE.ENTER && editor.$el.atwho('isSelecting')) {
          return false;
        }
      }, true);
    }
  }

loutocky commented Apr 3, 2018

If you want to navigate inside variable, this works for me (froala + at.js)

private froalaInitializedEvent(atJsconfig: Object): Object {
    return function (e, editor) {
      editor.$el
        .atwho(atJsconfig)
          .on('inserted.atwho', function () {
            // we need to edit also text, which was added by autocomplete
            editor.$el.find('.atwho-inserted').removeAttr('contenteditable').removeAttr('data-atwho-at-query');
        })
   editor.events.on('keydown', function (e) {
        if (e.which == $.FroalaEditor.KEYCODE.ENTER && editor.$el.atwho('isSelecting')) {
          return false;
        }
      }, true);
    }
  }
@ghasemif

This comment has been minimized.

Show comment
Hide comment
@ghasemif

ghasemif Jul 28, 2018

@ichord
I use at.js with Froala Editor but after clearing the selected item , there is a error
"Cannot read property 'top' of undefined"
This bug is on the link below
https://jsfiddle.net/froala/wrc9mu3m/
what should I do ?

ghasemif commented Jul 28, 2018

@ichord
I use at.js with Froala Editor but after clearing the selected item , there is a error
"Cannot read property 'top' of undefined"
This bug is on the link below
https://jsfiddle.net/froala/wrc9mu3m/
what should I do ?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment