How to enable user of TinyMCE to change background?

1
votes

I have a TinyMCE editor on my site. I've added iBrowser so that people can upload graphics. It's ok. I've tried also to enable them to change the background of the site that they are editing but without success: if i add in HTML div with image in background and go back to editor and press enter it moves me below the image and not to another line.

How to enable for users changing background image of site in TinyMCE?

2
javascriptcsshtmlbackgroundtinymce
Do you plan to let them edit the entire page source, or do you want some sort of DIV with the image on? Alternatively do you want to provide them a way to set the background image and have your backend service set the style for the published page? – Brett Henderson
i totaly agree with Brett, we do need some more information here – Thariama
Thanks for questions. Yes, i have it work that way that background that user will change in TinyMCE will be visible on the page where contents generated from TinyMCE is shown. I've tried with DIV, but when i set background on it it shows up in editor. But when i press enter than TinyMCE jumps below div and does sort of weird things. – Tom Smykowski

2 Answers

5
votes

The following code will set the background-image style of the document within the editor (where ed is a reference to the current TinyMCE instance)

var edObj = ed.dom.getRoot();

//Set the Style "background-image" to the button's color value.
ed.dom.setStyle(edObj, 'background-image', "url(some_background_image.jpg)");

Note, I've only tested this on Safari and Firefox on Mac.

The only problem is, even if you are editing the entire HTML document using the fullpage plugin it still won't return the document with the style applied when you retrieve the content using getContent().

If you load TinyMCE with a document that has the background-image style already defined, then TinyMCE will render it.

With this in mind, depending on how you provide the end-user the ability to select the image, one approach would be to provide a way to send the selected image details back to your server at the same time as you save the document and process it there, applying the background-image style.

0
votes

Just an addition to the accepted answer is that you can later retrieve the value you set in a similar fashion using getStyle(). Very useful to have the background image show up in a preview easily. 

var edObj = ed.dom.getRoot();
//gets the value that looks like "url(/someImage.jpg)"
//notice getStyle() instead of setStyle
//The boolean at the end is if you want the computed style
var background = ed.dom.getStyle(edObj, 'background-image', true);
document.body.style.background = background;

For a popup displaying a preview just use:

var edObj = tinyMCEPopup.editor.dom.getRoot();
var background = tinyMCEPopup.editor.dom.getStyle(edObj, 'background-image', true);
document.body.style.background = background;

Make sure this is called after the <body> tag or else document.body will be undefined.

I hope this helps anyone else looking for a simple grab solution without importing jQuery.