Log in or register to post comments
Last post
jetnet's picture
Joined: 23/12/2009
Posts: 1
Wrap textarea's with DIV tags to make CSS work
I have a textarea that needs three div tags added around the content, in order for the CSS to appear correctly. Here is an example of what I am talking about:

Original Textarea
----------------------------
<div class="items">
<div class="item">
<div class="holder">
<div class="frame">
<div class="img-holder">
<img alt="image description" src="/sites/all/themes/XXXXXXX/images/img03.jpg" /></div>
<div class="number">
1</div>
<div class="title">
<h3> Title </h3>
</div>
<div class="txt-holder">
<p>Line one Content</p>
<p>Line two Content</p>
</div>
</div>
</div>
</div>
</div>
------------------------------------

In order for the CSS to display correctly in CKEditor, I need to wrap that with three extra DIV tags. HOWEVER, I do NOT need those DIV tags saved to the database.

This is what I need it to be when editing (bolded the extra DIV tags):
------------------------------------
<div id="wrapper">
<div id="main">
<div id="content">

<div class="items">
<div class="item">
<div class="holder">
<div class="frame">
<div class="img-holder">
<img alt="image description" src="/sites/all/themes/XXXXXXX/images/img03.jpg" /></div>
<div class="number">
1</div>
<div class="title">
<h3> Title </h3>
</div>
<div class="txt-holder">
<p>Line one Content</p>
<p>Line two Content</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

--------------------------------

But when it submits, I need it to strip out those extra tags, so that it looks like the original. Is there something in CKEditor that will do this already, or do I need to do this in the PHP that I write?
alfonsoml's picture
Joined: 31/12/2006
Posts: 3738
Re: Wrap textarea's with DIV tags to make CSS work
You have to do it in your code.
john byan's picture
Joined: 08/02/2010
Posts: 1
Re: Wrap textarea's with DIV tags to make CSS work
Also interested in finding a fix for this as whilst CKeditor is using the site's CSS files it is not using the text area's CSS context.

Main immediate symptom is that CKEditor area is rendering the background texture of the theme's surrounds instead of the plain white background of actual page content. Other anolamlies are bound to exist, presumably because CKEditor believes it is operating between <body></body> tags and knows nothing of all the DIV tags and classes etc. that are actually wrapped around it (it's CSS context).

I presume there is a way to tell CKEditor its CSS context or to get it to inherit it's context. Otherwise CKEditor is not a WYSIWYG editor.

As I am using CKEditor in a CMS (Content Management System) site "You have to do it in your [HTML?] code" does not help me. But config file or commands or possibly calling parameters (would require editing a Drupal module) may help.

This is not a unique problem by a long chalk, so does anyone know how to get CKEditor to behave as if between <DIV id="name"><DIV class="name"> tags?

I'm using:-
Drupal 6.15
WYSIWYG 6.x-2.x-dev {interface for 3rd party WYSIWYG editors}
CKEditor 3.1
cederlof's picture
Joined: 02/03/2010
Posts: 2
Re: Wrap textarea's with DIV tags to make CSS work
I'm also interested in this..
ElMoonLite's picture
Joined: 06/12/2012
Posts: 2
ckeditor wysiwygarea body (css) wrappers

There are lots of posts about this subject, but none ever offered a solution.
I decided to dive into the ckeditor core code myself and came up with a simple modification that works like a charm.

for details see my ckeditor ticket:
https://dev.ckeditor.com/ticket/9774 

the actual ckeditor code changes:
https://dev.ckeditor.com/attachment/ticket/9774/bodywrap.patch

(note that this 'patch' is applied to ckeditor 3.6.2)