Token Editor

Merging the idea of a "tag list" and "@mention" auto-complete into one.

Try typing: banana, apple, orange, strawberry, blueberry


Version 0.2.0

A basic text editor with tokens that are used via auto-complete. Tokens cannot be modified by the keyboard but appear as "objects" within the text box.

The editor is designed to be used completely with the keyboard only, thus, the auto-complete results cannot be selected with the mouse.

Instead, use the up and down arrows to choose, then press enter to select.

Note: this plugin was developed for use in Chrome. Other webkit browsers should work too, but untested. If you find browser issues, please post a ticket


Double+click to edit

View as String     View as JSON



className: ''

Optional classname for the token editor. Useful for applying themes and different styles.

value: ''

The value of the editor upon initialization.

The value can be an HTML string or JSON structure. Both of these values can be retrieved from the editor with toHTML() and toJSON() respectively

I would like a <span contenteditable="false" class="token" data-id="1" data-color="yellow"><span>banana</span></span>, but not an <span contenteditable="false" class="token" data-id="2" data-color="various"><span>apple</span></span>.<br class="newline">A few <span contenteditable="false" class="token" data-id="4" data-color="red"><span>strawberry</span></span>s would be nice too!
    "I would like a ",
      "label": "banana",
      "attrs": {
        "id": "1",
        "color": "yellow"
    ", but not an ",
      "label": "apple",
      "attrs": {
        "id": "2",
        "color": "various"
    "A few ",
      "label": "strawberry",
      "attrs": {
        "id": "4",
        "color": "red"
    "s would be nice too!"

autoComplete: {}

The options for auto-complete. The most important one being items

  items: [],
  minLen: 2,
  maxResults: 4,
  minScore: 0.9
items: []

The items to appear in auto-complete. This option can be set later on using setAutoCompleteItems

label is required. attrs is optional and extendable with any data. A likely attribute would be an id

  {label: 'banana', attrs:{id: '1', color: 'yellow'}},
  {label: 'apple', attrs:{id: '2', color: 'various'}},
  {label: 'orange', attrs:{id: '3', color: 'orange'}},
  {label: 'strawberry', attrs:{id: '4', color: 'red'}},
  {label: 'blueberry', attrs:{id: '5', color: 'blue'}},
  {label: 'apple sauce', attrs:{id: '6', color: 'pale yellow'}},
  {label: 'apple juice', attrs:{id: '7', color: 'pale yellow'}},

A hint property can be added (string or array of strings) to trigger autocomplete.

  {label: 'banana', hint:'fruit', attrs:{id: '1'}},
  {label: 'apple', hint:['fruit', 'manzana'], attrs:{id: '2'}},
  {label: 'carrot', hint:'vegetable', attrs:{id: '3'}},

Typing fruit will display banana and apple

multiLines: true

Set this to false if you want the editor to perform more like an input with no line breaks. The editor will still grow in height when wrapping words.

TODO: make editor look and act like an input where text overflows and scrolls while user types.

allowPaste: false

Pasting is disabled by default so extraneous styles and tags are not put in to the editor. You can enable pasting if you wish, but know the editor may have unintended issues.

TODO: add a cleanup method for when pasting is enabled.

allowStyling: false

By default, keyboard shortcuts for bold and italics are disabled. Set to true to allow this feature.

Note: toJSON() does not retain styling tags. You'll want to use toHTML()

editing: false

Should the editor be in editing mode upon initialization?

dblClickToEdit: true

Unless editing: true the editor will not be editable until the edit() method is called. By default, double clicking on the editor enables editing. You can turn this feature off if you wish to control it programmatically


Backbone.js (and its dependencies: underscore, jquery)



LiquidMetal.js - fuzzy search in auto-complete

Bullseye - positioning of auto-complete


MIT © Kevin Jantzer

Built by Kevin Jantzer, Blackstone Audio Inc.