Body BG Color Button

I'm looking for a way to alter the background color of the body element in the html via a button like the font bgcolor currently does. I've googled around quite a bit and I'm very surprised no one else wants/has done this. This functionality is crucial in order for CKEditor to be used as an online HTML editor to create Web pages. Has anyone performed this? I tried to copy and alter the font background color plugin, but was unable to apply the background color to the existing body. Instead, ckeditor added a new body element (as it would a span for the font bg). Has anyone tackled this already?

Wed, 05/04/2011 - 12:47

grezvany13

Joined: 04/05/2011

Posts: 1

Re: Body BG Color Button

I needed a similar button, except I only needed to switch it (from white to grey and back).

This plugin changes the background color of the body inside the iframe, so with a little modification you can extend it to your needs.

CKEDITOR.plugins.add('switchbg',
{
    init: function(editor)
    {
      var pluginName = 'switchbg';
      editor.addCommand( pluginName, CKEDITOR.plugins.switchbg );
      
      editor.ui.addButton('SwitchBG',
      {
         label: 'Switch Background Color',
         command: pluginName
      });
    }
});

CKEDITOR.plugins.switchbg =
{
   exec : function( editor )
   {
      element = editor.document.getBody();
      if( element.hasAttribute( 'switchbg' ) == false || element.getAttribute( 'switchbg' ) == 'white' ) {
         element.setStyle( 'background-color', '#999999' );
         element.setAttribute( 'switchbg', 'grey' );
      } else {
         element.setStyle( 'background-color', '#FFFFFF' );
         element.setAttribute( 'switchbg', 'white' );
      }
   }
};

Wed, 05/04/2011 - 17:57

wiktor

Joined: 16/07/2007

Posts: 1641

Re: Body BG Color Button

This will be handled by the "document properties" plugin, which will be available in CKEditor 3.6 (coming soon, in ~a week).

Wiktor Walc
CTO, CKSource - http://cksource.com
--
Follow CKEditor on: Twitter | Facebook | Google+

Tue, 05/10/2011 - 10:51

Anna

Joined: 14/12/2010

Posts: 1369

Re: Body BG Color Button

CKEditor 3.6 Document PropertiesFull Page

Check the screenshot here.

Documentation Manager, CKSource

See CKEditor 5 docs, CKEditor 4 docs, CKEditor 3 docs, CKFinder 3 docs, CKFinder 2 docs for help.
Visit the new CKEditor SDK for samples showcasing editor features to try out and download!

Wed, 05/25/2011 - 17:24

scottw

Joined: 14/11/2007

Posts: 66

Re: Body BG Color Button

Ooh that's neat.

Right now, I do something similar, but on a level higher, sort of - I have b/g color/URL, font family/size/color, padding for the area that I use CKE to edit the content.

I need to keep my system the way it is, for various reasons that I won't bore you with.

And what I currently do is build up some CSS code based on these settings, and then push it into CKE via CKEDITOR.replace after the editor is called.

But, what I'd love to be able to do is to allow changes in my own form settings above to take, live, in the editor area, much like this Document Properties popup will change things when adjusted.

Are there methods introduced with this new feature that I can tap from outside? Or could I have been tapping CKEDITOR.replace again later to push new CSS info in, and would it take visually?