Warning

Getting selections to work properly across all browsers is not an easy task. In order to make selix work properly across all browsers, selix requires you to make sure that the element is focused before performing a task. In Internet Explorer, this is not very simple. If you click an element in Internet Explorer, that element is focused and the textarea is blurred. To circumvent this, you have to tell Internet Explorer that the element is unselectable. Below is an example of how you can implement this.

<textarea id="post-stuff-here"></textarea>
<span id="header-button" unselectable="on">Add heading</span>
<script type="text/javascript">
var elem = document.getElementById('post-stuff-here');
document.getElementById('header-button').onclick = function() {
  selix.wrap(elem, '<h1>', '</h1>');
};
</script>

Installing

Selix uses Browserify but reverts to using a global namespace if CommonJS does not work. You can also install Selix using Bower.

var selix = require('selix');

bower install selix

Locating the caret positions

var caret = selix.getCaret(elem);
console.log(caret.start, caret.end);

Setting the caret positions

selix.setCaret(textarea, 0, 5);

Get the selected text

console.log(selix.getText(elem));

Set the text selection

selix.setText(elem, 'Hello world');
selix.setText(elem, 'Hello world', true); // Will select the inserted text

Wrap the selected text

selix.wrap(elem, '<h1>', '</h1>');