Is it possible for jQuery to work with partial elements (aka ranges)? Probably not, but does anyone know any plugins? - or would anyone like to collaborate with me 开发者_JAVA技巧on making such a plugin?
Essentially, this is the functionality I'm after:
var $el = $('<div>a b c d</div>');
$el.range(2,3).wrap('<strong>');
console.log($el.html()); // a <strong>b</strong> c d
$el.range(4,5).addClass('super');
$el.range(4,5).addClass('awesome');
console.log($el.html()); // a <strong>b</strong> <span class="super awesome">c</span> d
$el.range(2,5).addClass('shweet');
console.log($el.html()); // a <span class="shweet"><strong>b</strong> <span class="super awesome">c</span></span> d
$el.range(2,5).start; // 2
$el.range(2,5).finish; // 5
$el.range(); // returns $el
$el.selection(); // returns the partial element (aka range) for the current selection
$el.selection(2,5); // would select 'b c', and return their partial element (aka range)
$el.currentLine(); // returns the partial element (aka range) for the current line
Should also work exactly the same on textareas.
Answer can be in either coffeescript or javascript.
Changelog:
- Added
$el.selection()
- Added
$el.currentLine()
Here there is an attempt of doing the plugin. The only problem is that after the first call to .range
some HTML is added, so for the next call chars from 4 to 5 won't be the same. Still looking for some way to resolve that issue.
Update
I've changed the plugin A LOT. Now it is not very pretty but it works. Watch it working here.
All the .spanAddedRange are really are necessary because they must be added with the original html and in that moment you can't know the values that will be use to call .range
method.
Update
Now succeeded by the Slices functionality in the HTML5 Edit project
精彩评论