Skip to content

Commit ba5d808

Browse files
committed
Updated some docs and default Template to check for the maxDisplayItems
1 parent f85206f commit ba5d808

File tree

2 files changed

+11
-9
lines changed

2 files changed

+11
-9
lines changed

README.md

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -220,6 +220,7 @@ Collection object shown with defaults:
220220
closeOnScroll: true,
221221

222222
// Set maximum number of items added to the input for the specific Collection, if no limit, set to null.
223+
// can only be used with a element in contenteditable mode
223224
maxDisplayItems: null,
224225

225226
// Block specific collection, so it can be triggered or not
@@ -390,7 +391,9 @@ if (tribute.isActive) {
390391

391392
If you want to embed a link in your `selectTemplate` then you need to make sure that the
392393
anchor is wrapped in an element with `contenteditable="false"`. This makes the anchor
393-
clickable _and_ fixes issues with matches being modifiable.
394+
clickable _and_ fixes issues with matches being modifiable. We also recomend adding the `data-tribute-trigger=""`
395+
attribute to the anchor so that Tribute can check for the maxDisplayItems limit.
396+
394397

395398
```js
396399
var tribute = new Tribute({
@@ -408,11 +411,11 @@ var tribute = new Tribute({
408411
],
409412
selectTemplate: function(item) {
410413
return (
411-
'<span contenteditable="false"><a href="http://zurb.com" target="_blank" title="' +
412-
item.original.email +
413-
'">' +
414-
item.original.value +
415-
"</a></span>"
414+
'<span contenteditable="false">' +
415+
'<a href="http://zurb.com" target="_blank" data-tribute-trigger="@" title="' + item.original.email + '">' +
416+
item.original.value +
417+
'</a>' +
418+
'</span>'
416419
);
417420
}
418421
});

src/Tribute.js

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -208,9 +208,8 @@ class Tribute {
208208
return `${this.current.collection.trigger}${this.current.mentionText}`;
209209
if (this.range.isContentEditable(this.current.element)) {
210210
return (
211-
'<span class="tribute-mention">' +
212-
(this.current.collection.trigger +
213-
item.original[this.current.collection.fillAttr]) +
211+
'<span class="tribute-mention" data-tribute-trigger="' + this.current.collection.trigger + '">' +
212+
(this.current.collection.trigger + item.original[this.current.collection.fillAttr]) +
214213
"</span>"
215214
);
216215
}

0 commit comments

Comments
 (0)