Enhance the look of the Tinymce editor in Joomla with personalized formatting options

Is it possible to include a custom format for formatting lists in the TinyMCE editor? For instance, I would like to have the option for users to select text and apply my desired format. When selected, Tinymce will automatically insert <div class="custom"> before the selected area, and then add </div> after it.

Answer №1

Getting this to function smoothly may require more effort than anticipated. If you are interested in utilizing custom formats, it might be worthwhile to explore this illustration of custom formats: . Be sure to pay attention to the "view source" section for a comprehensive understanding of the settings, formats, and style formats.

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

Looking for a way to limit the number of characters allowed per line in a textarea using jQuery

I have the following HTML textarea: <textarea name="splitRepComments" cols="20" rows="3" ></textarea> I have implemented a maxlength restriction using jQuery with the following function: var max = 100; $('#splitRepComments').bind(" ...

Numerous XMLHttp requests causing JSON data to be overwritten

I am facing an issue where my JSON data is being overwritten by the result of the last XMLHttpRequest made for each country. Is there a way to prevent this from happening? Below is the code snippet in question: function getDataBetween() { for (var i = ...

Exploring the possibilities of developing WebComponents within Angular using TypeScript

My Angular application was originally created using the default method with ng new project-name". However, for performance reasons, I had to incorporate single standard WebComponents. The JavaScript code associated with these components is stored in a ...

An error occurred due to an unexpected identifier, '_classCallCheck', while the import call was expecting exactly one

Encountering an unexpected identifier '_classCallCheck'. Import call requires precisely one argument. Having trouble with React Native. I have attempted every solution found on the internet, but none proved successful. Is there any way to upgrade ...

Toggle the display of two div elements

I'm looking to easily switch visibility between two different divs on my webpage. The default display should be div id2, but when a user clicks a link, I want div id1 to replace it. I've tried various methods and even tinkered with it on jsfiddle ...

Encountering a POST 405 error message stating "Method not allowed" while attempting to send an AJAX request in Laravel

I've been attempting to create a simple AJAX request to populate a menu in Laravel, but I've been running into some difficulties getting it to function correctly. Despite spending several hours searching for a solution, I'm still unsure of ...

Revise the reply within ExpressJS

I need help with editing the response to a request in Express. When the request is made via XHR, I want to encapsulate the body inside a JavaScript object. This way, different parts of the page can be accessed individually within the JavaScript object, suc ...

Scheduled tasks arranged by the user

My goal is to empower my users to schedule specific actions at their preferred times. With a node server hosted on Azure, I am exploring the potential of using node-schedule for this functionality. One idea I'm considering is running a master schedule ...

Pagination in DynamoDB: Moving forward and backward through your data

Currently, I am utilizing DynamoDB in combination with NodeJS to display a list of objects on the user interface. Given that DynamoDB can only process 1MB of data at a time, I have opted to implement pagination. This allows users to navigate between pages ...

WebStorm: React and Bootstrap autocomplete feature fails to function

After installing React and Bootstrap in WebStorm, I encountered an issue where the Bootstrap code highlighting was not working. Despite JSX functioning correctly, the problem with Bootstrap remains unresolved. Can anyone provide guidance on how to resolve ...

Utilizing JSDoc's "includePattern" for various file formats

Recently, I delved into JSDocs and decided to implement it in my Vue.js project. However, since my project involves multiple file types like .js and .vue, I encountered a syntax error while trying to add them to the "includePattern". Here's the snippe ...

Assign values from an array in jQuery to a <span> element

I am working with the following HTML code: <input type='radio' class='at-radio' name='re_widget[0][set_style_for_widget]' value='topbanner' /> <span class='at-radio-label'>topbanner</span> ...

Set the input's type attribute to 'checkbox' to address an issue with Internet Explorer

This issue is specific to Internet Explorer, as other browsers like Firefox, Chrome, Safari, and Opera are functioning correctly. Instead of displaying checkboxes, it shows a value box... Here is the code snippet: <html> <head> <title> ...

Bower Error: No tag found for ENORESTARGET

I'm encountering an issue with installing dependencies for bower bootstrap material design. I am facing a problem specifically with version 0.5.10, as it displays an error message ENORESTARGET No tag found that was able to satisfy ^0.5.10. When attemp ...

What is the method for setting the proxy URL in Webpack.config.js following the deployment of the application?

When running on my local machine, the React front-end is hosted on localhost:3000 while the Node/Express back-end is hosted on localhost:8080. Within the webpack.config.js file for the front-end, I utilize a proxy to enable the front-end to retrieve data ...

Use the json method and JavaScript to bind the data

I have been attempting to fetch data for a dropdownlist using JSON. While the program is functioning correctly, the dropdownlist is displaying a blank list. Upon inspection, I can see that the data is present but not being displayed. Controller: publi ...

Combining selected boxes through merging

Looking to create a simple webpage with the following requirements: There should be 10 rows and 3 boxes in each row. If I select 2 or more boxes or drag a box, they should merge together. For example, if my initial screen looks like this: and then I se ...

You cannot nest a map function within another map function in React

Having some trouble applying the map function in HTML using React. Below is the code snippet: response = [ data : { name: 'john', title: 'john doe', images: { slider: { desktop: 'link1', mo ...

Overlapping problem with setInterval

I am currently working on a project that requires the use of both setInterval and setTimeout. I am using setTimeout with dynamic delays passed to it. While elements are not timed out, I have implemented setInterval to print out numbers. Here is the code ...

JavaScript matching partial domains

let address = 'http://sub.domain2.net/contact/'; if (['https://sub.domain1.com/', 'http://sub.domain2.net/'].includes(address)) { console.log('match'); } else { console.log('no match'); } Here, it ...