-
1. Re: Rich:editor can't select text area to enter text in firefox
mpgong Feb 24, 2012 10:01 AM (in response to mpgong)Further investigation seems to indicate that there is something odd with possibly how i'm using the editor.
I have it in a popupPanel and it seems to be ok'ish if the toolbar isn't showing. Though there is no option to turn it off, but the following seems to remove it.
<h:form id="noteForm">
<rich:popupPanel id="addNotePane" modal="true" moveable="true"
header="Task Notes" width="620" height="365"
domElementAttachment="form">
<f:facet name="controls">
<h:graphicImage value="/resources/images/close.png"
style="cursor:pointer"
onclick="#{rich:component('addNotePane')}.hide()" />
</f:facet>
<rich:editor id="task_notes" value="#{StatusFormBean.editedTask.taskNotes}">
<f:facet name="config">
toolbar : Basic,
resize_enabled : false
</f:facet>
</rich:editor>
<h:panelGrid columns="2"
style="text-align:center;margin-top:10px">
<a4j:commandButton value="Save"
execute="addNotePane"
action="#{StatusFormBean.processSaveTaskNotes}"
oncomplete="#{rich:component('addNotePane')}.hide();" />
<a4j:commandButton value="Cancel" execute="@this"
onclick="#{rich:component('addNotePane')}.hide();"/>
</h:panelGrid>
</rich:popupPanel>
</h:form>
Does anyone know what might be wrong with the above usage?
Thanks
-
2. Re: Rich:editor can't select text area to enter text in firefox
lfryc Feb 24, 2012 1:08 PM (in response to mpgong)Hey Michal, I can't see nothing wrong on your usage,
I can only guess there are z-index problems.
You can try Firebug and instant CSS editting in the DOM inspection editor to give Editor higher z-index.
-
3. Re: Rich:editor can't select text area to enter text in firefox
hedes Mar 18, 2012 4:20 AM (in response to mpgong)Hello
i have the same issue. I thnik it is due to initialization CKEditor: when CkEditor is not initialized at the page loading phase, we cannot not use it. I have the same issue on GWT: when i display a page with CkEditor, i always initialize it even if it is not displayed/used.
For firefox, i found the following workaround :
- you create a managed bean with properties visible, top, left
- you bind the "visible" property to the "show' attribute of the popup
- you create a richface function which updates the properties and re render the form.
this workaround works fine on IE9/FF but not on Chrome (and maybe Safari).
<h:form id="formPage">
<a4j:commandButton id='ll'
onclick="showPopupPanel('true',Math.round(jQuery(#{rich:element('ll')}.parentNode).offset().top + jQuery(#{rich:element('ll')}.parentNode).height()), Math.round(jQuery(#{rich:element('ll')}.parentNode).offset().left)); return true;"
value="Show">
</a4j:commandButton>
<rich:popupPanel header="Send"
id="sendAdvToAFriendPopUp" autosized="true" modal="true"
show="#{beanWebSendAdvToAFriend.visible}"
top="#{beanWebSendAdvToAFriend.top}"
left="#{beanWebSendAdvToAFriend.left}" moveable="false"
resizeable="false" followByScroll="false">
<f:facet name="controls">
<h:outputLink value="#"
onclick="#{rich:component('sendAdvToAFriendPopUp')}.hide(); showPopupPanel('false') ;return true;">
X
</h:outputLink>
</f:facet>
<h:panelGrid columns="2">
<h:outputText value="Text" />
<rich:editor value="#{beanWebSendAdvToAFriend.textMail}"
id="editor" />
<f:facet name="footer">
<a4j:commandButton value="Envoyer" render="rep"
action="#{beanWebSendAdvToAFriend.send}">
</a4j:commandButton>
</f:facet>
</h:panelGrid>
</rich:popupPanel>
<a4j:jsFunction name="showPopupPanel" render="formPage"
action="#{beanWebSendAdvToAFriend.send}">
<a4j:param name="visible"
assignTo="#{beanWebSendAdvToAFriend.visible}" />
<a4j:param name="top" assignTo="#{beanWebSendAdvToAFriend.top}" />
<a4j:param name="left" assignTo="#{beanWebSendAdvToAFriend.left}" />
</a4j:jsFunction>
</h:form>
Regards
Hery
-
4. Re: Rich:editor can't select text area to enter text in firefox
hedes Apr 6, 2012 10:23 AM (in response to hedes)Hello
here is a hack which is working fine with chrome, with the previous code :
<h:form id="formPage" >
...
<a4j:jsFunction name="showPopupPanel" render="formPage"
action="#{beanWebSendAdvToAFriend.display}"
oncomplete="initializeEditor('editor');"
>
...
</a4j:jsFunction>
<script type="">
function initializeEditor(editor) {
var options = null;
var config = {};
var instance = CKEDITOR.instances['formPage:'+editor+':inp'];
if(instance)
{
instance.destroy(true);
}
new RichFaces.ui.Editor('formPage:'+editor, options, config);
};
</script>
</h:form>
regards.
Hery