Colorfy #Tags And @Mentions In An Editable Content - jQuery autotag

File Size: 24.3 KB
Views Total: 1628
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Colorfy #Tags And @Mentions In An Editable Content - jQuery autotag

autotag is a simple-to-use jQuery plugin that automatically highlights the #tags and @mentions typed in a contentEditable element.

How to use it:

1. Create an editable container as this. In practice, you would probably want to save the contents into a textarea that is hidden, prior to POST.

<div id="snippet" contentEditable="true"></div>

2. Include jQuery library and the jQuery autotag plugin's script on the webpage.

<script src="//code.jquery.com/jquery-3.2.0.slim.min.js"></script>
<script src="jquery-autotag-1.1.min.js"></script>

3. Initialize the plugin on the editable container. By default, the plugin does not set focus on the editable element. You can either uncomment the line in plugin or just call focus().

$('#snippet').autotag().focus();

4. The below are browser specific hacks. Make sure to include them in your CSS.

#snippet > p {
  margin: 0;
}

#snippet > a {
  display: inline;
}

5. Apply your own styles to the #tags and @mentions.

.hash-autotag { color: red; }
.at-autotag { color: green; }

6. Configuration options.

  • splitter: A function that can receive a string, split it and return the parts as an array. If not provided, the default splitter is used.
  • decorator: A function that receives nodes that need to be processed. Use the decorator to apply styles on the node or do whatever processing you wish to do. If one is not provided, the default decorator will be used.
  • trace: Set this to true to see debug messages on the console.

Change logs:

2017-05-06

  • v1.0.4

2017-04-17

2017-04-13

  • Fixed issue with caret position.

This awesome jQuery plugin is developed by motorstreak. For more Advanced Usages, please check the demo page or visit the official website.