I have managed to get microsofts dhtml editor to work in the midgard 1.4b4
article edit pages!

I'm not clever enough to frame the whole thing like Alan, but this is pretty
nifty!

Oh YES, oh YES!

You either need IE5 or IE4 and download a magic activeX.
There is a slight change to the "/topic/article" page, the adition of
"/topic/article/get" and a new blank style, and thats it!

Instructions below (tested on another site as I write them)

1) Create blank style to be used to serve raw articles
a) In STYLE ADMIN add a new style called "Blank"
b) Edit & modify the ROOT element of this style so it is:

    1:
    2: <(content)>

   - yes that is one blank line, and don't type the line numbers

2) We create page to serve raw articles to editor
a) Under HOST ADMIN, select your admin site
b) Edit ROOT PAGE
c) Edit TOPIC sub page
d) Edit ARTICLE sub page
e) Create NEW sub page
   i) Name: get
   ii) Style: Blank
   iii) Type: Active
   iv) type the body as below (without line numbers)

    1: <?php
    2: $article=mgd_get_article($argv[0]);
    3: ?>&(article.content:h);

   v) leave the rest as they are

3) Modify the ARTICLE parent page
a) Add a new style element called "body-format"
(This is the same as the ROOT body-format with the adition of an OnLoad
element)

    1: bgcolor="#FFFFFF"
    2: text="#000000"
    3: link="#330000"
    4: alink="#C0C0C0"
    5: vlink="#330000"
    6: onLoad="pageLoaded()"

Now edit the ARTICLE page itself,  - the details are described here but the
whole new page is included as an attachment to this message so you can just
drop it in:

a) Insert this script at the very top of the ARTICLE page:
(The script is long winded but it is proof against the JavaScript parse
error)


<? if (($action=='create') || ($action=='modify')) {?>
<script language="JavaScript">
function pageLoaded() {
  URL="http://<?php echo
$HTTP_HOST;?>&(mgdroot);/topic/article/get/&(article.id);";
  ContentEditor.document.body.all["tbContentElement"].LoadURL(URL);
}
</script>
<?} else {?>
<script language="JavaScript">
function pageLoaded() {
}
</script>
<?}?>
<script language="JavaScript">
function formSubmit() {

document.articleForm.content.value=ContentEditor.document.body.all["tbConten
tElement"].DOM.body.innerHTML;
}

</script>


b) Change the form declarations to add the onSubmit handler, and define a
form name:

 } else

  if ($action == 'create') { ?><form name="articleForm" onSubmit="return
formSubmit()" method="post" action="&(mgdroot);/topic/article/"><?
  } elseif ($action) { ?><form name="articleForm" onSubmit="return
formSubmit()" method="post"
action="&(mgdroot);/topic/article/&(article.id);.html"><? }

/* ARTICLE METADATA */


c) update the form where the textarea for editing the content is:
(note the src URL for the iframe)


<h3>Abstract:</h3>
   <? if ($action) { ?>
<textarea name="abstract" rows="5" cols="60" wrap="soft">
&(abstract);
</textarea>
   <? } else { ?>
<p class="abstract">&(article.abstract);</p>
   <? } ?>

<h3>Content:</h3>
   <? if ($action) { ?>
<input type="hidden" name="content" value="">
<iframe id="ContentEditor" src="/dhtml/SAMPLES/WEB/WEBAPP/BUILDED.HTM"
style="BORDER-BOTTOM: silver solid thin;
BORDER-LEFT: silver solid thin;
BORDER-RIGHT: silver solid thin;
HEIGHT: 556px; LEFT: 200px;
XPOSITION: absolute; TOP: 75px; WIDTH: 650px; Z-INDEX: 104">
<textarea name="content" rows="10" cols="60" wrap="soft">
&(content);
</textarea>
</iframe>
   <? } else { ?>
&(article.content:f);



4) Download the DHTML editor from Microsoft and install on your web server
a) Download:
http://msdn.microsoft.com/downloads/samples/internet/browser/editcntrl/dhtms
amp.exe
b) Unpack on your PC
c) Transfer the files to your DocumentRoot, in a folder called "dhtml" which
contains the unpacked "inc" and "samples" folders.
d) edit dhtml/SAMPLES/WEB/WEBAPP/BUILDED.HTM and comment out the line that
has "relnotes" in it.
e) If you have mod_speling in apache, turn it on (to map case-sensitive file
names in the DHTML stuff)
   CheckSpellingOn

(it does no harm to keep it on!)  Otherwise you will have to do something to
make the path names match the referenced names in the DHTML files.

5) If you don't have IE5 but do have IE4, download the DHTMLEDIT sdk to
install the DHTML edit control:
a) Download and run:
http://msdn.microsoft.com/workshop/author/dhtml/edit/dhedsdk.exe



And thats all.  You then get embedded HTML editing of stories with no need
for activeX's or paying any money.

I will make more changes, for instance to remove the load and save buttons
from the toolbar.
I guess I should also make the files that make up the DHTML editor more
locally cachable than they are.


Sam

article.php

--
This is The Midgard Project's mailing list. For more information,
please visit the project's web site at http://www.midgard-project.org

To unsubscribe the list, send an empty email message to address
[EMAIL PROTECTED]

Reply via email to