JSFiddle - React, Tailwind, and code Playground

by samc

HTML

<link rel="stylesheet" href="http://www.sceditor.com/minified/themes/default.min.css">
<script src="http://www.sceditor.com/minified/jquery.sceditor.bbcode.min.js"></script>
<textarea style="width:600px; height:300px"></textarea>

<div id="output"></div>

CSS

#output {
    border: 1px solid #aaa;
    background: #fafafa;
    height: 7em;
    white-space: pre;
    margin-top: 1em;
    overflow: scroll-y;
}

JavaScript

$('textarea').sceditor({
    plugins: 'bbcode',
    width: '100%',
    emoticonsRoot: 'http://www.sceditor.com/',
    style: 'http://www.sceditor.com/minified/jquery.sceditor.default.min.css'
});

var instance = $('textarea').sceditor('instance');

instance.keyDown(function () {
    var range = instance.getRangeHelper().selectedRange();
    
    $('#output').prepend('Down startOffset: ' + range.startOffset + '\n');
    $('#output').prepend('Down endOffset: ' + range.endOffset + '\n');
});

instance.keyUp(function () {
    var range = instance.getRangeHelper().selectedRange();
    
    $('#output').prepend('Up startOffset: ' + range.startOffset + '\n');
    $('#output').prepend('Up endOffset: ' + range.endOffset + '\n');
});