DIV block editor

I find that the only way I can add DIVs to a document, is via the HTML source. What's I'd like to see, see a DIV editor option that works like the TABLE editor. I should be able to:

Select an image and several <p>-separated paragraphs

Place a single DIV around the lot

Float the DIV

Apply borders, margins and padding, background, classes

Re-select the DIV

And it would be very nice to;

Be able to create and select preformatted DIV "styles".

Call them "blocks" or "Div blocks", because my customers wouldn't understand "div"

Thu, 03/10/2011 - 16:32

rayrule

Joined: 10/03/2011

Posts: 2

Re: DIV block editor

Hi, it's possible to use pre defined divs.

add the following:

create ckeditor_config.js,
create templates.js,
create custom_stylesheet.css

customConfig : '<?=option(adminurl)?>js/ckeditor_config.js?ver=<?=option(version)?>'

And after that try this config:

ckeditor_config.js:

CKEDITOR.editorConfig = function( config )
{
    config.toolbar = 'MyToolbar';
 
    config.toolbar_MyToolbar =
    [
        ['NewPage','Preview','-','Templates'],
      ['Bold','Italic','Strike'],
      ['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'],
        ['Cut','Copy','Paste','PasteText','PasteFromWord','-','Scayt'],
        ['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
        ['Image','Flash','Table','HorizontalRule','SpecialChar','PageBreak'],
        ['Link','Unlink','Anchor'],
        ['Maximize']
    ];
   config.templates_files = [ '../js/[b]dctemplates.js[/b]' ];
   CKEDITOR.config.contentsCss = '../css/[b]dcstyle.css[/b]' ;
};

templates.js:

// Register a template definition set named "default".
CKEDITOR.addTemplates( 'default',
{
   // The name of the subfolder that contains the preview images of the templates.
   imagesPath : CKEDITOR.getUrl( CKEDITOR.plugins.getPath( 'templates' ) + 'templates/images/' ),
 
   // Template definitions.
   templates :
      [
         {
            title: 'in tweeen gedeeld', // div in two coloms
            image: 'template4.gif',
            description: 'Wil je een pagina in twee nette kolommen, selecteer dan deze.',
            html:
               '' +
               '<div class="content"><div class="eentweede links"><h3>Hoofdstuk 1</h3><p>je tekst hier</p></div><div class="eentweede rechts"><h3>Hoofdstuk 2</h3><p>je tekst hier</p></div></div>'
         },
         {
            title: 'in drieen gedeeld', // div in three coloms
            image: 'template6.gif',
            description: 'Wil je een pagina in twee nette kolommen, selecteer dan deze.',
            html:
               '' +
               '<div class="content"><div class="eentweede links"><h3>Hoofdstuk 1</h3><p>je tekst hier</p></div><div class="eentweede rechts"><h3>Hoofdstuk 2</h3><p>je tekst hier</p></div></div>'
         },
         {
            title: 'in vieren gedeeld', // div in four coloms
            image: 'template5.gif',
            description: 'Gebruik dit voor bijvoorbeeld de voorpagina.',
            html:
               '' +
               '<div class="content"><div class="eenvierde links"><h6>sectie 1</h6><p>je tekst hier</p></div><div class="eenvierde links"><h6>sectie 2</h6><p>je tekst hier</p></div><div class="eenvierde links"><h6>sectie 3</h6><p>je tekst hier</p></div><div class="eenvierde rechts"><h6>sectie 4</h6><p>je tekst hier</p></div></div>'
         },
         {
            title: 'in tweeen gedeeld',
            image: 'template4.gif',
            description: 'Wil je een pagina in twee nette kolommen, selecteer dan deze.',
            html:
               '' +
               '<div class="content"><div class="eentweede links"><h3>Hoofdstuk 1</h3><p>je tekst hier</p></div><div class="eentweede rechts"><h3>Hoofdstuk 2</h3><p>je tekst hier</p></div></div>'
         }
      ]
});

My CSS is:

custom_stylesheet:

body   {
   font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
   font-size:12px;
   color:#666;
   word-spacing:1px;
}
.eenvierde   {
   border:1px dotted #ccc;
   width:23%;
   float:left;
   margin-left:1%;
}
.eenvierde p   {
   padding:10px;
}
h1,h2,h3,h4,h5,h6,th,blockquote {
   letter-spacing:1px;
   font-family:Tahoma, Geneva, sans-serif;
}
h1,h2,h3,h4,h5,h6{font-weight:normal;line-height:100%;}
h1{font-size:36px;}
h2{font-size:28px;}
h3{font-size:22px;}
h3.widgettitle,#popular_related_posts h3{margin-bottom:12px;padding-bottom:18px;padding-left:0;}
h4{font-size:18px;}
h5{font-size:16px;letter-spacing:1.6px;margin-bottom:20px;text-transform:uppercase;}
h6{font-size:12px;letter-spacing:1.6px;margin-bottom:15px;padding-bottom:5px;text-transform:uppercase;color:#888;line-height:20px;}

.eentweede   {
   width:49%;
   display:block;
   vertical-align:top;
   float:left;
   border:1px dotted #ccc;
}
.rechts   {
   float:right;
}
blockquote   {
   background:transparent url(images/sprite.png) no-repeat scroll -168px -166px;
   font-size:14px;
   line-height:20px;
   letter-spacing:0;
   margin:40px 0;
   padding:10px 20px 10px 40px;
   float:right;
}

but make sure you have the same css at the front.

Regards,

Raymond
(p.s. sorry for my bad english)

Thu, 03/10/2011 - 18:28

iantresman

Joined: 11/08/2007

Posts: 9

Re: DIV block editor

Thank you for taking the time to write out the code, I shall try it out. But it would be nice if this was built-in to CKeditor!

Thu, 03/10/2011 - 20:07

alfonsoml

Joined: 31/12/2006

Posts: 3735

Re: DIV block editor

http://docs.cksource.com/CKEditor_3.x/U ... Layout/Div