Using FCKEditor to provide rich in-line editing a la Flickr et al on Steroids

mickey.jpgI have been floating ideas around about how to implement a flexible and simple Content Management component using ASP old skool (as many of my client still rely on that – and it’s a good tech fit for them and me as they’re small deployments with little trickery required).

One of the things I was playing around with was editing content in-line in a rich and meaningful way. Current implementations are great to a point, but still represent rich(er) content as raw HTML.

My favourite implementation of this is from Yvo Schapp – http://www.yvoschaap.com/index.php/weblog/ajax_inline_instant_update_text_20/ – It’s a small javascript routine that will get the innerHTML and display it for editing. Great for quick edits and such and something very similar to what Flickr has implemented.

I wanted to go one step further and add my preferred Rich HTML editor – FCKEditor; this javascript based editor gives you probably as much as you’re going to need in terms of features and flexibility. At the time of writing it’s on V2.5.1, but v3.0 discussions look very interesting to see where this product is going. Take a look at the FCKEditor website for more info.

(Before you read on – this article has been the most read article since I posted it – between 7 – 10 views a day – If you found this useful please do comment!) 

So after downloading that, I also wanted to use MooTools for some work around this – MooTools isn’t needed per se, you could do all with just FCK and hand-cranked javascript. For example, everywhere you see the referenced var x = $(something), you could easily replace it with var x = document.getElementByID(something) – however I also wanted to make sure that for the project, Moo and FCK played well together.

So here’s my Mickey Mouse code for editing in-line – it’s not intended to be a “plug and use everywhere” piece of code – I just wanted to show you how it’s done. My inspiration was taken from a couple of articles from the “Matt’s Musings” website. His example went quite indepth, so I’ve taken that and simplified so you can see how it’s done.

I do have one bug with this which exists for Firefox only – I’ve hacked it with CSS but I would prefer a more robust solution – basically creating the form buttons (submit, cancel), causes them to be displayed as minuscule buttons – IE displays them fine. In the interest of this example, I set the CSS so that they’ll be displayed. If you know why this happens, please add a comment!

Also, the implementation here is not “Production ready” – some of the ways I constructed code would not be the way I’d do it in the final copy, but rather than be all clever about it and wrap it up in lovely OO’ified code, I present it this way!

Please comment if you found this article useful!

——— CODE STARTS —————

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;
<html xmlns=”http://www.w3.org/1999/xhtml”&gt;
<head>

<script type=”text/javascript” src=”fckeditor/fckeditor.js”></script>
<script type=”text/javascript” src=”scripts/mootools.js”></script>

<script type=”text/javascript”>
window.onload = function(){
FCKeditorAPI = null;
__FCKeditorNS = null;
}

function submitContent(){
//save the content
}

function cancelEdit(){
// cancel edit
}

function editInPlace(contentID,editorID,controlsID){
var controls_container = $(controlsID); // get the DIV id for the container
// create a save button
var someSubmitButton = document.createElement(‘button’);
someSubmitButton.setAttribute(‘id’, ‘submitEditInPlace’);
someSubmitButton.setAttribute(‘name’, ‘submitEditInPlace’);
someSubmitButton.setAttribute(‘value’, ‘Submit’);
controls_container.appendChild(someSubmitButton);

// add event listener – this handles the different browser implementation
if(typeof someSubmitButton.addEventListener != ‘undefined’) {
someSubmitButton.addEventListener(‘click’, submitContent, false);
} else if(typeof someSubmitButton.addEventListener != ‘undefined’) {
someSubmitButton.addEventListener(‘click’, submitContent, false);
} else if(typeof someSubmitButton.attachEvent != ‘undefined’) {
someSubmitButton.attachEvent(‘onclick’, submitContent);
}

//create a cancel button
var someCancelButton = document.createElement(‘button’);
someCancelButton.setAttribute(‘id’, ‘cancelAjaxForm’);
someCancelButton.setAttribute(‘name’, ‘cancelAjaxForm’);
someCancelButton.setAttribute(‘value’, ‘Cancel’);
controls_container.appendChild(someCancelButton);

// add event listener – this handles the different browser implementation
if(typeof someSubmitButton.addEventListener != ‘undefined’) {
someCancelButton.addEventListener(‘click’, cancelEdit, false);
} else if(typeof someSubmitButton.addEventListener != ‘undefined’) {
someCancelButton.addEventListener(‘click’, cancelEdit, false);
} else if(typeof someSubmitButton.attachEvent != ‘undefined’) {
someCancelButton.attachEvent(‘onclick’, cancelEdit);
}

var editor_container = $(editorID); // get the DIV for the editor
var text_area_name = “fckEditor”;
var textarea = document.createElement(‘textarea’); // create the TEXTAREA that fckEditor needs
textarea.setAttribute(‘id’, text_area_name);
textarea.setAttribute(‘name’, text_area_name);
textarea.value = $(contentID).innerHTML
editor_container.appendChild(textarea); // append the TEXTAREA to the editor DIV
// now instantiate our FCKEDITOR
oFCKeditor = new FCKeditor(text_area_name);
oFCKeditor.BasePath = ‘fckeditor/’ ;
oFCKeditor.ReplaceTextarea();
}
</script>
<style>
body{font-family:Arial, Helvetica, sans-serif;}
button {height:25px; width:60px;}
.preview{background-color:#EFF5F5;}
</style>

<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Dynamically Editing in place</title>
</head>

<body>
<form action=”yourprocessingpage.asp” method=”post”>
<a href=”#” onclick=”editInPlace(‘content1′,’editor’,’controls’)”>edit this content</a>
<div id=”content1″ class=”preview”>
<p>ISO – Use WinRAR to view; I use <a href=”http://www.daemon-tools.cc/dtcc/download.php?mode=ViewCategory&catid=5&#8243; target=”_blank”>Daemon
Tools</a> to mount the image files. DT will create virtual DVD drives on your system – to mount files you just tell DT where the ISO file by mounting – <a href=”http://www.mediafire.com/?5qazogmjjn1&#8243; target=”_blank”>see this Flash video</a> for how to.</p><p>Daemon will mount all sorts of image files, such as CCD, CUE, ISO, MDS – but it won’t mount IMG files… for that use PowerISO to view or Nero to burn to a disc.</p><p>Sometimes you’ll also find you have a BIN file – this really needs a CUE file for Windows to know what to do with it (and DT).</p><p>Simply open notepad and type the following</p><p><strong>FILE “<insert the name of your BIN file here>” BINARY<br />TRACK 01 MODE1/2352<br />INDEX 01 00:00:00</strong></p>

</div>
<div id=”editInPlace”>
<div id=”editor”></div><div id=”controls”></div>
</div>

</form>
</body>
</html>

——— CODE ENDS —————

Advertisements

5 thoughts on “Using FCKEditor to provide rich in-line editing a la Flickr et al on Steroids

  1. This is a very nice script. I have solved your button problem for you.

    in your someSubmitButton routine, add a new attribute like
    setAttribute(‘type’,’Submit’);
    and in also
    someCancelButton.setAttribute(‘type’, ‘button’);

    This solves the button problems as you missed the type attribute.

    Overall a great start to a good thing!

  2. hey,

    came here looking for info about how to add a “flickr” button to FCKeditor. not what this post is about, but good looks on the javascript!

    Alex

  3. Hi – this exactly what i was searching for .. had the same idea: inlineediting with rich-content.

    A demo would be nice to see how far it is possible to integrade the rich-content-editor into the frontend-webpage-layout.

    Thx Benjamin

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s