close ad
WARNING PC USERS: Do Not Install the DREAMWEAVER CC 2017 Update »
open ad
View Menu

Technical Support Forums

Free, outstanding support from WebAssist and your colleagues

rating

edit content of div?

Thread began 11/24/2011 12:48 pm by ijs174940 | Last modified 12/07/2011 2:24 pm by ijs174940 | 1340 views | 6 replies |

ijs174940Beta Tester

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?

Sign in to reply to this post

Jason ByrnesWebAssist

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.

Sign in to reply to this post

ijs174940Beta Tester

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?

Sign in to reply to this post

Jason ByrnesWebAssist

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.

Sign in to reply to this post

ijs174940Beta Tester

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?

Sign in to reply to this post

Jason ByrnesWebAssist

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.

Sign in to reply to this post

ijs174940Beta Tester

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.

Sign in to reply to this post

Build websites with a little help from your friends

Your friends over here at WebAssist! These Dreamweaver extensions will assist you in building unlimited, custom websites.

Build websites from already-built web applications

These out-of-the-box solutions provide you proven, tested applications that can be up and running now.  Build a store, a gallery, or a web-based email solution.

Want your website pre-built and hosted?

Close Windowclose

Rate your experience or provide feedback on this page

Account or customer service questions?
Please user our contact form.

Need technical support?
Please visit support to ask a question

Content

rating

Layout

rating

Ease of use

rating

security code refresh image

We do not respond to comments submitted from this page directly, but we do read and analyze any feedback and will use it to help make your experience better in the future.

Close Windowclose

We were unable to retrieve the attached file

Close Windowclose

Attach and remove files

add attachmentAdd attachment
Close Windowclose

Enter the URL you would like to link to in your post

Close Windowclose

This is how you use right click RTF editing

Enable right click RTF editing option allows you to add html markup into your tutorial such as images, bulleted lists, files and more...

-- click to close --

Uploading file...