Should use offeset instead of position

[pedroteixeira]

.position() is relative to parent. Switching to .offset() in the displayOptionList function fixes it!

regards.

[abrimo]

Hi Pedro,

Thanks for the input, I've just tested out using the offset and it causes the dropdown to move to the beginning of the line when you delete text while the dropdown is showing. I don't know of any specific issue affecting Chrome, Firefox or Safari but there could be an issue with using position in IE.

Which browser are you using and what is the specific issue that offset will fix (just so I can replicate and test it)?

Regards

Adam

[pedroteixeira]

Hi Adam,

Have you managed to run it on IE? It seems that some of the attributes are undefined, such as: ed.selection.getSel().anchorNode

I had a complex layout, where tinymce was placed inside a container with floating left, etc in Chrome, when I switched to .offset() it worked for me here.

But I am trying now to make it work on IE. For instance, my attempt to make the getCurrentWord work:

    if($.browser.msie) {
      var range = sel.createRange();
      // nodeText = range.text;
      nodeText = ed.selection.getNode().innerText;
      positionInNode = nodeText.length; // range.offsetLeft;
    } else {
      nodeText = sel.focusNode === null ? "" : sel.focusNode.nodeValue;
      positionInNode = sel.focusOffset;
    }

Do you have any suggestios?

cheers, Pedro

[abrimo]

Hi Pedro,

Thanks, I'll have a look and see however the problem with IE is that IE7 8 and 9 all handle nodes, offsets and positions differently. The current version is functional in IE9 however in IE7 and 8 getCurrentWord will return nothing.

It would be good to fix it in IE7/8 but I think each browser will need a different solution for both getting the current word and positioning the dropdown. One of the main issues is that it's not possible to get the caret position in any browser in a content editable, hence some tricks around the node and offsets are required.

Which exact version of IE are you using?

Thanks

Adam

[pedroteixeira]

I'm trying to run it on IE8. Currently, the offending bit is in the selectOption function:

    var range = ed.selection.getRng();
    range.setStart(range.startContainer, range.startOffset - matchedText.length);
    ed.selection.setRng(range);

would you know an alternative for IE?

thanks a lot

[pedroteixeira]

Hi, it seems that the following code does the job:

    if($.browser.msie) {
      range = ed.getDoc().body.createTextRange();
      range.moveToElementText(ed.selection.getNode());
      range.findText(matchedText, 1, 1 | 2 | 4);
      range.select();

    } else {
      range = ed.selection.getRng();
      range.setStart(range.startContainer, range.startOffset - matchedText.length);
      editing.selection.setRng(range);
    }

Did I miss somehting?

[chocnut]

Hi, I agree with @pedroteixeira I also tried this in my wordpress site using chrome. Changing var tinymcePosition = jQuery(ed.getContainer()).position(); to .offset() fix my issue with the position of the list.

[MrPapa]

Did anyone ever solve the IE issues... working great in all browsers, but IE totally borked (situation normal)... IE 7/8 dont even get autocomplete... IE 9/10 get the autocomplete but error out otherwise...

@pedroteixeira has alluded to all errors I am seeing... have you solved? you initially mentioned an issue with getCurrentWord() but then seemed to move past that to the SelectOption() issue... did you solve the getCurrentWord() problem? It seems to be

var nodeText = ed.selection.getSel().focusNode == null ? "" : ed.selection.getSel().focusNode.nodeValue;

which is failing in IE... all other browser return the expected autocomplete string, but in IE, focusNode is null, so problems arise...

any help would be appreciated... hope this effort still supported... 2 months since last update - not too bad... ;)

[pedroteixeira]

Yes, I managed to have it working. Just pushed it to: https://github.com/pedroteixeira/TinyMCE-Autocomplete-Plugin/blob/master/src/autocomplete/editor_plugin_src.js

Hope the following snipped of usage helps make sense of it:

    tinyMCE.init({
      mode: 'exact',
      theme : "comment",
      width: '100%',

      extended_valid_elements: "span[class|data-id|data-type]",
      keep_styles : false,
      convert_fonts_to_spans: true,
      plugins: "autocomplete, autoresize, tabfocus, noneditable, paste",

      paste_auto_cleanup_on_paste: true,
      paste_remove_styles: true,
      paste_text_linebreaktype: true,
      paste_remove_spans: true,

      "autocomplete_generate_list_function" : Mentions.buildHtmlList,
      autocomplete_list_css: 'mention',
      autocomplete_fetch_data: _.throttle(Mentions.fetch, 800),
      autocomplete_trigger: ['@'],
      tabfocus_elements: "el_submit"
    });

   fetch: function(currentWord, next, ctx) {
      var trigger = currentWord.charCodeAt(0);
      var wordLessTrigger = currentWord.substring(1);

    $.ajax({
      type: 'GET',
      url: url,
      data: 'q=' + wordLessTrigger,
      success: function(data) {
        next(data);
      }
    });
  }

and buildHtmlList: function(matches, matchedText) should return html for the options.

[pedroteixeira]

hmm, just remembered: I just implemented a fallback for some browsers, and the autocomplete options are shown at a fixed position beneth the tinymce textarea. That was har far I got, didn't have time to investigate it further.

[MrPapa]

thanks... will take a look... seems you went deeper than browser compatibility changes... new options and all... ;)

[MrPapa]

okay, have worked out enough of what you were doing to get mine working without changing the underlying functionality... thanks!

[abrimo]

Ahh great, older versions of IE are pretty tricky. Did you want to submit a pull request if you have it working?

[MrPapa]

then I would have to learn how to use git ;) too much time on svn...

need to check some other browsers first and play with the IE location of the autocomplete popup... its in the tinymce area, but not tied with the cursor position so want to work that...

also, not sure if I 'kept' all the functionality... was pretty focused on my implementation... but no issue sharing... @pedroteixeira provided the last few keys too...