Richfaces editor with fileUpload component

[dasgin]

Hi,

We have used TinyMCE with rich:fileupload for custom filebrowser of TinyMCE. Because of the problem between rich:calendar and TinyMCE, we decided to upgrade our component to the rich:editor.

After upgrading, we try to entegrate rich:fileupload with rich:editor for filebrowser but we get some problems like:

"FileUpload is not defined."


The source code of HTML where the problem occurs:

<!--
FileUpload.CLASSES = {
ADD : {
ENABLED : 'rich-fileupload-button rich-fileupload-font ',
DISABLED : 'rich-fileupload-button-dis rich-file-upload-font '
},
ADD_CONTENT : {
ENABLED : 'rich-fileupload-button-content rich-fileupload-font rich-fileupload-ico rich-fileupload-ico-add ',
DISABLED : 'rich-fileupload-button-content rich-fileupload-font rich-fileupload-ico rich-fileupload-ico-add-dis '
},
UPDATE : {
ENABLED : 'rich-fileupload-button rich-fileupload-font ',
DISABLED : 'rich-fileupload-button-dis rich-fileupload-font '
},
UPDATE_CONTENT : {
ENABLED : 'rich-fileupload-button-content rich-fileupload-font rich-fileupload-ico rich-fileupload-ico-start ',
DISABLED : 'rich-fileupload-button-content rich-fileupload-font rich-fileupload-ico rich-fileupload-ico-start-dis '
},
....
...
..


Dou you have any idea about problem?

[dasgin]

FileUpload.CLASSES = {
ADD : {
ENABLED : 'rich-fileupload-button rich-fileupload-font ',
DISABLED : 'rich-fileupload-button-dis rich-file-upload-font '
},
ADD_CONTENT : {
ENABLED : 'rich-fileupload-button-content rich-fileupload-font rich-fileupload-ico rich-fileupload-ico-add ',
DISABLED : 'rich-fileupload-button-content rich-fileupload-font rich-fileupload-ico rich-fileupload-ico-add-dis '
},
UPDATE : {
ENABLED : 'rich-fileupload-button rich-fileupload-font ',
DISABLED : 'rich-fileupload-button-dis rich-fileupload-font '
},
UPDATE_CONTENT : {
ENABLED : 'rich-fileupload-button-content rich-fileupload-font rich-fileupload-ico rich-fileupload-ico-start ',
DISABLED : 'rich-fileupload-button-content rich-fileupload-font rich-fileupload-ico rich-fileupload-ico-start-dis '
},

...


Dou you have any idea about problem?
Thanks..

[ilya_shaikovsky]

please describe your environment in a details and show the code snippets. I've tried your case at richfaces-demo. I've added editor component to the fileUpload sample and both components works fine for me.

[dasgin]

Hi again,

rich:editor component:

<rich:editor id="xx" value="xx" theme="advanced" configuration="editorconfig">
 <f:param name="language" value="tr"/>
 <f:param name="file_browser_callback" value="myFileBrowser"/>
</rich:editor>

myFileBrowser javascript code:

function myFileBrowser (field_name, url, type, win) {
 var cmsURL = window.location.toString();
 cmsURL = cmsURL.substring(0, cmsURL.indexOf(appContextPath));
 var fuUrl;

 if(type == "image") {
 fuUrl = cmsURL + appContextPath + "/jsf/components/richtext/imageupload.faces";
 }else if(type == "file") {
 fuUrl = cmsURL + appContextPath + "/jsf/components/richtext/fileupload.faces";
 }else if(type == "media"){
 fuUrl = cmsURL + appContextPath + "/jsf/components/richtext/mediaupload.faces";
 }else{
 return false;
 }

 tinyMCE.activeEditor.windowManager.open({
 file : fuUrl,
 title : 'My File Browser',
 width : 600,
 height : 150,
 resizable : "no",
 inline : "yes",
 close_previous : "no"
 }, {
 window : win,
 input : field_name
 });

 return false;
}

in imageupload.xhtml:

....
<script type="text/javascript" src="${contextPath}/scripts/tiny_mce/tiny_mce_popup.js" />
<script type="text/javascript" src="${contextPath}/scripts/tiny_mce/tiny_mce.js"/>
<script type="text/javascript" src="${contextPath}/scripts/tiny_mce/tiny_mce_myJavascriptCodeForFileUpload.js" />
....

<f:view>
<h:form>
...
 <rich:fileUpload id="fupload_id" ..../>
...

<f:form>
</f:view>

[ilya_shaikovsky]

Please create a sample and fill the issue in our jira with sample attachment.

[ilya_shaikovsky]

B.t.w. why you defining tinyMCE scripts on your page?
And what about tiny_mce_myJavascriptCodeForFileUpload.js file.


So one more time - if you able to provide working sample - we will investigate it asap.

[dasgin]

Hi again,

According to the explanation in "Necessary HTML Output" chapter at "http://wiki.moxiecode.com/index.php/TinyMCE:Custom_filebrowser", I use TinyMCE scripts in my imageupload.xhtml popup page.

And I put some javascript code for file browser initialization in tiny_mce_myJavascriptCodeForFileUpload.js according to "File Browser Dialogue Initialization in TinyMCE3.x" chapter:

var FileBrowserDialogue = {

 selectedFileURL : "",

 init : function () {
 // Here goes your code for setting your custom things onLoad.
 },
 mySubmit : function () {

 var win = tinyMCEPopup.getWindowArg("window");

 // insert information now
 win.document.getElementById(tinyMCEPopup.getWindowArg("input")).value = FileBrowserDialogue.selectedFileURL;

......

I will try to provide working sample for both richfaces 3.2.2.GA and richfaces 3.3.0.CR3 as soon as possible and create an issue in jira.

Thanks.

[ilya_shaikovsky]

you could provide only for 3.3.0 because editor was not present in 3.2.2.

Many thanks for your efforts.

[dasgin]

Before 3.3.0, we wrote our own TinyMCE editor component by using facelets.

[krolft]

hi ilya

thanks for testing the integration of the rich:fileUpload component as a custom file browser within rich:editor!

could you provide code snippets on how you did it?