Using WYMeditor for editing

[preddy]

Hi,

I have a very simple requirement when it comes to editing documents. I have evaluated ton's of Rich Text Editors and most of them just produce junk and it's absolutely unusable in my scenario. WYMEditor is one of the very few one's which looks promising.

I have a WebSite where the administrator of the portal can upload text using Text Editor and store it in the database. There are lots of users who would log into the system and read whatever is uploaded by the Administrator. So far, so good. But the catch is, some of the user's can edit only certain portions of the text like Phone Numbers, Email Address and few other lines of text that is relevant to them.

Is there any way I can use WYMEditor to achieve this functionality?? I want to be able to distinguish editable and no-editable words, so that when a user wants to edit the text, he will be presented with a text box only for the words he is authorized to edit.

One of the reasons why I want to user WYMeditor is, it produces clean XHTML. That way i can store the content of the document as an XML in the database. If there is any way to identify the editable fields ( ie., wrap them a tag with "edit" attribute ), it would work wonders for me.

Also, I need to have the print functionality.

Please let me know if this can be achieved or not.

--
Preetham Reddy

[mr_lundis]

Hi!
This isn't possible in the current version of WYMeditor (due to technical limitations in designMode.) However it will be possible to achieve in 0.6/2.0 since were migrating to contentEditable, but it's not on the road map, at least not for the first releases.

For now, take a look at Jeditable. You could use Jeditable for users with limited access, and WYMeditor for those who have full access.

http://www.appelsiini.net/projects/jeditable

Cheers!

[quickfur]

Actually, you can simulate this by using JQuery to attach, for example, click handlers around the SPAN's or other containers that you have conveniently marked with, say, class="edit". When you click on the SPAN, it opens up a window containing a WYMEditor instance containing the content of the SPAN that the user can edit. Then you can have a save button that saves the results back to the SPAN. This is what I've done for a project I'm working on (I also have :hover handlers for editable stuff that gives the user a visual cue as to what is editable and what isn't).

Basically, I use javascript to create a hidden DIV containing the WYMeditor instance, plus some extra buttons like SAVE or CANCEL, and the click handlers copy the SPAN or DIV's content into the WYMeditor's textarea, and the SAVE button copies the result back (using wym.xhtml() so it is clean). I know this is a bit of a roundabout way of doing it (instead of attaching WYMeditor directly to the SPAN), but it does let you edit all sorts of tags that may otherwise be difficult to attach to WYMeditor, and it also lets you do back-end checks before updating the SPAN/DIV/whatever with the new content.

For my project, in fact, I never copy wym.xhtml() back into the tag, but instead send it back to the server via AJAX, and the AJAX response is what actually updates the tag. This way, I can do extra checks and processing on the server side. You can even have the main document formatted differently from what the user gets to edit in the WYMeditor textarea: when the user clicks on the editable area, an AJAX request retrieves the WYMeditor-editable content from the server (which may be different from the actual HTML being shown on the main page), and once the user saves the edit, again AJAX is used to retrieve the re-formatted HTML to replace the editable area (which again may be different from wym.xhtml()). This gives you a lot more flexibility in how you display the actual page vs. what the user gets to change in WYMeditor.