Built with Seam
You can find the full source code for this website in the Seam package in the directory /examples/wiki. It is licensed under the LGPL.
| Online: | 27 Members of 4187 |
| Forum: Seam Users |
 |
22. Mar 2008, 19:35 CET | Link |
Hey. Just wondering if anyone here might know of a good WYSIWYG text area style control for JSF. The use case would be instead of an inputTextarea, I would use this control to give buttons, kind of like BB code. Maybe something like what this site is using for the formatting in the drop down, but maybe already laid out like you would see on a phpBB forum or vBulletin.
Obviously, the other end of it would be the BB code rendering engine.
Maybe I should just download this site and see how it's doing it, unless there's something already built into seam?
Thanks,
John
Hi there
Seam has support for a wiki like syntax, have a look here in the Seam documentation for the formattedText tag.
You can vote for a rich editor on the RichFacesFuture wiki page.
Other wise people seem to be using various other java script wysiwyg editors MyFades wiki
Cheers, Micke
In addition to Micke's suggestions, I have wrapped the YUI RTE as a JSF control in the Mojarra Scales project. You can see a screen shot here https://scales.dev.java.net/ (sorry about the formatting. I'll try to fix that. dev.java.net's web site editing/support is quite lacking, to put it kindly) and a live demo here http://jsftemplating.org/mojarra-scales-demo-facelets/htmlEditor.jsf.
I believe that the JSF control that Jason posted is the closest to what I'm looking for. In my opinion, things like wiki syntax work if you're but for the everyday user it's a pain to learn.
Jason, how difficult is it to add a second JSF component provider to the mix if I'm already using richfaces? This looks primarily client side, so I assume the value coming back is only the fully marked up HTML, correct?
John, off hand, I'm not 1005 sure. In theory, it should work, but I haven't been able to test that yet. It's on my too long to do list. If you beat me to it, I'd love to hear your findings. If it doesn't work now, I'll be sure to make it.
Well, it did not go as pretty as I had hoped. I finally got a chance to try this out.
This is what I did:
1. put the scales jar into the WEB-INF/lib directory.
2. On my facelet, added the follow xmlns
3. Added the following call to the htmleditor
4. Built the app
5. Started Jboss
6. Cry as I saw this exception
I don't suppose you have any insight on this?
Ooops, missed the first line.
Exception sending context initialized event to listener instance of class org.jboss.web.jsf.integration.config.JBossJSFConfigureListener
Have you add the jasftemplating-base jar (http://download.java.net/maven/1/com.sun.jsftemplating/jars/jsftemplating-base-1.2-SNAPSHOT.jar)? I'm guessing/hoping that the includes a NoClassDefFoundException.
Now I did. The app starts. When I try to load a page w/ the html editor on it, I get the following, on the seam debug page:
This may be partially due to how I'm loading my facelets. Default extension is XHTML, so a4j might be thinking it's a facelet, rather than an HTML page.
Thoughts?
I really like OpenWYSIWYG, and have integrated it easily into a JSF/Facelets page (although not as a JSF tag). The code is as simple as this:
<script type="text/javascript" src="#{facesContext.externalContext.requestContextPath}/openwysiwyg/wysiwyg.js"></script> <h:form id="editpost"> <h:inputTextarea id="content" value="#{postAction.post.content}"/> <script type="text/javascript"> <!-- generate_wysiwyg('editpost:content'); // --> </script>All you need to do is make sure you specify an ID for your form and text area control.
I tried your approach as well. It didn't render. Honestly though, I'd prefer the JSF control to anything else.
Hey Shane how about a another revision of your code. It doenst render. throws javascript error
buttonName has no properties http://foo:8080/foor/foo/wysiwyg/wysiwyg.js Line 246 generate_wysiwyg("editpost:content")wysiwyg.js (line 246) [Break on this error] for (var i = 0; i <= buttonName.length;) {'Why don't you try using logical logic this time. That's a plan that should work.'
hey, i used fck-faces source to integrate fck-editor with seam, its really simple to use, just
writing to my web.xml:
and in my xhtml:
xmlns:fck="http://www.fck-faces.org/fck-faces" <fck:editor toolbarSet="Default" height="500" width="100%" id="myComponentId" value="#{myManagedBean.text}" />then get latest version of fckEditor and copy in WEB-INF/
last step, send me mail and ill send JAR file to you copy in WEB-INF/lib
with this you can add converter or validator like any other component JSF.
my mail: dcoronel@fpf.br