Integrating Javascript-based HTML Editor

[rbraddy]

Hi,

I'm working on integrating the "FCKeditor" (www.fckeditor.com) with SmartClient (funny product name, but it's the best I've found with a commercial license in addition to LGPL).

I plan to share the working code with this forum, since based on the various posts I've read others need something similar...

I have the FCKeditor operational on an HTML page, along with my SC code.
The FCKeditor works fine when running on the HTML page (with and without SC code running).

The challenge is getting the FCKeditor to display properly and process events when running within the SmartClient framework. I'm guessing there's some "event plumbing" that's going to be required to get this the two to cooperate.

			isc.HTMLFlow.create({
			    ID:"FCKeditorHTML",
			    align:"left",
			    height:"100", width:"300",
				evalScriptBlocks: true,
				contentType:"fragment",
			    styleName:"exampleTextBlock",
			    contentsURL:"FCKeditor.html"
			}),

FCKeditor.html:

<script type="text/javascript" src="../FCKeditor/fckeditor.js"></script>

<script type="text/javascript" language="javascript">
var oFCKeditor = new FCKeditor( 'FCKeditor_SmartClient' );
oFCKeditor.BasePath = "../FCKEditor/";
oFCKeditor.Height = 100 ;
oFCKeditor.Config[ 'ToolbarLocation' ] = 'Out:xToolbar' ;
oFCKeditor.Value = 'This is some <strong>sample text in SmartClient!</strong>' ;
oFCKeditor.Create() ;
</script>

I'm using an HTMLFlow object in SC to load an HTML fragment that implements the FCKeditor Javascript code (code that works in HTML on this same page).

The first problem is the "oFCKeditor.Config... line that needs to interact with a DIV tag in the page's HTML DOM space is failing. When the oFCKeditor control "wakes up" inside the HTMLFlow object, it can't see the "xToolbar" DIV tag that sits in the HTML page above it. This results in an error message, but the control continues to initialize by default.

This behavior leads me to believe there's some difference in DOM scope or something going on with the HTMLFlow object that's hiding the xToolbar DIV tag. This xToolbar DIV tag allows the FCKEditor toolbar strip to sit at the very top of the HTML page, so to the user it appears like a normal text editor.

Then, each instance of the FCKeditor control shares this common text editor toolbar at the top fo the web page - at least that's the way it works in a plain HTML page...

What I see is a moment where the SmartClient interface appears, followed by what seems like a different page that only shows the FCKeditor (and then I can't launch the javascript:isc.showConsole() to see what happened).

Any ideas / suggestions / examples for integrating a 3rd party control with SC like this?

Rick

[Isomorphic]

Hi rbraddy,

A better approach is to start with a Canvas, and override getInnerHTML() so that it returns HTML which contains a DIV with a predictable ID. This avoids a network trip to fetch an HTML file, and removes any possible issues with colliding IDs (like your xToolbar element - not sure where it was defined).

Here's some analogous sample code used for Google Maps integration:

isc.defineClass("GoogleMap","Canvas").addProperties({
	overflow: "visible",
    redrawOnResize:false,
    getInnerHTML : function () {
        return "<DIV STYLE='width:100%;height:100%' ID=" + this.getID() + "_gmap></DIV>";
    },
	draw: function() {
		 this.Super("draw",arguments);			
		 this.loadMap();
	},
	loadMap: function() {
		if (window.GBrowserIsCompatible != null && GBrowserIsCompatible())
		{
			var div = document.getElementById(this.getID() + "_gmap");
			this.gmap = new GMap2(div);
			this.gmap.addControl(new GSmallMapControl());
			this.gmap.setCenter(new GLatLng(39.739167, -104.984167), 10);
		}
	}	
});

[rbraddy]

The FCKeditor saga continues...

OK. I now have a functioning FCKeditor control operating as an extension of a Canvas object. So, the elusive FCKeditor editor is now basically working with SmartClient (in IE7 and Firefox 3). The basic code integration is posted below, which should save everyone a day or two of initial effort. I remain committed to getting FCKeditor operational with SmartClient and sharing the working code here on the forum...

However, several issues remain, mostly with FCKeditor's various dialogs, which are supposed to pop-up when certain toolbar buttons are pushed.

Instead of popping up atop of the FCKEditor's IFrame window (which is embedded inside of a Canvas object), these editor dialogs all pop "under" the SmartClient Canvas object for some reason.

This is very strange behavior, given that these dialogs are attempting to anchor themselves to the topmost window they can locate (the FCKeditor dialog code walks the parent windows until it reaches the topmost window).

It's almost as if a "Canvas" is actually an IFrame... (is it?)

I cannot locate any clear documentation on how Canvas objects are actually implemented, so it's difficult to know whether they are indeed "windows" or some other browser construct (or a DIV layer perhaps that's sitting atop of the rest of the default display area).

Whatever the case, the FCKeditor's dialogs are obscured beneath all SmartClient objects I have tried.

On IE7, the FCKEditor dialogs appear to be functional; however, on Firefox 3 the dialogs are not (they appear underneath the Canvas, then the dialogs just hang).

It would certainly be useful to get some Isomorphic assistance with this issue and integration, given that so many customers (and prospects) are in need of a robust HTML rich edit control like FCKeditor.

I've seen various posts which lead me to believe Isomorphic has successfully integrated FCKeditor with SmartClient, yet there's little information available.

If we are unable to get FCKeditor integrated and functioning well, we will be unable to use SmartClient, it's a show-stopper for our use of SmartClient, and will be forced to seek other Ajax frameworks (which would be unfortunate, as SmartClient appears to be a very good product).

I suspect others have just given up on SmartClient, due to its lack of a decent rich text editor control, so addressing this FCKeditor integration will certainly help everyone. I was almost willing to engage Isomorphic on a consulting gig just to address this FCKeditor integration issue, but paying for this integration seems inappropriate, given the number of Isomorphic customers who need it and will benefit from it...

Some specific questions we need help answering:

1. What exactly is a "Canvas" object? An IFrame? A DIV layer? (if not what is it?)

2. Why are FCKeditor dialog windows obscured by the Canvas, when the Canvas is hosting the IFrame in which FCKeditor is loaded and rendered?

3. Any suggestions for the code below that would address this FCKeditor dialog issue?

4. Any ideas why the FCKeditor dialogs hang up on Firefox?

Any assistance would be greatly appreciated. I remain convinced this FCKeditor integration project is a worthy endeavor, both for our needs and the SmartClient community.

Thanks.

Rick

<SCRIPT>

// Define dynamic text edit control based upon FCKeditor, a Javascript-based rich text edit control
isc.defineClass("DynTextEdit","Canvas").addProperties({
  overflow: "visible",
  canDragResize: true,
  redrawOnResize:true,
  getInnerHTML : function () {
      return this.oFCKeditor.CreateHtml();   // returns the Javascript includes and HTML code within an IFrame
   },

  initWidget: function() {
      this.Super("initWidget",arguments);			
       this.loadEditor();
  },
		
  loadEditor: function() {
      if (this.oFCKeditor == null) {
          this.oFCKeditor = new FCKeditor("editorID1");  // create an FCKeditor control for this Canvas
          this.oFCKeditor.BasePath = "../FCKEditor/";
          this.oFCKeditor.Height = "100%";
          this.oFCKeditor.Width = "100%";
          this.oFCKeditor.Config['ToolbarLocation'] = 'In';
          //this.oFCKeditor.ToolbarSet = 'Basic';
          this.oFCKeditor.Value = 'This is some EMBEDDED FCKeditor <strong>sample text in SmartClient!</strong>';  // hard-coded text for testing
      }
  }

});

isc.HLayout.create({
    layoutTopMargin:120,
    width: "100%",
    height: "100%",
    showEdges:false,
    padding: 0,
    members: [

        // Create a dynamic text editor instance
        isc.DynTextEdit.create({
  	showEdges:true,
	ID:"AnFCKeditor",
	align:"left",
	height:"400", width:"400"
        })
  ]
    
});

</SCRIPT>

[Isomorphic]

Hi Rick,

To clarify, Isomorphic hasn't directly worked on fckEditor integration, we've just seen customers using it inside SmartClient applications (successfully).

Yes, a Canvas is a <div> by default. If you're going to tackle this level of integration, it's probably a good idea to become familiar with Firebug's "Inspect" feature, which makes it easy to find out this kind of thing.

From what we understand, customers using fckEditor made use of it's ability to replace a TextArea element rather than createHTML().

As far as occlusion issues, this is most likely due to zIndexes. Try calling sendToBack() on the Canvas. If that's not sufficient, try initializing it with a low zIndex value (even 0), or compare zIndexes by looking directly at the DOM elements.

[rbraddy]

Thanks

Well, many thanks for the Firebug tip! What an eye-opener, being able to clearly see everything in the DOM, the HTML/CSS objects. functions, etc. Very helpful tips. That's probably something you should add to your QuickStart Guide (maybe it's there and I overlooked it).

Yes, the FCKeditor zindex values are around 10,000, with dialogs being 10,001, and SmartClient Canvas is over 200,000. However, changing the z-index order didn't resolve the issue; worse yet, FCKeditor doesn't work properly at all when running inside Firefox in an IFrame within SmartClient (using the CreateHTML() method). It does seem to work with IE7.

So, I guess I'll drop back to running FCKeditor within the page's HTML code, so it's properly anchored to the page (the way it's been tested with all browsers).

I'm guessing I'll still run into z-index ordering issues, though (something I can tackle separately once the control functions properly).

The next issue will likely be ensuring dynamically-inserted "textarea" controls (injected into the DOM with an HTMLFlow control, for example), get picked up by and work with a single, global editor. I was wanting each control to have its own editor instance, so the editor controls would be positioned right by the text, but I suppose that's just not going to fly...

Feels like a little progress... (we'll see).

Thanks.

Rick

[Isomorphic]

In a quick test, this works for me (dialogs are on top).

Note that the zIndex that matters is the zIndex on the topmost SmartClient container. zIndices on children of that container matter only with respect to siblings.

// Define dynamic text edit control based upon FCKeditor, a Javascript-based rich text edit control
isc.defineClass("DynTextEdit","Canvas").addProperties({
  overflow: "visible",
  canDragResize: true,
  redrawOnResize:true,
  zIndex:0,
  getInnerHTML : function () {
	  return "<textarea STYLE='width:100%;height:100%' ID=" + this.getID() + "_ta></textarea>";
  },
  redrawOnResize:false,

  draw : function() {
      this.Super("draw",arguments);			
      this.loadEditor();
      return this;
  },
		
  loadEditor: function() {
      if (this.oFCKeditor == null) {
          this.oFCKeditor = new FCKeditor(this.getID() + "_ta");  // create an FCKeditor control for this Canvas
          this.oFCKeditor.BasePath = "/fckeditor/";
          this.oFCKeditor.Height = "100%";
          this.oFCKeditor.Width = "100%";
          this.oFCKeditor.Config['ToolbarLocation'] = 'In';
          //this.oFCKeditor.ToolbarSet = 'Basic';
          this.oFCKeditor.Value = 'This is some EMBEDDED FCKeditor <strong>sample text in SmartClient!</strong>';  // hard-coded text for testing
          this.oFCKeditor.ReplaceTextarea();
      }
  }

});

isc.DynTextEdit.create({
  	showEdges:true,
	ID:"AnFCKeditor",
	align:"left",
	height:"400", width:"400"
})

[rbraddy]

It Works!! THANK YOU!

Thank you so very much. This was the kick-start that was needed to get things working properly!

FCKeditor and SmartClient integrated is working very well now in both Firefox and IE7 browsers.

This is exactly what I needed to get started properly.

Thanks again.

Rick

[picasso566]

Hi Rick,

I was wondering if you had any completed code you could share. I'm working on the same issue (with TinyMCE Editor, if it doesn't work, Ill move to FckEditor).

[code08]

Regarding the zIndex problem. I was struggling with the fckEditor in a modal popup and found that this fixed all my zIndex issues quite easily.

In fckconfig.js find this line

FCKConfig.FloatingPanelsZIndex = 10000 ;

And change to this:

FCKConfig.FloatingPanelsZIndex = 900000 ;

Note, that it's nine hundred thousand, not ninety thousand.

FCKEditor dialogs will now always appear on top and no custom zIndexes need to be set on canvases or windows

[picasso566]

I was wondering if there's any way to integrate this fckEditor control into a DynamicForm?

If not, how do you set up a form so that you have some fields, then a custom editor and then the rest of the fields?

[Isomorphic]

Use a CanvasItem. Allows any Canvas to participate in a form like other items.

[TorbenRahbekKoch]

Using FCKEditor in e.g. a VLayout

The above code from Isomorphic mostly does the job, but when using the FCKEditor in a VLayout or VStack (and probably some other like that) the toolbar does not show.

After some debugging (hehe) with Firebug I noticed that the TextArea was not being replaced (at least there still was a TextArea element in the DOM). I therefore put in a debug alert("Watch me") in the getInnerHTML function. This came up twice, showing that getInnerHTML effectively overwrites FCKEditor's first replace of the TextArea.

To get this working I had to add

autoDraw: false

to the isc.DynTextEdit.create code as shown here:

isc.DynTextEdit.create({
  	showEdges:true,
        autoDraw: false,
	ID:"AnFCKeditor",
	align:"left",
	height:"400", width:"400"
})

Combined with the zIndex hack from code08 above FCKEditor now seems to work like a charm.

Hope this will help others out here!

[vina]

Regarding using a HTML editor with an iframe, if you want to have the VLayout / HLayout resize working properly, just use this line somewhere in the draw function:

isc.EventHandler.registerMaskableItem(this, true);

Hope this helps someone. I dug that up in the RichTextCanvas source code.

Sorin