Forum closed. New forum available at

Using WYMeditor for editing

Discuss features, code, contributions, ideas, suggestions, ...
For bugs, patches and feature requests, please post on the Trac:

Using WYMeditor for editing

Postby preddy on Wed May 26, 2010 6:20 am


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
Posts: 1
Joined: Wed May 26, 2010 6:10 am

Re: Using WYMeditor for editing

Postby mr_lundis on Thu Jun 03, 2010 8:54 pm

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.

Cheers! ;)
Jonatan Lundin - designer, developer and forum moderator. You should follow me on Twitter!
Posts: 335
Joined: Sun Dec 02, 2007 10:59 am
Location: Sweden

Re: Using WYMeditor for editing

Postby quickfur on Tue Sep 14, 2010 3:42 am

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.
Posts: 2
Joined: Sat Jul 31, 2010 4:30 pm

Return to Developers

Who is online

Users browsing this forum: No registered users and 1 guest