Try typing: banana, apple, orange, strawberry, blueberry
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
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!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.
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