jQuery Grid Plugin - jqGridForum

Topic RSS

FCKeditor

30/05/2008
09:41

decker82

New Member

Members

Forum Posts: 0

Member Since:
30/05/2008

Offline

Hi people,
I'm trying to integrate FCKeditor on the jquery grid plugin. There is a plugin for use with jQuery and FCKeditor, where you can easy add the FCKeditor intro a textarea with this simple line:

$('textarea').fck({ path: '/fckeditor/',toolbar: 'Basic', height: 100, width:300});

What I need is to create a new element type. In the file "grid.formedit.js" I try to add this:

function createEl(eltype,options,vl) {
var elem = "";
switch (eltype)
{
case "fckeditor" :
elem = document.createElement("textarea");
$(elem).attr(options);
$(elem).html(vl);
//fckeditor call using jquer.FCKEditor.js
$(function(){
$(elem).fck({ path: '/fckeditor/',toolbar: 'Basic', height: 100, width:300});});
break;

then I edit the edittype:"fckeditor" on the colModel values.

but this don't make any effect. Which is the correct method to create a new element type in a form?

thanks,
decker

30/05/2008
11:26

tony

Sofia, Bulgaria

Moderator

Members

Moderators

Forum Posts: 7721

Member Since:
30/10/2007

Offline

This is the right way to do that, bu I think that the right code should be:

function createEl(eltype,options,vl) {
var elem = â€â€;
switch (eltype)
{
case â€fckeditorâ€ :
elem = document.createElement(â€textareaâ€);
$(elem).attr(options);
$(elem).html(vl);
//fckeditor call using jquer.FCKEditor.js
$(elem).fck({ path: "/fckeditor/",toolbar: â€™Basicâ€™, height: 100, width:300});
break;

If you have FireBug see what is happen

Regards

P.S. If I have time I will test this

For professional UI suites for Java Script and PHP visit us at our commercial products site - guriddo.net - by the very same guys that created jqGrid.

30/05/2008
11:28

tony

Sofia, Bulgaria

Moderator

Members

Moderators

Forum Posts: 7721

Member Since:
30/10/2007

Offline

You should add fckeditor in filData function too.
something like:
....
case "text":
case "textarea":
case "fckeditor":
$("#"+nm,"#"+frmtb).val(tmp);
break;
....

For professional UI suites for Java Script and PHP visit us at our commercial products site - guriddo.net - by the very same guys that created jqGrid.

02/06/2008
07:03

decker82

New Member

Members

Forum Posts: 0

Member Since:
30/05/2008

Offline

It works!
On the file grid.form-edit line 230 aprox. I added this line to load fckeditor and it works nice 🙂

if(rowid=="_empty") $("#pData,#nData","#"+frmtb).hide(); else $("#pData,#nData","#"+frmtb).show();
$('textarea').fck({path: '/fckeditor/',toolbar: 'Custom', height: 400, width:600});

The only contra is that applies to all textarea fields. I will try to apply the id fckeditor to the element type...

thanks

02/06/2008
09:14

decker82

New Member

Members

Forum Posts: 0

Member Since:
30/05/2008

Offline

I have resolved the previous problem when we apply fckeditor to all textareas. In function createEl I have created fckeditor element and the I have to add a new class, fck:

case "fckeditor" :
elem = document.createElement("textarea");
$(elem).attr(options);
$(elem).html(vl);
$(elem).addClass('fck');
break;

And on line 232 of grid.formedit:
$("textarea.fck").fck({path: '/fckeditor/',toolbar: 'Custom', height: 400, width:600});
$("#sData", "#"+frmtb).click(function(e){

02/06/2008
10:07

tony

Sofia, Bulgaria

Moderator

Members

Moderators

Forum Posts: 7721

Member Since:
30/10/2007

Offline

Hi,
It seems that on hidden fields fck does not work.
You can do this without to change the formedit code. Simply use a one trick with afterShowForm event.
Let suppose you defined textarea field in colModel.
In edit options add this for these fielfds editoptions:{class:'fck'...}
Since afterShowForm is called every time you click on edit or create button you should call it only once. For this purpose define global variable something like

var aftershowcnt = false
then

afterShowForm : function(form_id) {
if (!aftershowcnt ) {
$('.fck',form_id).fck( options )
aftershowcnt = true;
}

}

Regards
Tony

For professional UI suites for Java Script and PHP visit us at our commercial products site - guriddo.net - by the very same guys that created jqGrid.

03/06/2008
02:45

decker82

New Member

Members

Forum Posts: 0

Member Since:
30/05/2008

Offline

Thanks, this works nice.
But there is one important problem with fckeditor. The way that we retrieve the data is different than on the others fields. I have to use this code:

var oEditor = FCKeditorAPI.GetInstance('fck_content');
postdata[this.name] = oEditor.GetXHTML(true) || " ";

("fck_content" is the id of the textarea with fck)
With this I can submit the fckeditor values well, but when I have to edit a row the values aren't loaded on fckeditor. Where are loaded the values of the edit form or how can I reload them?

thanks
decker

04/06/2008
12:04

tony

Sofia, Bulgaria

Moderator

Members

Moderators

Forum Posts: 7721

Member Since:
30/10/2007

Offline

Maybe there is API in fck that can change dynamically the content ?!?

For professional UI suites for Java Script and PHP visit us at our commercial products site - guriddo.net - by the very same guys that created jqGrid.

All RSS

Forum Timezone: Europe/Sofia

Most Users Ever Online: 715

Currently Online:
45 Guest(s)

Currently Browsing this Page:
1 Guest(s)