Xinha Discussion Forum

sjd

New member

Registered: 2007-01-15

Posts: 3

How to wrap elements in a div?

Hi

I'm trying to write a plugin that would wrap selected elements in a div while in wysiwyg mode. However, I'm having problems finding the selected elements. For example, if I wanted to wrap the following HTML:

<h2>Title</h2>
<p>First paragraph</p>
<p>Second paragraph</p>
<p>Third paragraph</p>

Getting the selected text is no problem, but I want to be able to check that a whole node has been selected, or just expand the selection to include whole nodes. So if "paragraph</p><p>Second" was all that had been selected either an error could be shown, or the selection changed to include all of the first two paragraphs. I can get the first node in a selection, but can't seem to find where the last selected node would be. I thought about getting the first node and then moving along it's siblings until the selection has ended, somehow using the carat positions to check if the sibling node was in the selection... But I can't get it to work (and I'm not even sure it's possible).

If anyone can point me in the right direction, or can think of another plugin that does the same sort of thing I would be very grateful.

Thanks for your help

jedi58

Xinha Authority

From: Leicester, UK

Registered: 2007-01-14

Posts: 113

Website

Re: How to wrap elements in a div?

can't remember the exact function names, but if you create your own button, and then later define it's function as something like:

function(e) { e._yourFunction(); }

you can then further down add:

Xinha.prototype._yourFunction = function () {
    var sel = editor._getSelection();
    var range = editor._createRange(sel);

    ....

}

from there you can wrap the div around the range, or append it as a child of a new div and replace the range with the new div.

I imagine someone else here should be able to give a much better way tho

---

David G. Paul
[url]http://www.newearthonline.co.uk[/url]

jedi58

Xinha Authority

From: Leicester, UK

Registered: 2007-01-14

Posts: 113

Website

Re: How to wrap elements in a div?

just for clarification, that first block I mentioned with the function being defined is a new value for this.btnList, where it is part of:

yourFunction: [ "Your Function", "ed_yourFunction.gif", false, function(e) { e._yourFunction(); } ],

---

David G. Paul
[url]http://www.newearthonline.co.uk[/url]

ray

Xinha Administrator

From: Germany

Registered: 2005-03-23

Posts: 521

Website

Re: How to wrap elements in a div?

Using the range object in Mozilla you are able to find out the nodes where the selection starts and ends, see http://developer.mozilla.org/en/docs/DOM:range. Unfortunately the range object in IE as well as the documentation on msdn are dreadfully insufficient, see http://msdn.microsoft.com/workshop/auth … trange.asp. In short it is hard to impossible to work with nodes with IE textRange object, as the moving methods work with categories like character and sentence.

In fact the documentation is a joke. What is one supposed to do with vague statements like "Modify the extent of the text range by moving its start and end positions with methods such as move, moveToElementText, and findText." instead of a comprehensive list of the methods available???

sjd

New member

Registered: 2007-01-15

Posts: 3

Re: How to wrap elements in a div?

Thanks for your help, I'll look into your suggestions.