Trang chủ > Uncategorized > Autocomplete plugin for TinyMCE 3

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
  });
});
Tags:
  1. Chưa có phản hồi.
  1. No trackbacks yet.

Gửi phản hồi

Mời bạn điền thông tin vào ô dưới đây hoặc kích vào một biểu tượng để đăng nhập:

WordPress.com Logo

Bạn đang bình luận bằng tài khoản WordPress.com Log Out / Thay đổi )

Twitter picture

Bạn đang bình luận bằng tài khoản Twitter Log Out / Thay đổi )

Facebook photo

Bạn đang bình luận bằng tài khoản Facebook Log Out / Thay đổi )

Google+ photo

Bạn đang bình luận bằng tài khoản Google+ Log Out / Thay đổi )

Connecting to %s

%d bloggers like this: