Non-partisan software developer

Tuesday, April 10, 2007

FCKeditor running on the desktop


I've always loved FCKeditor and I used it ever since the pre 1.0 days. We had a requirement at work where we needed to allow users to edit HTML and our solution was for them to type the markup by hand.

So I had a crazy idea to try to use FCKeditor on the desktop. The general idea was to host the FCKeditor html files inside the WebBrowser control. So one night I hacked together a
prototype and it worked! Eventually another developer at work took my hack and built a working component using it as a reference. It worked well for him and I was surprised it turned out so nice.

A while back I saw a post on Channel9 where someone was asking about using FCKeditor in a desktop scenario and they got some replies like: "you can't do that...FCKeditor is written in html and javascript, it's for the web."

I posted about my experience with it and I'll get emails asking how to do it; so I decided to do a quick demo. Eventually I think I'd like to see an open source version that is robust and exposes much more functionality. My demo only allows for saving and retrieving html documents.





The demo application running WinFckEditor. The magic is in the ability to call JavaScript methods from C# using InvokeScript like this:




I've posted a sample project: WinFckEditor.zip

28 comments:

Paul said...

Wow this is great!! It just works out of the box. (Although I had to search for the exe file in winfckeditor\WinFckEditor\WinFckEditor\bin\Debug . Is that right?)

A local client of the FCKeditor (2.4.2), crazy idea, but works awesome. You have even open and save functionalities shipping with it + ieSpell!

Never seen my dialogs pop up so quick :p

Only the filemanager isn't working, but that's obvious I guess.

(Is it possible to have firefox as the default browser behind it?)

Overall, I'm stunned. great job!!

Paul

FCKPlugins by saulmade
FCKSkins by saulmade/
FCKSnippets by saulmade/

Goran said...

Nice idea. I'm thinking about creating a proper .net html editing control - a wrapper to connect various config values, properties and methods of the FCKEditor. Or is anyone already working on that?

Anyway - I needed the control to be created at runtime. To succesfuly use the editor in such cases, you need to wait for it to load complety before you can call any methods. To this end I used:

function FCKeditor_OnComplete(editorInstance)
{
window.external.WebHtmlEditor_Complete();
}

And the appropriate method in the control wrapper. Works like a charm.

Corbin Hoenes said...

Goran,

I haven't heard of anyone creating a windows version of FCKeditor. I'd like to see one as well.

How far have you gotten with your wrapper? It might make sense to start a project on on sourceforge or somewhere else...

I'd like to see a project like WinFCKeditor come about...I think a lot of people would benefit. Plus you can take advantage of all the great FCKeditor work already done.

Michael Hutchinson said...

Oh wow, someone's actually done this. Well done!

When implementing the Mono ASP.NET Editor on Linux for Google Summer of Code '05, I
embedded a Mozilla Composer based XUL app
(writted by Blagovest Dachev) in a similar fashion. I've seriously been considering replacing it with FCKeditor or TinyMCE, as Composer produces horrible HTML4 code.

Your use of InvokeScript system in this way reminds me of my JSCall# interop library, designed to do the same kind of thing with Gecko#/GTKMozEmbed.

Corbin Hoenes said...

Michael - I've been thinking about making a cross platform C# component but haven't really dug into Gecko#. Sounds like it's entirely possible.

-- Where do I start?

Goran said...

I've just started actually. I've opened a workspace at codeplex and will let you know as soon as it is setup.

Anonymous said...

Has anything more been done with the idea of a 'winFCKeditor'? The last note from goran is about a codeplex project - I'm all for it - did it go anywhere??

Corbin Hoenes said...

I don't know what Goran did with it. I never heard back from him about the codeplex project.... if you wanted to setup on yourself or join his you are welcome to start with the code base and get it going.

I'm not sure how much time I have right now to contribute but I'd be more than happy to help get it started w/you.

pomarc said...

great job, too bad it doesn't work with the latest version (2.6) of FCKEditor.
It gives an access denied error... maybe a cross domain scripting problem?
anyway, thanks for the code!

misisawa said...

Nice info.. thx's.
i'll try it.. :):)

pomarc said...

still cannot find a way to make it work with FCKE 2.6,
the access id denied message happens also if I open the editor html sample (fckeditor\_samples\html\sample01.html) locally with IExplorer (not with FFox, though).
I think it may be some sort of XSS warning.
I've traced to the offending line, on the editor/js/fckeditorcode_ie.js
an XmlHttp object is created
var B=FCKTools.CreateXmlObject('XmlHttp');if (!B){this.Error=true;return;};
then used to GET:
B.open("GET",A,false);
this raises the Access id Denied error.

anyone has and idea on how to fix it?
thanks!

Corbin Hoenes said...

@pomarc - Does 2.6 no longer work locally? By that I mean can you run just a static html page from disk and have IE actually run FCKEditor?

Also what version(s) of IE are having this problem?

pomarc said...

hi corbin!
well, I've tried to open locally
fckeditor\_samples\html\sample01.html

which is a simple html page and, after I say ok to the usual activex warning, the toolbar gets loaded and ta-da, the dreaded "access is denied".

I have tested it wit IE7 only since I do not have any other version installed on my VMs.

I was hoping that you had changed something on the FCKE that you put into the .zip, but as I understand, you did not: simply the 2.6 version is different in some way...

This is a pity, beacause your work is truly useful, but if we cannot upgrade the FCK, it may be quite dangerous.

If you have any idea on how to fix it, it would we wonderful.
I am planning to add support for DTML events, so that we can use the Save button to save, for example.

thanks

Corbin Hoenes said...

@pomarc - let's take this converstation to email. If this is a new issue with FCK 2.6 we should bring it up with Fred and the developers there to see what is going on. Maybe there is a work around or they need to what they are doing so it can run locally, etc....

If you are really interested in this we could setup an open source project and start making this a real component. Goran started a project but I don't think it ever really got going. Please msg me @ corbinhoenes at gmail dot com.

Samuel Smith said...

I also had the idea of running FCKeditor in a winapp form. Similar to pomarc I ran into the access denied error. I actually tracked the error and found this post by searching for "access denied B.open("GET",A,false)".

Hopefully they comeup with a solution soon, but for now I'll use version 2.4.2 (same version you have in your example).

Here is a source forge link to all of the versions: http://sourceforge.net/project/showfiles.php?group_id=75348&package_id=75845 .

Corbin Hoenes said...

So has anyone had a chance to talk to FCKEditor devs about running it locally?

Samuel Smith said...

I solved the issue with 2.6.2 and left a forum post.

post url: http://www.fckeditor.net/forums/viewtopic.php?f=6&t=10424&p=27487#p27487 .

Granted its odd to post on the forum with a question and answer all in one, but I thought others might benefit from it.

In short, 2.6.2 attempts to use the native ie7 xmlhttprequest object. Apparently the native xmlhttprequest object introduced in ie7 doesn't allow local filesystem access (as far as I can tell). Anyhow, in short here is the fix in fckeditor\editor\_source\internals\fcktools_ie.js:

FCKTools.CreateXmlObject = function( object )
{
var aObjs ;

switch ( object )
{
case 'XmlHttp' :
// Try the native XMLHttpRequest introduced with IE7.
try { return new XMLHttpRequest() ; } catch (e) {} // bad for use on local filesystem

aObjs = [ 'MSXML2.XmlHttp', 'Microsoft.XmlHttp' ] ; // use this instead for local filesystem
break ;

case 'DOMDocument' :
aObjs = [ 'MSXML2.DOMDocument', 'Microsoft.XmlDom' ] ;
break ;
}

for ( var i = 0 ; i < 2 ; i++ )
{
try { return new ActiveXObject( aObjs[i] ) ; }
catch (e)
{}
}

if ( FCKLang.NoActiveX )
{
alert( FCKLang.NoActiveX ) ;
FCKLang.NoActiveX = null ;
}
return null ;
}

Samuel Smith said...

I also made a ticket to get this resolved by 2.6.3.

Aside from this issue, I thought you all might also like to know that you can invoke C# functions from javascript through the webbrowser control. I saw the code to invoke javascript code from C#, but you can go the other way too. To do this you will need a com visible layer (I used the form containing the webbrowser). Like

[System.Runtime.InteropServices.ComVisibleAttribute(true)]
public partial class WYSIWYG_EditorForm : Form


You also then need to assign the WebBrowser to this object with

webBrowser1.ObjectForScripting = this; // where this is the form defined above

Now that this step is done you can invoke any public function using "window.external.myCSharpFunc()". This is useful if, like me, you want to load some data into the wysiwyg after it finishes loading. For me I have this code in my html page

function FCKeditor_OnComplete(editorInstance)
{
if (typeof(window.external) != 'undefined')
window.external.EditorLoaded();
};


The FCKeditor_OnComplete method is called by the FCKeditor if the function is defined. It gets called after the editor is fully initialized. As you can see, I have this method invoke a CSharp function I defined where I then set the content. Here is the CSharp function

public void EditorLoaded()
{
HtmlContent = File.ReadAllText(file.FullName);
}

for more information see here.

Samuel Smith said...

This has already been fixed (man their team works fast, just posted bug on Friday). Here is the patch



Also, as another FYI, I had to change the FCKTools.Merge function in the fckeditor/editor/_source/internals/fckdocumentprocessor.js file. Without this change I was getting an error popping up.

ProcessDocument : function( doc )
{
// Firefox 3 would sometimes throw an unknown exception while accessing EMBEDs and OBJECTs
// without the setTimeout().
FCKTools.RunFunction( function()
{
/*
* [[CUSTOM]] Removed because access to the doc is being denied in
* IE7 when loaded from local filesystem
*
*
// Process OBJECTs first, since EMBEDs can sometimes go inside OBJECTS (e.g. Flash).
var aObjects = doc.getElementsByTagName( 'object' );
for ( var i = aObjects.length - 1 ; i >= 0 ; i-- )
processElement( aObjects[i] ) ;

// Now process any EMBEDs left.
var aEmbeds = doc.getElementsByTagName( 'embed' ) ;
for ( var i = aEmbeds.length - 1 ; i >= 0 ; i-- )
processElement( aEmbeds[i] ) ;
* [[END]]
*/
} ) ;
},



I haven't posted a bug on this yet, but I plan to. This is probably my last post unless someone else expresses interest.

Chinmoy said...

I am facing "Access Denied" problem with network file system.

Can anyone please tell me how i can fix this?

Chinmoy

Corbin Hoenes said...

@chinmoy: Have you tried Samuel Smith's patch above?

Anonymous said...

I have integrated the editor in a winforms project and everytime i open it it show an internet explorer script error with "FCKeditorAPI" is undefined and the url is editor.html . Any ideea?

Maulik said...

Hi there.I have been successfully using FCKeditor in my .net windows application for VS 2008. When I deploy it and trying to access the page having the FCKeditor control, then I got the "this program can not display the webpage" error...Request to kindly help, if someone has already faced it and found solutions for it...Thanks...

Gourav said...

i did it and it works fine in win application :)

Quang Yên said...

It's awesome Corbin! I've searched for days for an editor in winform. Although I used Fckeditor for ASP.NET but a winform version is really impressive. I think you can broadcast this and developers will benefit from this. Thanks again!!

Quang Yên said...

Hello! My project requires an editor for HTML so I research your idea and made a combination between CKEditor 3.6.1 and Webbrowser control with some ideas (invoke C# functions from javascript and vice versa) to let it work as I need.
You can visit my page (https://sites.google.com/site/quangyendn/lap-trinh/ckeditor-winform-control) to see the demo. Thanks Corbin.

Anonymous said...

Hello,

I have implemented this for my windows application & it is working fine but whenever i am trying to update content of FCKEditor at runtime like 'winFckEditor1.HtmlContent = "Hi";', it is not working. Please help.

aziza mustafa said...

hello,i found it amazing ,but i have a question that how could i change the position of the editor on the form and make it relative to other component my be added later???