How can users of TinyMCE customize their background color?

I recently integrated iBrowser into my site's TinyMCE editor to allow users to upload graphics, which is working fine. However, I'm struggling to enable them to change the background image of the pages they are editing. Whenever I try adding a div with an image background in the HTML editor, it causes issues when going back to the TinyMCE editor - pressing enter moves me below the image instead of creating a new line.

Any advice on how to allow users to easily change the background image of their page within TinyMCE?

javascriptcsshtmlbackgroundtinymce

Answer №1

In order to set the background-image style of the document in the editor, you can use the following code snippet (where ed refers 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)");

Please note, this code has been tested on Safari and Firefox browsers on Mac.

One issue to be aware of is that even when using the fullpage plugin to edit the entire HTML document, the style may not be applied when retrieving the content with getContent().

If you initialize TinyMCE with a document already containing the background-image style, it will render properly.

Considering how end-users select images, one approach could involve sending selected image details back to your server while saving the document, where the background-image style can be applied during processing.

Answer №2

In addition to the solution provided, it's worth noting that you can retrieve the value you've set using getStyle(). This can be especially useful when previewing background images.

var edObj = ed.dom.getRoot();
//retrieves the value like "url(/someImage.jpg)"
//use getStyle() instead of setStyle
//The boolean at the end determines if the computed style is returned
var background = ed.dom.getStyle(edObj, 'background-image', true);
document.body.style.background = background;

To display a preview in a popup, simply use:

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

Be sure to call this after the <body> tag, otherwise document.body will be undefined.

This method offers a straightforward solution without the need for jQuery.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Send a single piece of data using AJAX in Flask

I have a very basic HTML form containing only one <input type='text'> field for entering an email address. I am trying to send this value back to a Python script using AJAX, but I am having trouble receiving it on the other end. Is there a ...

javascriptjquerypythonjsonajax

Enhancing the visual appeal of a javascript canvas animation

I am facing a small issue and I want to incorporate an animation from: http://codepen.io/chuckeles/pen/mJeaNJ My main query is how can I modify it so that instead of dots, there would be small images? Which part of the code should I edit for this purpose? ...

javascriptjqueryhtmlcsscanvas

Replicate elements along with their events using jQuery

Every time I utilize ajax to dynamically generate new content using methods like .clone(), append(), etc., the newly created element loses all triggers and events that were programmed =( Once a copy is made, basic functionalities that work perfectly on ot ...

javascriptjqueryeventsappendclone

What steps should be followed to effectively incorporate Google Fonts into a Material UI custom theme for typography in a React/TypeScript project

Hey there, I'm currently working on incorporating Google fonts into a custom Material UI theme as the global font. However, I'm facing an issue where the font-weight setting is not being applied. It seems to only display the normal weight of 400. ...

cssreactjstypescriptwebpackmaterial-ui

Insert a line break into a tweet using JQuery

After installing this jquery plugin, I wanted to display my tweets on my website. However, the tweets are currently too close together and I need to add a line break between each one. Can anyone help me with how to achieve this? Below is the code I have b ...

jqueryhtmltwitter

Enhancing Images with Jquery

Hey there! I'm currently working on converting a Flash banner ad into HTML5 using jQuery. You can check out the link of the ad I'm trying to convert here. I've managed to complete the text effects, but I'm stuck on adding image animatio ...

c#jqueryhtmlbannerbanner-ads

Differences in accessing the previous state between React's useCallback and useState's setState(prevState)

It has come to my attention that useCallback functions recreate themselves when their dependencies change, acting as a sort of wrapper for memoizing functions. This can be particularly useful for ensuring access to the most up-to-date state in useEffect ca ...

javascriptreactjsreact-native

Why is the div still displaying with the same id and class even after postback in a partial view using MVC?

Encountering a issue where the partial view is repeating after post back, despite the functionality working correctly. Here is the code snippet from the View: @using (Ajax.BeginForm("MarkDefiniteDischargePatient", "PDDD",new { }, new Aja ...

jqueryhtmlcssasp.net-mvc

A step-by-step guide on implementing a callback function

I am eager to incorporate a callback into this script - specifically the third callback onSlideChangeStart(swiper) found at http://idangero.us/swiper/api/#.V9CMp5grJlY. Since I have never worked with callbacks before, I am unsure of where to begin. In es ...

javascriptjquerycallbackswiper.js

Using destructuring assignment in a while loop is not functional

[a,b] = [b, a+b] is ineffective here as a and b are always set to 0 and 1. However, using a temporary variable to swap the values does work. function fibonacciSequence() { let [a, b, arr] = [0, 1, []] while (a <= 255) { arr.concat(a) [a, ...

javascriptdestructuring

When Vue detects a change in declared parameters from an empty string, it automatically sends a

Within my application, I am making a request to the backend app and receiving a response with an ID such as { 'id': '12345'}. This ID is then saved as loadId within the data object: export default { name: 'SyncProducts', d ...

javascriptvue.jsaxios

Tips for handling an AJAX form submission with various submit buttons and navigating through Laravel routes

I am having trouble getting the form below to submit to the database. The issue arises when trying to use AJAX to submit the forms. The problem seems to occur at this point: $(i).submit(function(event) { Can someone help me figure out what I am doing wr ...

javascriptphpjqueryajaxlaravel

Performing a cross-domain JSON Get request with JQuery

Struggling with a simple JSON get request to an API on a domain that I don't have control over. Here's the code I'm using: $(document).ready(function () { $.ajax({ type: 'GET', url: 'http://pu ...

javascriptjqueryajaxjson

Can someone please guide me on how to transfer information from a material ui datagrid Row to a form input?

I need assistance. I have a table that holds user data and I want to create a functionality where clicking on the edit button opens a dialogue box with a form pre-filled with the user's initial data. However, I'm currently only able to pass the u ...

javascriptreactjsmaterial-ui

How can I determine the remaining amount of scroll left in my HTML document?

Is there a method to determine how many pixels of scroll remain on the page when the scrollbar is set at a specific position? I am currently utilizing jQuery's scrollLeft feature, which can be found here: http://api.jquery.com/scrollLeft/. I want to ...

javascriptjqueryhtmlcss

Node.js: Error - Module 'html' not found

Currently, I am utilizing Node.js and attempting to exclusively serve HTML files without any Jade or EJS engines. Below is the code for my entry point (index.js): var express = require('express'); var bodyParser = require('body-parser&apo ...

javascriptnode.jsexpress

npm does not accommodate the current version of Node.js (vX.X.X)

Today, I am attempting to install the most recent version of Node.js (13.12.0) along with npm. However, I have encountered an issue because the latest npm version (6.14.4) does not support this Node.js version, resulting in the following error message: np ...

javascriptnode.jsnpmchocolatey

"Encountering issue with SCSS variable not being applied to background in file

$enable-grid-classes: false; $enable-cssgrid:true; $deepBlue: #032f3e; body { --bs-body-bg: orange ; } @import "https://fonts.googleapis.com/css2?family=Space+Grotesk:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="463121 ...

htmlcsssassbootstrap-5

Extract the identifier of the class and subsequently pass it to the PHP script

How do I retrieve the id of a dynamically created class within a while loop, where the id corresponds to the user who posted it, and then send this id to PHP? Here's exactly what I'm trying to achieve: HTML: <div class='lol' id=&a ...

phpjqueryhtmlajaxpost

My Express server is having trouble loading the Static JS

I'm feeling frustrated about this particular issue. The problem seems to be well-solved, and my code looks fine, but I can't figure out what's wrong . . . I have a JavaScript file connecting to my survey page, which I've added at the b ...

javascriptexpress