A loss of data while shifting nodes with a WYMeditor within

[dor]

Hi,

I've built a small class in Javascript that changes the HTML nodes (i.e. HTML tags) location. I call it "Nodes Handler".
The nodes moving is done with the replaceChild() function and the insertRow() function (both JS functions of course).
The HTML structure is as follows:

Code: Select all

<table id="myTable">
   <tr><td>
      <table><tr>
         <td class="delete">Remove</td>
         <td>
            <textarea class="wymeditor">data...</textarea>
         </td>
         <td class="up">Up</td>
         <td class="down">Down</td>
      </tr></table>
   </td></tr>
</table>

( I didn't write the JS code of the Nodes Handler class because that I didn't think it's needed. If you want me to post it, no problem, just write and I will post it + a sample that show how it works).

When using a simple textarea (not a wymeditor textarea), the script works OK and the data is saved.
But when using the WYMeditor instead of the simple textarea, the data is lost after changing the location of the editor (moving it up or down in the DOM tree).

I want to keep this feature of the Nodes Handler in my system, but this problem really bugs me.
Is there any way to fix it?

Thanks in advance,
Dor.

[dor]

Two more things I've noticed:

1. While shifting nodes with a WYMeditor within, the data is NOT lost.
The WYMeditor is actually resetting itself, and therefore the text within is replaced with the initial text (The text that the WYMeditor had from the first place, when the page was loaded).

2. How can I dynamically add a WYMeditor to the page via Javascript/DHTML/DOM/whatever ?
Is it possible to add by the ID of the WYMeditor or it's parent ID or something...?

Thanks,
Dor.

[jfh]

A test page would be great.
I also suggest taking a look at jQuery, which provides these kinds of DOM manipulations.

About 2), you can for example dynamically insert a textarea with class 'wymeditor' into the DOM, and then initialize it with $('.wymeditor').wymeditor();

[dor]

I've made a test page.
I hope it's not too large...

A test page would be great.
I also suggest taking a look at jQuery, which provides these kinds of DOM manipulations.

I thought so, but I prefer to make one on my own.

About 2), you can for example dynamically insert a textarea with class 'wymeditor' into the DOM, and then initialize it with $('.wymeditor').wymeditor();

Well... It duplicates the WYMeditor that are already existing on the HTML document.

You'll see it all on the test page.
Just make sure to include (in the same folder of the test page) the "wymeditor" folder and "jquery" folder, otherwise the Jscript won't work...

The test page is attached to my message.
A link:

WYMeditor_NodesHandler.html.rar

The test page.

(2.3 KiB) Downloaded 342 times

Tell me if you want me to clarify something.

Thanks!
Dor.

[jfh]

Dor,
I've added a test page which uses jQuery UI sortable, so you can move up/down WYMeditors with your mouse (and also dynamically add WYMeditor instances).
Is this what you want?

You need the latest code base in order to test it locally (svn up -r 527).

[dor]

I've added a test page which uses jQuery UI sortable, so you can move up/down WYMeditors with your mouse (and also dynamically add WYMeditor instances).
Is this what you want?

Wow!
It sure looks great, but I think it would be difficult to integrate it in my code.
As you can see in my test page, I need to synchronize the up/down shifting with the proper element in another table.
I'm not sure how do to it with jQuery.
Moreover, the moving elements have also different plain texts (besides the WYMeditor) in them. I don't know how to do it with jQuery...

The final solution should include the structure as in the test page I've uploaded.

You need the latest code base in order to test it locally (svn up -r 527).

I'm sorry, but I don't understand what files I need to add?
Is the jQuery sorting feature requires additional Javascript files?
Or you meant that I need the latest WYMeditor version? The WYMeditor version I have is: 0.5-alpha-1

Thank you for your help,
Dor.

[mr_lundis]

You need the latest code base in order to test it locally (svn up -r 527).

I'm sorry, but I don't understand what files I need to add?
Is the jQuery sorting feature requires additional Javascript files?
Or you meant that I need the latest WYMeditor version? The WYMeditor version I have is: 0.5-alpha-1

Thank you for your help,
Dor.

You will need both the latest svn revision of WYMeditor and the jQuery UI files.

WYMeditor download (SVN Checkout):
http://www.wymeditor.org/en/download/

The jQuery UI page:
http://ui.jquery.com/