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:
Code:
<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:
Code:
<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:
Code:
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:
Code:
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:
Code:
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...
