How can I change the background color of the textArea in Summernote?

Currently, I am in the process of incorporating Summernote into the jdorn json-editor. I have successfully implemented it, but now I need to find a way to change the background color of the textArea that Summernote uses. It seems there is no built-in API for this in Summernote (unless I have overlooked it). My current workaround involves using jquery to modify the background color, but this method changes the color for every instance of Summernote on the page.

Is there a specific technique within Summernote to achieve this task, or perhaps a jquery approach to target a single instance (which would be more manageable)? As someone with limited experience in jquery, this may come across as a basic inquiry.



var newCss = {};
newCss.backgroundColor = #000000;
$('.note-editable').css(newCss);

https://i.sstatic.net/CACjz.png

Answer №1

After some exploration, I successfully resolved this issue by utilizing the onInit callback event and delving into the event target to retrieve the editable property – which corresponds to the div containing the editable text.

         onInit: function (e) {
            self.editable = e.editable[0]

            var backgroundColor = self.jsoneditor.root.getValue().options.default_bg_color;
            self.editable.style.backgroundColor = backgroundColor
          },

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

Issue with Accessing Subdomain Cookies on Express Backend Using CORS and Cookie-Parser

I am currently tackling a challenge in my MERN (MongoDB, Express, React, Node.js) application related to receiving cookies from subdomains in my Express backend. Despite implementing CORS and cookie handling successfully for a simple localhost origin, I am ...

Issues with AJAX functionality in select fields - LATEST UPDATE

I have created a form with two select fields. The first field is populated with the parents of a custom taxonomy, and the second field is populated with the children of each parent. I used AJAX to accomplish this, but it doesn't seem to be working pro ...

Troubleshooting: Wordpress Ajax call failing with 500 Internal Server Error

Dealing with Ajax calls in a custom page template on Wordpress can be more complex than expected. I've struggled to get it running smoothly without crashing my entire site. It's puzzling why this particular approach is necessary when other Ajax c ...

What is the best way to retrieve the unique identifier of dynamically created divs and showcase a message based on that identifier?

Is it possible to retrieve the id of a dynamically generated div and show a unique message when each div is clicked in the code snippet found at this link? function get_random_color() { var letters = '0123456789ABCDEF'.split(''); ...

Changing the language of the bootstrap datetimepicker (not just the datepicker)

tag, I am utilizing the most recent version of Bootstrap (4.2.1) in conjunction with the latest version of jQuery. Moreover, I have also integrated moment.js and jquery.datetimepicker into my project. Despite adding a locale file for language support, I ...

Issues with Firefox and FCKeditor displaying cftextarea on a single device

On a single computer in our network, the cftextarea is not rendering properly in Firefox 41.0.2. The Firebug console displays errors only on that specific computer; SyntaxError: missing } after function body fckeditorcode_gecko.js:108:329 ReferenceError: ...

Utilizing Conditional Statements in the @artsy/fresnel Framework

I recently started working on a responsive React application using the @artsy/fresnel npm package. Below is a snippet of the code I have implemented: <Media greaterThanOrEqual='computer'> <div style={{ padding: '20px 50px' ...

Divide a string into separate array items where a specific character is found

Within my sentence are several characters (~). I want to split the text before each ~ into an array item, and then add a <br /> tag at the end of each item. I attempted using the replace method but it only worked for the first ~ and disregarded the ...

React component that renders conditionally based on the response of an API request

I am working on a status icon that changes based on the number of errors in an object. What is the most effective method for passing data from ComponentDidMount to the function where I want to analyze it? I am trying to aggregate the status in an object, ...

Replacing the $http.get function in AngularJS

Here is the code snippet I am currently working with: $http.get(url).success(function(response,status,header,config) { $scope.mymodel = response; } I need to verify the http status and trigger a function accordingly. Modifying all 100 instances of ht ...

Creating a dynamic menu layout using CSS

I've experimented with various methods to create a fluid menu, but none have been successful. Currently, I have an interactive menu that sometimes displays 6 items and other times 7 items. When I have 7 items, the menu aligns perfectly across the wid ...

The ReactJS template with Typescript is throwing an error stating that the property useContext does not exist on type

After creating a react-app using yarn create react-app app-name --template typescript, I have the following code snippets to share: AuthProvider.tsx import { createContext, useState } from "react"; const AuthContext = createContext({ }); ex ...

Include an HTML attribute within a given string

Using jQuery, I am adding HTML content to a div. The variables rowString and inputString have been defined beforehand: $("#filterContainer").append( rowString + `<label class='filterLabel' for=${filter}>${filter}< ...

How to form an array using rxjs before the adding sequence is completed

I am currently exploring a way to utilize rxjs to achieve the following scenario: You have two observables, onAddObs and onRemoveObs. Assume that onAddObs.next() is triggered multiple times, adding "A", "B", "C". I aim to then extract ["A", "B", "C"]. .t ...

Is there a way to export a variable that has been declared within a function component in React Js?

I am currently developing a React app and I need to export the RoomPricelist1 & FacilityPricelist1 variables. I have assigned values to these variables within a function component but when I try to import them into another function component, they are sh ...

changing the state of a bootstrap button once a task is completed

I've designed a Bootstrap 5 button to control the motor: <button id=button_90 onclick="return motor_turn(512)" class="btn btn-primary" type="button">90</button> Clicking the button highlights it in blue, and ...

Tips on aligning a span element at the center of an image without losing its mouseover

<div class="pic"> <img src="image.jpg" height="250"/> <span class="text" style="display:none">text here</span> </div> <scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </scrip ...

What is the best way to extract HTML using selenium.webdriver in Python?

Appreciate your attention, and please excuse any errors in my English. I am currently attempting to retrieve HTML from . The process involves entering some text into an input box and clicking a button, which triggers the following actions: Load the Yaho ...

Emphasize the present selection along with all prior items in a menu

Attached is my menubar for a unique web design concept I am working on. My webpage is designed as a fully scrollbar page shift type, meaning it is a single page containing six sections that are scrollable by selecting menu items. Currently, when I click ...

What is the best way to display cards next to each other on desktop and mobile devices while maximizing available space?

In the world of React components, there exists a card representation within a grid view that adapts based on available screen space; function EngineerCard(engineer: EngineerDetail) { return ( <div className='engineerCard'> <d ...