Overview

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

Demo

Double+click to edit

View as String View as JSON

Options

`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

HTML

I would like a banana, but not an apple. A few strawberrys would be nice too!

JSON

[
  [
    "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

Dependencies

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

Backbone.subviews

Underscore.string

LiquidMetal.js - fuzzy search in auto-complete

Bullseye - positioning of auto-complete

License

Built by Kevin Jantzer, Blackstone Audio Inc.

Token Editor

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