开发者

Can jQuery work with partial elements? (ranges)

开发者 https://www.devze.com 2023-03-10 18:49 出处:网络
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 plug

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

0

精彩评论

暂无评论...
验证码 换一张
取 消