ckeditor - div based editor

Question

I would like to create an editable area for my website using ckeditor. This editable area must show html formatted elements like ckeditor does, plus i would like that fonts and colors match the styles of my website.

The solution seems to be very simple, I could use the inline editing writing something like this:

<script type="text/javascript" src="ckeditor.js"></script>
<div contenteditable="true">my content...</div>

It works but there is something that I don't need: the editor appears and disappears if the div element has the focus or not. But, I want to show the editor every moment!

That seems to be possible only replacing a textarea (reading all other forums) but textareas don't match my website stylesheets!

After some searching I saw this example on ckeditor's website: http://ckeditor.com/demo#div

It is exactly what I need!!! An inline-editor that never disappears!

The problem is:

I'm not so able with the code, I can't understand what is the basic code to make the editor like that! Can you help me please?

Answer 1

I've googled it here!

You need a divarea plugin for CKEditor: download page.

After installing this plugin, you should launch editor with it like this:

<script>CKEDITOR.replace('my_text_area', { extraPlugins : 'divarea' });</script>

or you can add plugin in CKEditor's config.js:

CKEDITOR.editorConfig = function( config ) {
    config.extraPlugins = 'divarea'
};

Hope it helps (it should!)