11 Replies Latest reply on Nov 3, 2011 1:10 PM by lfryc

How to use RF4.1 M2 rich editor?

echofloripa Oct 17, 2011 1:44 PM

I'm trying to use the new rich editor bundled on RF4.1.

if I try the following:

<rich:editor id="${id}" value="#{value}">

<f:facet name="config">

CKEDITOR.replace( 'editor1',

{

toolbar : 'Basic',

uiColor : '#9AB8F3'

config.language = 'pt-br';

});

</f:facet>

</rich:editor>

It shows an empty box, and the value is pure text.

I then tried to check the examples mentioned on this blog post about the release of rf4 m2 rich editor:

https://github.com/richfaces/dev-examples/blob/develop/input-demo/src/main/webapp/examples/editor.xhtml

But this example uses "http://richfaces.org/input name space, which doesn work for M2.

I couldnt find any examples of rich editor on the M2 richfaces showcase.

Could anyone give me an working example of the richeditor with configuration to show a basic toolbar which saves the content as html?

thanks

Emerson

1. Re: How to use RF4.1 M2 rich editor?

echofloripa Oct 17, 2011 2:35 PM (in response to echofloripa)

Looking at the release blog postI I tried changing the editor tag to:

<rich:editor id="${id}" value="#{value}" toolbar="full" lang="pt-br">

But still all I can see is an empty text area...
Actions
2. Re: How to use RF4.1 M2 rich editor?

echofloripa Oct 17, 2011 5:08 PM (in response to echofloripa)

anyone has used that could show a working example of the tag being used with RF4.1 M2?
Actions
3. Re: How to use RF4.1 M2 rich editor?

satangoss Oct 18, 2011 3:23 PM (in response to echofloripa)

I'm having the same problem, anyone got it?
Actions
4. Re: How to use RF4.1 M2 rich editor?

echofloripa Oct 19, 2011 11:25 AM (in response to satangoss)

We really need this to finish a project this week. I can imagine that many users might be confused with the documentation given in the release blog.
If we can not get this working until today we will have to resort on the primefaces rich editor, although we wanted to stick to a single solution.

any ideas are very welcome...

thanks
Emerson
Actions
5. Re: How to use RF4.1 M2 rich editor?

echofloripa Oct 21, 2011 1:45 PM (in response to echofloripa)

Did anyone managed to have a look on this?
It seems we will have to stick to richfaces for the richedit, or the other option would be to replace all the richfaces on the application for other framework, which is impracticable...

Any suggestion of referrence will be greatly appreciated.

thanks
Emerson
Actions
6. Re: How to use RF4.1 M2 rich editor?

lfryc Oct 24, 2011 4:08 AM (in response to echofloripa)

Hi guys,

you should look at both blogs about rich:editor I have written:

[1] http://rik-ansikter.blogspot.com/2011/08/editor-for-richfaces-41.html
[2] http://rik-ansikter.blogspot.com/2011/09/improvements-of-richfaces-editor-in.html

I assume your problem is based ResourceServlet missing in your web.xml, this configuration is mentioned in [1].
Actions
7. Re: How to use RF4.1 M2 rich editor?

echofloripa Oct 27, 2011 3:47 PM (in response to lfryc)
That's true, I was really missing the servlet.

But now when I load a page with the editor I'm getting the following error on the line 59 of the editor.js.jsf:

Uncaught ReferenceError: CKEDITOR is not defined
$.extend.__initializationHandlereditor.js.jsf:59
jQuery.extend.proxy.proxyjquery.js.jsf:806
jQuery.extend._Deferred.deferred.resolveWithjquery.js.jsf:1008
jQuery.extend.readyjquery.js.jsf:436
DOMContentLoaded

The code above mentioned is the bold one below:

__initializationHandler : function() {
this.ckeditor = CKEDITOR.replace(this.textareaId, this.__getConfiguration());

Any ideas?
Actions
8. Re: How to use RF4.1 M2 rich editor?

lfryc Oct 31, 2011 11:20 AM (in response to echofloripa)
It seems ckeditor.js is not loaded properly?

Could you check that your page source contains the similar definition before the ending </body> tag?

<script type="text/javascript" src="/org.richfaces.resources/javax.faces.resource/org.richfaces.staticResource/4.1.0-SNAPSHOT/Packed/org.richfaces.ckeditor/ckeditor.js"></script>
Actions
9. Re: How to use RF4.1 M2 rich editor?

lfryc Oct 31, 2011 11:21 AM (in response to echofloripa)

You should also check Firebug/Developer tools for any issues in resource loading.
Actions
10. Re: How to use RF4.1 M2 rich editor?

echofloripa Nov 3, 2011 12:25 PM (in response to lfryc)

I found out what the problem was.
The template of my pages was using <html> and <body> tags directly. Once I changed to <h:html> and <h:body>, the editor started to work fine.

I was getting the following warning:
INFO: WARNING: FacesMessage(s) have been enqueued, but may not have been displayed.
sourceId=null[severity=(ERROR 2), summary=(One or more resources have the target of 'body', but no 'body' component has been defined within the view.), detail=(One or more resources have the target of 'body', but no 'body' component has been defined within the view.)]

Thanks for all
Emerson
Actions
11. Re: How to use RF4.1 M2 rich editor?

lfryc Nov 3, 2011 1:10 PM (in response to echofloripa)

Great stuff, Emerson,

I will make sure mention that in documentation!

~ Lukas
Actions

Go to original post