CODEWITHSUNDEEP
tinymcepadding
Magnus Karlsson
Magnus Karlsson

Reputation: 3579

Current plugins for padding in TinyMCE

I've been looking for hours to find a plugin that would add somthing like "padding: 5px" to an image. Does everyone do this through plain html? Our customer need a way to add this simply with the use of a button or right click context menu. Any suggestions/solutions or do I have to develop this myself?

Suggestions concerning other products than TinyMCE is not necessary.

Upvotes: 2

Views: 1364

Answers (1)

Thariama
Thariama

Reputation: 50832

The easiest to use is to add a custom stylesheet which only need to be set as a parameter (content_css). Example code snippet for the tinymce configuration:

...
theme: 'advanced',
content_css: "http://my_server/my_css/my_custom_css_file.css",
...

This css should contain something like the following

img {
    padding-left: 5px;
}

The code for the tinymce button is a bit more complex (but if wised i can post it as well) and the css gets set using the following 

$(ed.get('my_editor_id').getBody()).find('img').css('padding-left','5px');

UPDATE: Button code:

tinyMCE.init({
   ...
   setup : function(ed) {
      ed.onInit.add(function(ed, evt) {
          ed.addButton ('wrap_div', {
            'title' : 'my title',
            'image' : 'my_image.png',
            'onclick' : function () {
                ed.getBody().find('img').css('padding-left','5px');
            }
        });
      });
   }
});

Upvotes: 4

Related Questions