Graphically edit a page?

[sygsix]

Hello all.

I am a Java programmer who sometimes dabbles in simple PHP stuff, and
had a question that's way over my head, for you DHTML experts.

I would like to know how to dynamically edit a currently static HTML
page which contains a map of a stands at a convention center. The
static version of the page can be found here:

http://www.ibertoldo.com/plano.htm

I would like to be able to *visually* edit this page -- create, modify
(re-shape and move boxes, assign data, etc.), and delete boxes on the
page, and then click on a "Save" button to save the changes in my
database, using PHP.

The server-side aspect I have no problem with, it's the client-side
that I have no idea how to do (if it's even possible ...) I have a
feeling what I am asking for is something much more suited to Flash but
I need to do it in DHTML / PHP.

Does anyone know of a graphic editor out there, something that allows
drag-and-drop and stretching of HTML (DHTML) elements?

Thanks for any tips,
syg

[Martin Honnen]

sy****@gmail.com wrote:

I would like to know how to dynamically edit a currently static HTML
page which contains a map of a stands at a convention center. The
static version of the page can be found here:

http://www.ibertoldo.com/plano.htm

I would like to be able to *visually* edit this page -- create, modify
(re-shape and move boxes, assign data, etc.), and delete boxes on the
page, and then click on a "Save" button to save the changes in my
database, using PHP.

So you want a kind of wysiwyg editor for HTML documents?

Or you even expect the browser to allow such editing?
IE 5 and later on Windows and Mozilla 1.4 and later allow editable
iframes so you would need to load a document in an iframe and when the
document is loaded you can set the designMode property of the document
to 'on' to allow the browser user to edit the document. Whether those
editing capabilities do then fit your expectations of "shaping and
moving boxes" I am not sure.

IE docs are here:
<http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/properties/designmode.asp>

Mozilla docs are here:
<http://www.mozilla.org/editor/midas-spec.html>

Saving back to your server is possible where for instance with IE you
could access
iframeDoc.documentElement.outerHTML
and send that to the server. However you need to realize that outerHTML
is IE's serialization of the DOM tree and does not necessarily match
your expectations of HTML source formatting. Don't expect IE to preserve
your source code with that approach.

--

Martin Honnen
http://JavaScript.FAQTs.com/

[sygsix]

No, I don't really want to edit an HTML page per se. Yes I would be
editing the page but I don't want to be able to dynamically add
anything except DIVs, I don't need a full-blown HTML editor.

What I would like to do is simply present the user with a grid of
boxes. Each one would be a DIV I guess. On that grid he creates stands
made up of x grid boxes by clicking on a given box then stretching it
so it is made up of 1, 2 or x more boxes. He then assigns some data
(name of company, status) and saves.

All I would be saving here are some x,y coordinates and the company
info. With that info saved when the user returns to the page I simply
spit out a DIV with given coordinates for each entry in the database.

I think I am dreaming though. I could do this kind of thing myself with
the DynDuo DHTML library or something but I think it would take me
quite a long time. I was interested in knowing if something like this
already exists.

I guess not?

syg

[Vladdy]

sy****@gmail.com wrote:

No, I don't really want to edit an HTML page per se. Yes I would be
editing the page but I don't want to be able to dynamically add
anything except DIVs, I don't need a full-blown HTML editor.

What I would like to do is simply present the user with a grid of
boxes. Each one would be a DIV I guess. On that grid he creates stands
made up of x grid boxes by clicking on a given box then stretching it
so it is made up of 1, 2 or x more boxes. He then assigns some data
(name of company, status) and saves.

All I would be saving here are some x,y coordinates and the company
info. With that info saved when the user returns to the page I simply
spit out a DIV with given coordinates for each entry in the database.

I think I am dreaming though. I could do this kind of thing myself with
the DynDuo DHTML library or something but I think it would take me
quite a long time. I was interested in knowing if something like this
already exists.

I guess not?

syg

I doubt you can find a "turn-key" solution, but programming of your
application is straight-forward (even if time consuming).
There are plenty of demo scripts that show how to do drag and drop as
well as resize. Saving data can be accomplished by polling the divs and
getting their offset[Top/Left/Width/Height] for coordinates and then
getting it to the server in a hidden form field or using AJAX methods
--
Vladdy
http://www.klproductions.com