How to create in-context editing?

Question

My company is building a CMS. As a front-end web developer, I am asked to build a 'in-context editing' feature.

You can see an example here http://www.concrete5.org/documentation/general-topics/in-context-editing/

I want to know what kind of program should we know to build this? Can this be achieved with just JavaScript or some front end tools or does it need some server-side language?

Thanks.

Answer 1

Will need both front end and back end tools.

I assume you are talking about an in place editor.. jquery has quite a few plugins for it.

If you need a rich text editor, try out TinyMCE. I've used it, and liked it too.

Answer 2

For single line edits, here is a simple way to enable inline editing with just CSS (and a little JavaScript for IE7). In your edit-mode page, use a textbox to display the text, whether in edit mode or view mode.

Here's the css to make a form field look like plain text until it is hovered or focused:

.inContextEdit
{
    border: solid 1px transparent;
    margin: -2px -3px;
    padding: 1px 2px;
}
.inContextEdit.focus, /* IE7 doesn't recognize :focus */
.inContextEdit:focus,
.inContextEdit:hover
{
    border-color: #ccc;
}

Then, some JavaScript for IE7:

function focusInput(el)
{
    el.className += " focus";
}
function blurInput(el)
{
    el.className = el.className.replace(/ *focus\b/g, "");
}

And here is the markup you would use:

<input name="PageTitleInput"
      value="Page title"
      class="inContextEdit"
    onfocus="focusInput(this);"
     onblur="blurInput(this);" />

This trick will work with a <textarea> instead of an <input>, but you'll probably be better off finding an existing control for your multi-line text. The css could be tricky and hiding the scroll bar in view mode will be difficult. There are several existing controls out there with rich text capabilities.