edit content of div?

I am working on a CMS to help speed up development of my sites but I would like to offer my clients an inline editor for there sites so they can see how the page will look before they save it.

Here is the problem the editor only edits content inside a text field but to make it a true inline editor I need it to be able to edit the content of a div. I can separate the toolbar from the target field and get it to edit multiple text fields by adding this to the custom.js file

// Place the toolbar inside the element with an ID of "myToolbar" and the elements path
// in the element with an ID of "myElementsPath".
config.sharedSpaces =
{
top : 'myToolbar',
bottom : 'myElementsPath'
};

I can get the bottom to change depending on the focus of the selected field so it sends the correct id of the field that needs editing but I cannot figure out how to make it edit the content of a div, any ideas or pointers?

the way CMS works is to store the page content in a database.

each content area is a new record in the contents table of the database.

use HTML Editor to design the content, use the data assist insert record behavior and update record behavior to store the content and edit it.

you need to use a recordset to look up the content from the database to show it on the page.

Jason, did you read the posting? why are you giving a generic explanation of how a cms works when I asked about a specific feature of the HTML editor?

yes, i did read the posting, and it seamed to me that you where confused on how CMS works.

html editor does not edit the content of the div directly.

the content of the div is data that is stored in the database.

to use html editor to edit the data that is stored in the database, you need to create a recordset that looks up that data.

in HTML Editor, set the initial value to use the content column from the recordset.

Use an update record behavior to update the database when the HTML Editor form is posted.

I think we are both reading off the wrong page here, let me try and explain my issue a different way.

I have a working CMS system already that uses the HTML editor to change content within a client’s site, the editor is placed inside a separate admin section which loads the content from the db and into the textarea that the extension makes. It is then a simple matter of inserting or updating the content back into the db.
I now want to the client to be able to edit the content inside a page with multiple sections via

<div onClick="this.contentEditable='true';">lorem ipsum dolor lorem ipsum dolorlorem ipsum dolor</div>

I need to know how I can edit the content of the div using the toolbar created by the extension, as previously mentioned I can separate the tool bar from the textarea and place it in a div at the top of the page. I can also make the toolbar edit multiple areas but what I cannot get it to do is edit the content of the div as the extension always default to a textarea.

Is this any clearer?

yeah, that makes more sense.

You would need to hand code the logic to make an ajax request to the database to get the content from the database, then do another ajax call to update the database.



this is not directly supported in HTML Editor and will take custom coding.

The ajax calls are not a problem. I know a bit of coding outside your extension is required but since it is based on CKEditor I have raised the issue on there forum but as it has your code wrapper on it they advise to seek support from you!

Can I get the editor to edit the content of a div? If not is there a autosize function that would work with the textarea the editor creates?

this way at least I can get around the limitation of trying to edit a div and have the textarea expand vertically with no scroll bar or bottom tag bar showing.