ckeditor - div based editor

4
votes

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?

1
ckeditor
You've been very specific up to the point that your actual question is asked .. what particular problems are you having with the solution that you found? Please edit your question to indicate more specifics. - Tim Post♦
Well, my problem is the same. I can't find how to create div-based editor (by default it uses iframe). Demo page says nothing about HOW TO do it. - Envek

1 Answers

15
votes

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!)