Adding class to an image in the testarea

I add classes to images in CKEditor through the 'Advanced' tab in the 'Image window'. Do you have this option?

I just tried doing your method myself through the `Source' method as described above and it worked for me. It does move the position of where I typed class="style" to a new in 'img' tag but doesn't matter.

Also you won't see the style take effect in CKeditor. Only on the live page.

Where is the advanced tab? I can;t find one anywhere.

I've tried adding class="imgfloat" to my image code within the Source and if I save the changes whilst still in Source view the class is applied and I can see the changes on the live page once I refresh the page but the class="imgfloat" code disappears from the source code. Also if I go back to wysiwig view and make other changes and save - the position of the image goesa back to normal.

The only way I can position my image is to use the image options int he editor - hspace and vspace and align left or right as well as border - but there is no option ot add a border colour.

My style does all of these things and if I could apply it images within text would diplay consistenty on the site.

I found that the latest version of CK Editor strips out classes from Source mode when publishing so I normally add the following line to the CK Editor config file here /perch/addons/plugins/editors/ckeditor/config.js

// allow source code editing without stripping class tags
    config.allowedContent = true;

Add the above before the final curly bracket.

You will need to redo this if you update the editor

Thanks Clive - I'll give that a go and make a note in the Client file that this needs to be redone if we update Perch in the future.

It sounds like you have the basic CKEditor installed. Which is the standard download from the Perch website. I have added functionality to mine by updating the 'config.js' file in the creditor folder.

Try Pasting the below in your config file to see if it gives you the advanced tab: Make a backup of you old config.js first though :-)

CKEDITOR.config.allowedContent = true; 
CKEDITOR.editorConfig = function( config ) {
    // Define changes to default configuration here. For example:
    // config.language = 'fr';
    // config.uiColor = '#AADC6E';
    config.extraPlugins = 'dialogadvtab';


        config.toolbarGroups = [
        { name: 'document',    groups: [ 'mode', 'document', 'doctools' ] },
        { name: 'clipboard',   groups: [ 'clipboard', 'undo' ] },
        { name: 'editing',     groups: [ 'find', 'selection', 'spellchecker','mediaembed' ] },
        { name: 'forms' },
        { name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
        { name: 'paragraph',   groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ] },
        { name: 'links' },
        { name: 'insert' },
        { name: 'styles' },
        { name: 'colors' },
        { name: 'tools' },
        { name: 'others' },
        { name: 'about' }
    ];
};

thats sorted it out perfectly - thanks again Clive!

Thanks James - might give that a go too, but will have to leave it until next week as that's me done for the day today and the working week this week...

No worries. The Advanced tab is very useful. Highly recommend it!