Have class in drop down?

Hi guys I need to some help and this is urgent I need to get this done soon.

Basically I need to apply a class to pre so it should be <pre class="code"> the thing is I can't do this I always have to go in source view which is kinda of a pain and since there is so much text there (the HTML) it gets quite confusing..

When you insert tables you can select the class and ID, I need to do this for the <pre> tag as well..

Anyone know how?

Sorry I don't know JavaScript so if your going to explain try to make it quite clear thanks!

Asim

Mon, 08/27/2012 - 16:07

asim

Joined: 05/07/2012

Posts: 4

Re: Have class in drop down?

No one knows? I just need to be able to insert the pre tag with class and ID through a GUI, anyone know of a plugin or how I can do it? Or maybe set pre tags to automatically has class ="prettprint" ??

Tue, 08/28/2012 - 17:45

asim

Joined: 05/07/2012

Posts: 4

Re: Have class in drop down?

OK I have nearly done it, I found this code and I have added a new button to the toolbar, this code adds a button which allows me to quickly add a pre tag.

(function(){
 var a= {
  exec:function(editor){
   var format = {
    element : "pre"
    
   };
   var style = new CKEDITOR.style(format);
   style.apply(editor.document);
  }
 },

 b="button-pre";
 CKEDITOR.plugins.add(b,{
  init:function(editor){
   editor.addCommand(b,a);
   editor.ui.addButton("button-pre",{
    label:"Button PRE",
    icon: this.path + "button-pre.gif",
    command:b
   });
  }
 });
})();

The problem is does anyone know how I can set it to also insert a class? so <pre class="prettyprint"> ?