CKEditor as desktop HTML editor

CKEditor is limited by the restrictions set by the browser it runs off, so any HTML editor based on Gecko should be able to offer at the very least the same features, and the fact is that a native program will have greater control than a javascript app embedded in a browser.

Using the php scripts that I have written gives a very similar effect to using it in a desktop application (see previous article Full HTML wysiwyg file editing Dec 31 09)

Vincent

Hi Juergen
I've put the files in a zip file here
http://www.esltd.plus.com/CK_page_editor/


The instructions are in the files as comments, but here is a quick how to

Its not obvious from your comment whether you are a seasoned guru well acquainted with webservers and php, or a newbie who may need a bit more help setting up the system; I'll assume the latter, so excuse me if I come over a bit patronising.

Note that this is a *web* application, not a *desktop* application and you must have a webserver (like apache) installed and running - you cannot simply point your browser at a php file in a folder and expect it to work - even though it will display html files like this.

The most important thing is that your webserver must have php enabled (its disabled on a mac by default), the server must have read, write and file creation permissions and you must set up a user account on the webserver that is allowed to upload (POST); you also need to have javascript enabled in your browser and ckedit installed (all of this is true just to use ckedit as it is - apart from php).

I run the web sever on my mac (unix system) so it should work OK on Linux etc with the line endings as they are (I can't remember if I tried running it on apache on my linux box). I haven't tried running it on a Windows web server, but I have edited files in windows xp - firefox works as expected, IE7 has a few problems (might be my setup ). If your web server is on a windows machine you will probably need to set the line endings :

in ck_editpage.php and ck_savepage.php
change
//>>>>>>>>>>>set the text line ending used the server<<<<<<<<<
$eol = xeol;//unix / OSx line ending
to
//>>>>>>>>>>>set the text line ending used the server<<<<<<<<<
$eol = weol;//unix / OSx line ending




The other thing that needs to be set correctly is where ckeditor is installed
In ck_editpage.php change the <script ....> line to point to the correct location (the line below is where it is on my computer)
<!-- >>>>>>>>>>>make sure src points to where ckeditor is installed<<<<<<<<<<< -->
<script src="../ckeditor/ckeditor.js" ></script>





If you want to upload files, you may want to adjust what types of files are allowed

in ck_upoadfile.php
define('validStyle',".css ");
define('validScript',".js ");
define('validAudio',".aac .aiff .mp2 .mp3 .mp4 .ogg .ra");
define('validVideo',".flv .swf .avi .rv .mpeg .mov");
define('validImage',".png .jpg .jpeg .xpm .gif .tif");
define('validDoc',".pdf .txt .csv .xml .doc .xls .ods .sxc");


That's it, just put a copy of the ck_editpage.php, ck_savepage.php and ck_uploadfile.php that you have edited into each directory that has html files that you want to edit

Let me know how you get on

Vincent

Exactly what i am looking for.

I put the three files on my unix server w/php5 in the same directory as my html.
I am running linux (ubuntu 9.04) on the client side.

When I start ck_editpage.php, I would say all looks good. He tries to edit 'newfile.html'.

Now, the problems start. I will choose a simple html file 'gmap.htm'.
He comes back with Editing page: gmap.htm but ckeditor shows
'Enter new text'. So I press 'reload page' nada.
So I press 'Show Header'. Well, that gives me the header but it is in SOURCE html format ??
The normal ckeditor window below shows nothing, but if I press SOURCE it DOES display the
source for the page.
Pressing 'Hide Header' produces a similar situation where the ckeditor shows nothing until I press source,
and then it shows source.
Preview seems to work in BOTH user-presentation and source modes but only source preview shows the changes. Perhaps mercifully the changes are not written to the file.
You may reproduce via http://blountscreek.org/ck_editpage.php?fname=gmap.htm
Your editor should allow something like ctrl-u edit of gmap.htm
or use 'anounce.htm'.
I do not think the problem is the host-- fckeditor runs fine under cms lightneasy on the host.
My only mod is to change the <script src to point to my copy of ckeditor.js

Thanks, Howard

Going to try to attach an attempt at uploading a .html file.

Thanks, Howard

I am going to take the link down as
1) Security concerns
2) Found PHPEXPLORATOR on sourceforge that does everything I need.

Thanks, Howard

Hi Howard
Thanks for giving it a try

Your first problem looks like the one I had when I tried editing a file originally created in dreamweaver. This puts comment tags in line with the key tags I was looking for and sometimes puts two key tags on the same line e.g </head><body>

The original code wouldn't handle that but I've rewritten it so that it does, and put that on the website on about the 20th Jan, so try that version as it may solve your problem. I've also put a line of code in to set the file access permissions on the new file ck_savepage.php creates.

The second one looks a little stranger, but may still be a consequense of the first - perhaps the missing body section has just ended up triggering that error for some reason. Try the updated code first (dated 19 Jan in the ck_editpage.php comments)

I tried to follow your link but got a 404 error on trying to open the ck_editpage.php, so I couldn't see the problems for myself.


Vincent

I've just looked at your second problem again, Howard.
The code is actually doing what it was intended to do but the error message is confusing (I was tring to combine two error messages into one piece of text - yep, laziness, I will change it).

'Upload' is just for data files and javascript, and will reject any htm or html (unless you change the filters).

Html files are only 'uploaded' using ckeditor's 'file save' function (floppy disc icon), but these must only be .htm or .html (unless you change the filter).

I didn't think it was safe to allow people to arbitrarily upload the main html files,but you can easily allow that it you wish by changing the following statement in ck_uploadfile.php from:

$allowedExtensions = validStyle." ".validScript
." ".validVideo." ".validImage
." ".validAudio." ".validDoc;
to:
$allowedExtensions = validStyle." ".validScript
." ".validVideo." ".validImage
." ".validAudio." ".validDoc." ".validHtml;
Vincent

WORKS LIKE A CHARM !

THANKS Vincent !!!

This is great...

Howard

Hey! It works on someone else's system - that's made my day!

Thanks Howard

Hi Vincent -

I have some addl comments on ck_editpage.

I noticed running the generated code thru w3c validation, I got a slew of errors.
Tracked it back to generating xhtml, when I specify html.

Changing the front end of ck_editpage does not do the trick. Further down it again uses xhtml.
But further down yet, it writes the /> that ruins the validation.

Might be nice for a further version to read from the website the doctype and
generate accordingly ?

This is not a show stopper, I just like to pass the w3c validation w/o pulling the />
Possibly easier to change my sites to xhtml doctype.

The other problem I run into (not your doing), is that i really want ck-editpage for a plesk site.
Alas, turns out that Plesk is so limited that it is pretty much impossible to use PHP writes (sigh).


Thanks for the great tool. Ckedit does a beautiful job of picking up the CSS.

Howard

Hi Howard

Anything in the body section of the code is what ckeditor produces. I don't know how, or if, you can alter whether it produces html or xhtml, or how strictly it produces it. The header is actually separate, I don't pass doctype to it (mabe I should?) so perhaps the header docytype needs to be altered to suit what ckeditor generates.


Vincent

Wondering if it would help if I sent you some before/after validator runs of html - and the source html ?

The problem may be more severe than first reported in that a IE8 customer reported the index.html CSS menu items were mashed together even when running IE8 compat mode.
I changed back to the original code (b4 ck_editpage) and he reported all was ok again.

Thanks, Howard

Yes, by all means send me some runs

Vincent

Howard
I've made a few tweeks which has fixed a couple of bugs in IE7, the code seems to run OK in IETester set to IE8 - but I haven't tried it on the real IE8 yet. Perhaps you could try this version.


Vincent

Hi Vincent -

Here is some source from my homepage.
It goes thru w3c clean, once I run thru ck_editpage it shows 4 err and 32 warnings.
Running same source again creates addl validation errors. (http://validator.w3.org/)
Note; the accompanying gifs are missing, but the validation results are exactly the same.
orig html @ http://n4af.blountscreek.org.
Two ck_editpage save: http://blountscreek.org/test.html

It appears most of the problems are xhtml termination of <gif with /> as in xhtml. But when
I converted the site to xhtml, still ran into validation problems (as I recall the gif were NOT terminated
with /> as per xhtml.)

Thanks, Howard ===>>>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link rel="icon" type="image/gif" href="http://n4af.blountscreek.org/favicon.gif">
<link rel="stylesheet" href="CSS/n4af1.css" type="text/css" media="screen">

<title>N4AF NY4A</title>
<meta name="keywords" content="N4AF NY4A contesting foc cw blounts creek beaufort county north carolina">
<meta name="description" content="n4af N4AF ny4a NY4A PVRC FOC CW">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
<!--
var pageTracker = _gat._getTracker("UA-4654420-1");
pageTracker._initData();
pageTracker._trackPageview();

function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>

<style type="text/css">

a.white:hover {background: #ffffff}
a.green:hover {background: #99ff00}


.style1 {color: #FF0033}
body {
background-color: #000000;
background-image: url(space.gif);
}
.style2 {color: #55A3FF}
</style></head>

<body onload="MM_preloadImages('welc_roll.gif','pictures_roll.gif','driving_roll.gif','links_roll.gif')">




<table class="t1" cellspacing=2>
<tbody>
<tr>
<td class="td1">
N4AF<br>NY4A</td>
<td class="td2">
-<a href="http://blountscreek.org">Blounts Creek, NC</a>-</td>
</tr>
</table>

<table class="t2">
<tr>
<td class="td3">
<!--a href="n4a.htm"><img src="welc.gif"><span class="style2"></span></a><br-->
<a href="n4a.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Welcome','','welc_roll.gif',1)"><img src="welc.gif" alt="Welcome" name="Welcome" width="75" height="40" id="Welcome" ></a><br><br>
<!--a href="shots.htm">PICTURES</a--> <a href="shots.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Pictures','','pictures_roll.gif',1)"><img src="pictures.gif" alt="Pictures" name="Pictures" width="75" height="40" id="Pictures"></a><br><br>
<!--a href="qth.htm">DRIVING TO</a-->
<a href="qth.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Driving','','driving_to.gif',1)"><img src="driving.gif" alt="Driving To" name="Driving_to" width="75" height="40" id="Driving"></a><br><br>
<!--a href="links.htm">LINKS</a-->
<a href="links.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('links','','links_roll.gif',1)"><img src="links.gif" alt="Links" name="links" width="75" height="40" id="links"></a><br>
<td class="td4">
<a href="/towers.jpg" ><img src="Dsc00671.jpg" alt="NY4A Towers "width="231" height="226"></a></td>
<td class="td5">
<a href="/DSC03933.JPG" ><img src="ny4a.JPG" alt="Front QTH " width="246" height="226"></a> </td>
<td class="td6"><a href="/images/dsc_1384.jpg" ><img src="/images/dsc_1381.jpg" alt="NY4A Crew " height="226" width="261"></a></td>
</tr></table><p>
<table style="t3">
<tr><td class="td7">
Tower Description
</td><td class="td8">
NY4A Crew
</td></tr><tr><td class="td9">
The left most
20M band tower holds a 4L 20M M2 at 40M height.<br>
The next tower
(10M band) is a 4L 10M4 at 25M the third tower, and most distant, is the 40M band tower w/ 2L 40M rotary that is 40M high, the right most tower is the 15M band Rohn55 at 30M which holds a 4L M2 15M yagi. I am in the process of putting a second M2 15M stack below it.
All but the Rohn55 are AB105.<br>
A 68M philystran catenary runs between the two 40M high towers and supports a 5L
40M Quad, <a class="white" style="color: #99ff00" href="images/Dsc01471-01.jpg">8L 20M yagi</a>, and 4L
80M yagi all fixed on Europe.<hr>
<p><a href="/w1aw.htm">W1AW/4</a> <br>
<a href="http://www.pbase.com/auburn89/waecw2009&amp;page=1">WAE 2009 (tks AA4FU) </a><br>
<a href="http://picasaweb.google.com/Howie.N4AF/NY4AARRLDX2008">ARRLDX
2008</a> <br>
<a href="http://picasaweb.google.com/Howie.N4AF/NY4A_ARRLDX_2007">ARRLDX
2007</a> <br>
<a href="/ARRLDX_2006/p_album/index1.html">ARRLDX_2006</a><br>
<a href="arrldx04_1.htm">ARRLDX 2004 </a>
</p>
<p><br>
</p></td><td class="td10">
Some <a href="crew.htm">NY4A operators</a> pix here<br><br>
<span class="style1">#1 World M/M WPXCW 2003</span><br>
<span class="style1">#1 N.A. M/M in WPXCW 2004</span><br>
<a href="http://picasaweb.google.com/Howie.N4AF/NY4A_ARRLDX_2007">Top N.A. M/2 ARRLDXCW 2007</a><br><br>
---Are YOU in the CW log ???---<br>
<p ><a href="/n4af/logsearch.php">Logsearch</a> </p>
<p>QSL via <a href="http://www.arrl.org/lotw/">LOTW</a></p>
</td></tr></table>

<div id="w3c">
<a href="http://validator.w3.org/check?uri=referer"><img
src="http://www.w3.org/Icons/valid-xhtml10"
alt="Valid XHTML 1.0 Transitional" height="31" width="88" ></a>




</div>
</body>
</html>

Hi Howard

My routine for removing the stripped header information that I pass in to ckeditor when the file is loaded didn't cope with the complex code you have in your html file. I've changed the routine so that it now saves and reloads complex headers reliably. It won't affect how ckeditor itself generates html, so images may still be output in html rather than xhtml.


Vincent

Hi Vincent -

Thanks for all your efforts !

Indeed, it passes validation now.
There are still 30 warnings due to xhtml termination of html doctype.
---
Eg, Line 68, Column 13: NET-enabling start-tag requires SHORTTAG YES
N4AF<br />
The sequence <FOO /> can be interpreted in at least two different ways, depending on the DOCTYPE of the document. For HTML 4.01 Strict, the '/' terminates the tag <FOO (with an implied '>'). However, since many browsers don't interpret it this way, even in the presence of an HTML 4.01 Strict DOCTYPE, it is best to avoid it completely in pure HTML documents and reserve its use solely for those written in XHTML.
---
But at least they are just warnings.

Thanks, Howard