CKEditor and VFP

[Neil Toulouse]

thread184-1635582

Hi Guys

I have a need to integrate the CKEditor HTML Editor tool into a VFP(8) app. I have set it all up fine and have the CKEditor running via an OLE Web Browser control. All this is local, ie no web server involved.

My question (hopefully simple!) is how do I get the resultant HTML that has been created/edited with CKEditor into VFP so I can store the text in a field?

Could anyone steer me in the right direction?

Many thanks
Neil

I like work. It fascinates me. I can sit and look at it for hours...

 

[GriffMG]

Can you get it onto the clipboard?
Or write it out to a text file?

Regards

Griff
Keep [Smile]ing

There are 10 kinds of people in the world, those who understand binary and those who don't.

I'm trying to cut down on the use of shrieks (exclamation marks), I'm told they are not good for you. ​

 

[Mike Lewis]

Neil,

It's been a long time since I use this tool, but let's see if I can remember what I did.

Basically, CKEditor replaces a textarea control on your page. Retrieving the data is the same as for a normal textarea, that is, you submit it to the web server. On the server, you will need some code to store the data. In my case, I was using PHP on the server, so I had something like this in my HTML:

<form method="post" action="maint_form.php" >
  <textarea name="content" cols="70" rows="15">Enter your text here</textarea>
  <input type = "submit" value = "Save" name = "save" />
</form>

When the user clicks the Submit button, the browser links to a new file from the server, which in the above example is named maint_form.php. This contains PHP code which receives the contents of the form (via $_GET) and processes it in some way (such as saving it to a database). Of course, the server-side code doesn't have to be written in PHP; it could be any suitable language.

Now, having just had a glance at the up-to-date CKEditor documentation, I see they now have a way of saving the data on the client side, using an API:

<script type="text/javascript">
  var editor_data = CKEDITOR.instances.content.getData();
</script>

There's a complete example that uses this new method here:

http://docs.cksource.com/CKEditor_3.x/Developers_Guide/Integration

As I mentioned, I am a bit rusty on all this. If anyone tells you anything different (probably Olaf), chances are that they are right and I am wrong.

Mike




__________________________________
Mike Lewis (Edinburgh, Scotland)

Visual FoxPro articles, tips and downloads

 

[Neil Toulouse]

Thanks Mike!

I am trying to avoid having a web server involved so I can keep it all local, so server side scripting isn't possible in my scenario. However, that may have to change to get a solution! May have to go down Griff's suggestion of dumping the data to a text file or something and dealing with it that way.

Anyway, thanks for the info I will keep digging

Neil

I like work. It fascinates me. I can sit and look at it for hours...

 

[Mike Lewis]

But Neil, my note about them being able to save data on the client side means you won't need a web server. The whole thing can be done in client-side Javascript. At least, that's my understanding. Have a look at the documentation I linked to, especialy the section "Client-Side Data Handling".

Mike

__________________________________
Mike Lewis (Edinburgh, Scotland)

Visual FoxPro articles, tips and downloads

 

[Neil Toulouse]

Sorry Mike, yes I see from the documentation now it can be handled in JavaScript, so I may be able to do something with it!

I like work. It fascinates me. I can sit and look at it for hours...

 

[Mike Lewis]

Well, if you do decide to give it a try, let us know how you get on with it.

Mike



__________________________________
Mike Lewis (Edinburgh, Scotland)

Visual FoxPro articles, tips and downloads

 

[Olaf Doschke]

Once Sönke Freitag, a AFP hoster, showed how to integrate FCKEditor with VFP or AFP. I don't find it anymore, but the bridge is the webbrowser control and javascript, yes.

Bye, Olaf.

 

[Neil Toulouse]

Hi guys

Well this turned out a lot easier than I had expected I will list my steps here in case anyone else is interested (or for my future reference if I forget what I did!):

Step 1:
Download the CKEditor ZIP file and decompress it to a folder.

Step 2:
Create a simple web page containing the editor and two JavaScript functions. My example is below:

<html>

<head>
    <title>My Sample CKEditor</title>
    <script type="text/javascript" src="ckeditor.js"></script>
</head>

<body>
    
	<form method="post">
        <p>
            <textarea id="editor1" name="editor1">My Sample CKEditor
            </textarea>
            <script type="text/javascript">
                CKEDITOR.replace('editor1');
            </script>
        </p>
    </form>

    <script type="text/javascript">
        function getsource() {
            return CKEDITOR.instances.editor1.getData();
        }
    </script>

	<script type="text/javascript">
		function setsource(html) {
			CKEDITOR.instances.editor1.setData(html);
		}
	</script>	

</body>

</html>

Note: The two JavaScript functions need to have lowercase names due to a FoxPro bug!

The two here are GetSource - to return the generated HTML, and SetSource - for initialising the editor with something to edit. I saved this file (with a .html extension) to the same folder that contains the ckeditor.js file. If saved anywhere else then you need to update the path to the ckeditor.js file in this line:

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

...at the top of the file.

Step 3:
Create a VFP form containing an OLE/Active X of "Microsoft Web Browser". I called mine oWebBrowser. From a method I call from the INIT of the form I initialise the Browser control with:

Thisform.oWebBrowser.Navigate(<path to the web page created above>)

When run, this should display the CKEditor window with "My Sample CKEditor" text pre-populated. If it is blank, then the pathing to ckeditor.js in the HTML file is incorrect.

Step 4:
Add the basic functions. To pre-populate the editor we now use the SetSource function which is called with:

ThisForm.oWebBrowser.Document.parentWindow.setsource(lcHTML)

- where lcHTML is a variable containing raw HTML. I did find if you do this straight after initialising the control, it failed to find the function, so I introduced a 0.5 second pause before the call which seemed to resolve it.

Finally, I added a 'save' button to the form to pickup the edited HTML. This button calls the GetSource function as follows:

lcHTML = ThisForm.oWebBrowser.Document.parentWindow.getsource(.F.)

Note: although the GetSource function does not use any parameters, due to another VFP bug you have to send one regardless!

I like work. It fascinates me. I can sit and look at it for hours...

 

[Mike Lewis]

Thanks for posting this, Neil. It is very clear, and I'm sure it will help other people wanting to do this.

A couple of minor points ....

You wrote:

I did find if you do this straight after initialising the control, it failed to find the function, so I introduced a 0.5 second pause before the call which seemed to resolve it.

In general, you need to pause for a few moments any time you call the browser's Navigate method. This is simply to give the page time to load. The usual way of doing this is something like this immediately after the Navigate:

DO WHILE thisform.oWebBrowser.ReadyState <> 4
 Sleep(100)    && assuming you have already declared the Sleep() API function
ENDDO

But your method of hard-coding a 0.5 second pause should work in this case too.

The two JavaScript functions need to have lowercase names due to a FoxPro bug!

I'm not sure about that. In general, JavaScript is case-sensitive, so this might not be a FoxPro issue (but correct me if I'm wrong).

As I say, they are minor points.

Mike



__________________________________
Mike Lewis (Edinburgh, Scotland)

Visual FoxPro articles, tips and downloads

 

[Neil Toulouse]

Thanks Mike.

I just issued a WAIT "Creating Form" WINDOW TIMEOUT 0.5 for the pause. I will have to have a look at the Sleep() API!

I came across the case sensitive bug issue from one of Rick Strahl's articles (I think). I read it somewhere at least, and it did prove to be an issue. Also the passing of a parameter regardless if the function needs one. Although we are still VFP8 so whether it was fixed in v9, I don't know.

Thanks for the comments

Neil

I like work. It fascinates me. I can sit and look at it for hours...

 

[Olaf Doschke]

In VFP9 I'd do DOEVENTS FORCE, in VFP8 DOEVENTS rather than Sleep(). Sleep() is said to put your task at rest, true, but that not necessarily triggers the event chain of other involved processes, eg activex or OLE automation, so perhaps do both Doevents and Sleep(50).

Bye, Olaf.

 

[Neil Toulouse]

I found Rick Strahl's article finally!

http://weblog.west-wind.com/posts/2...vaScript-functions-in-the-Web-Browser-Control

Look specifically at the "A few gotchas for FoxPro" paragraph.

Neil

I like work. It fascinates me. I can sit and look at it for hours...

 

[Mike Lewis]

Interesting article, Neil.

Mike

__________________________________
Mike Lewis (Edinburgh, Scotland)

Visual FoxPro articles, tips and downloads

 

[Olaf Doschke]

I think I have seen something else to work with the camel case Javascript function names, especially native Javascript functions. IIRC you can get these to work, too. For example one important function getElementByID works just as it is, write getElementByID. I don't know if Rick is right about this in the current situation of VFP9 SP2 and IE11.

For example try:

oIE = CreateObject("InternetExplorer.Application")
oIE.navigate2("[URL unfurl="true"]www.tek-tips.com")[/URL]
Do While oIE.readystate<>4
   Doevents
EndDo 
loTag = oIE.document.getElementByID("tektipsforums")
? loTag
? loTag.tagname

It takes some time, but it returns with the HTML tag of the tek-tips homepage, which for reasons I don't know has this ID.
Actually oIE.document.getelementbyid("tektipsforums") works, too.

Bye, Olaf.

 

[Neil Toulouse]

Interesting info, thanks Olaf

I like work. It fascinates me. I can sit and look at it for hours...