Autocomplete plugin for TinyMCE 3

I’ve made a fork at https://github.com/minhhai2209/TinyMCE-Autocomplete-Plugin from https://github.com/abrimo/TinyMCE-Autocomplete-Plugin.

This fork improves the method to calculate the caret’s current position so that the suggestion list can work as expected on Internet Explorer, Firefox, and Chrome. Also the suggested options as well as their labels are retrieved via callback functions in order to increase the flexibility.

Untitled

Example code:

$(document).ready(function() {

  var autocomplete_options = [
    {
      homepage: 'http://google.com',
      fullname: 'Google Inc.',
      description: 'Google'
    },
    {
      homepage: 'http://google.com',
      fullname: ' GitHub Inc.',
      description: 'GitHub'
    },
    {
      homepage: 'http://yahoo.com',
      fullname: 'Yahoo Inc.',
      description: 'Yahoo'
    },
    {
      homepage: 'http://yelp.com',
      fullname: 'Yelp Inc.',
      description: 'Yelp'
    },
    {
      homepage: 'http://microsoft.com',
      fullname: 'Microsoft Inc.',
      description: 'Microsoft'
    }
  ];

  var matchingOptions = function(currentWord) {
    var matches = [];
    for (var i in autocomplete_options) {
      var option = autocomplete_options[i];
      if (currentWord.length == 0 || beginningOfWordMatches(currentWord, option.description)) {
        matches.push(option);
      }
    }
    return matches;
  };

  var beginningOfWordMatches = function(beginning, option) {
    var test = new RegExp("^" + beginning, "i");
    return (option.match(test));
  };

  var asString = function(value) {
    var a = $('<a/>', { href: value.homepage }).text(value.fullname);
    return $('<div/>').append(a).html();
  };

  $('.tinymce').tinymce({
    theme : 'advanced',
    plugins : 'autocomplete',

    theme_advanced_buttons1 : '',
    theme_advanced_toolbar_location : 'top',
    theme_advanced_toolbar_align : 'left',
    theme_advanced_statusbar_location : 'none',

    autocomplete_matching_options: matchingOptions,
    autocomplete_as_string: asString
  });
});
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s