The following code is supposed to surround the highlighted text in a given Div with a span.
$(document).ready(function(){
$('.format').click(function(){
var highlight = window.getSelection();
var spn = '<span class="highlight">' + highlight + '</span>';
$('.conttext').content().replace(highlight, spn);
});
});
A function of this nature could be used to provide formating options to an HTML contenteditable DIV.
Something is clearly wrong though as it does not currently work.
http://jsfiddle.net/BGKSN/20/
DEMO: http://jsfiddle.net/BGKSN/24/
$(document).ready(function(){
$('.format').click(function(){
var highlight = window.getSelection();
var spn = '<span class="highlight">' + highlight + '</span>';
var text = $('.conttext').text();
$('.conttext').html(text.replace(highlight, spn));
});
});
Later Edit:
Based on the comment, this is the real functional example:
http://jsfiddle.net/BGKSN/40/
$(document).ready(function(){
$('.format').click(function(){
var highlight = window.getSelection(),
spn = '<span class="highlight">' + highlight + '</span>',
text = $('.conttext').text(),
range = highlight.getRangeAt(0),
startText = text.substring(0, range.startOffset),
endText = text.substring(range.endOffset, text.length);
$('.conttext').html(startText + spn + endText);
});
});
Docs: https://developer.mozilla.org/en-US/docs/Web/API/window.getSelection
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With