• Post Reply Bookmark Topic Watch Topic
  • New Topic

WYSIWYG Editor in modalPanel

 
Aj Jaro
Ranch Hand
Posts: 31
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
I've tried a few different editors, like CKEditor and TinyMCE, but I seem to run into the same problem with every one. The text area seems to be disabled in a modalPanel. Everything looks like it displays properly, but the blinking cursor doesn't show up and you can't enter any text. Below is an example of the a4j:form that I use in the modalPanel with TinyMCE.

Do you have any ideas why I wouldn't be able to enter any text into the editor? Is there a different editor that will work better?

 
J. Kevin Robbins
Bartender
Posts: 1801
28
Chrome Eclipse IDE Firefox Browser jQuery Linux MySQL Database Netbeans IDE
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
I'm not sure I understand the problem, but if it's editor related you might want to check out our EditorFaq.
 
Aj Jaro
Ranch Hand
Posts: 31
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Yeah, I probably wasn't as clear as I should've been.

I have a web application and within it a user can click a button to add a comment. When the button is clicked, a modalPanel is shown with a text area and a submit button. This text area is what I'm trying to modify. Currently, the text area is just a standard JSF HTML inputTextArea. I'm looking to enhance that to a more advanced editor, like TinyMCE or CKEditor, that has rich text capabilities. When I try to use one of these editors, the text area within the editor seems like it's disabled where I am unable to enter any text. Why doesn't it work in a modalPanel or what do I need to change to make it work?
 
Aj Jaro
Ranch Hand
Posts: 31
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
The solution on this problem ended up being to execute the tinymce.init JavaScript during the onbeforeshow attribute of rich:modalPanel. There must be some issue if the editor is hidden when initially rendered that doesn't allow you to enter text.
 
Tim Holloway
Bartender
Posts: 18412
58
Android Eclipse IDE Linux
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
I'm late to the party, I see, but I can definitively state that rich editors work in modal panels because I have an app that's absolute full of them.

My suspicion would be that the nature of Modal Panels themselves might be confusing. Unlike a desktop GUI dialog, the Modal Panel is always present on the web page, merely hidden and unhidden as required. As a static part of the page, that means that any controls and data within the dialog are not given the values that are in effect on the Model (backing bean) as of the time that the dialog is made visible, but rather the values that were in effect when the page was initially rendered. To bring the dialog up to date, typically the code that's used to make the dialog visible does an AJAX partial page refresh of the area within the Modal Panel.

The second "gotcha" with Modal Panels is that they normally must exist within a form of their own, not in a general page for (definitely not!) as free-floating controls outside of a form. HTML forms - and thus JSF forms - cannot be nested, so the actual definition of the modal panel and its form must be done outside of any other form(s) that are defined in the View.
 
Aj Jaro
Ranch Hand
Posts: 31
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Yup, I'm following the general modalPanel design, but I do appreciate your input.

However, I did run into another problem using the rich editor on the modalPanel. I can get it to work the first time I open the modalPanel by calling the init() procedure during the onbeforeshow attribute. However, if I hide and then show the modalPanel again, the editor no longer works (ie displays the editor, but no text can be entered). I've tried some variants of removing the editor during the onhide attribute as well as removing and adding the editor during the onbeforeshow attribute. What do I need to do to get the editor to work after the first iteration of hide/show? Below is the current code I'm using where engageEditor() is called during the onbeforeshow attribute of the rich:modalPanel.

 
Aj Jaro
Ranch Hand
Posts: 31
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
I switched everything over to using CKEditor and it works perfectly. Something weird was going on with TinyMCE, but CKEditor seems to work much better between showing/hiding modalPanels.
 
Tim Holloway
Bartender
Posts: 18412
58
Android Eclipse IDE Linux
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
I just realized that you apparently were using TinyMCE by raw brute force but you have RichFaces tags in your example.

RichFaces has a Rich Editor control, It uses TinyMCE, but it allows you to define the control in terms of simple JSF rather than raw JavaScript. That's what I used, and as I said, I have an app that's absolutely loaded with rich editing, both inline and in dialogs.
 
Aj Jaro
Ranch Hand
Posts: 31
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Unfortunately, the rich editor in 3.3 doesn't work well with modalPanels either. This is apparently a known issue (BugTracker), so I'm trying to find other alternatives. I couldn't, however, get the work around to work properly using the domElementAttachment attribute of the modalPanel

I do appreciate your help and suggestions though.
 
Tim Holloway
Bartender
Posts: 18412
58
Android Eclipse IDE Linux
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
I was using RF V 3.3.1.GA and had no problems. The bug report was for 3.3.0.

Be aware, however, that there is a MUCH more serious issue on the horizon.

JBoss has formally stated that RichFaces 3 does not and never will work with Internet Explorer versions 9 and above. I've been having to compensate by adding in an IE8 compatibility header to my pages. Otherwise there's an IE JavaScript compatibility issue that breaks everything.

Microsoft has announced that effective 2016 they will not longer support IE8, which means that anything you code for RF3 may cease functioning within a year as later IE versions stop supporting the IE8 compatibility feature.

The only real cures are:
1) upgrade from RF3 to RF4 or
2) get rid of RichFaces and use some other alternative.

And truthfully, considering the fact that there's no gradual migration path from RF3 to RF4, one is about as bad as the other.
 
  • Post Reply Bookmark Topic Watch Topic
  • New Topic
Boost this thread!