Add a button to the MCE toolbar without replacing it (Plugins)

One challenge I encountered was integrating the textcolor plugin into tinyMCE. Although I managed to make it functional, I faced an issue with the toolbar configuration. I couldn't grasp how to include the plugin buttons without replacing the existing toolbar.

Initiation Code

//TinyMCE Test
tinymce.init({
    selector: '.editor',
    branding: false,
    height : "200",
    plugins: "textcolor",
    toolbar: "forecolor backcolor"
});

The culprit seems to be this line of code toolbar: "forecolor backcolor", but I'm unsure how to append instead of replace. I explored the documentation without success.

Before Adding Plugin https://i.sstatic.net/FaTCh.png

After Adding Plugin https://i.sstatic.net/9XYoF.png

javascripttinymce

Answer №1

When working with TinyMCE, there is no direct way to add new features to the default toolbar. Once you customize the toolbar, you have to specify all the elements you want to include on it.

As of the latest TinyMCE version 4.7.13, the default toolbar consists of:

var defaultToolbar = 'undo redo | styleselect | bold italic |' + 
                     'alignleft aligncenter alignright alignjustify |' + 
                     'bullist numlist outdent indent | link image';

Important: This information can be found in the theme.js file.

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

Is it possible to iterate through an object with multiple parameters in Op.op sequelize?

Currently, I am in the process of setting up a search API that will be able to query for specific parameters such as id, type, originCity, destinationCity, departureDate, reason, accommodation, approvalStatus, and potentially more in the future. const opt ...

javascriptnode.jspostgresqlexpresssequelize.js

Manipulating HTTP responses and variables in Angular 6

I created a custom application using the MEAN stack that allows users to sign up and log in. To enhance security, I want users to reconfirm their identity by entering their password or a PIN if they return to the application after some time. To achieve th ...

javascriptangularsecurity

Is it possible to use async in the onChange handler of a React event?

Can async be used to pause execution until a function completes within an onChange event? Here is an example: const onChange = async (e) => { console.log(current[e.target.name]); await setCurrent({ ...current, [e.target.name]: e.targe ...

javascriptreactjs

Trouble with fetching data in Backbone

I'm facing an issue where the Backbone/Marionette Controller and Collection are not fetching properly. define(["jquery", "backbone","models/Poi"], function($, Backbone, Poi) { // Creating a new instance of Backbone Poi class object ...

javascriptjqueryajaxbackbone.jsmarionette

Using Javascript to conditionally hide a Vimeo iframe with an if-else statement

Hey amazing developers, I've been working on a cool thumbnail grid with an expanding view. Check out an example here. Within the expander, I added a video section that retrieves its video ID through an HTML5 data-attribute. Here's how it looks ...

javascriptvimeocustom-data-attribute

I'm having trouble getting the aggregation of a child collection to work properly in MongoDB when attempting to apply the $count

Could someone help me troubleshoot my aggregate query? I'm trying to sum the count values for each beacon, but it keeps returning 0. Please let me know if you spot any mistakes in the query. Sample Data [ { ...

javascriptnode.jsmongodbmongooseaggregate

Create a custom key in SJCL that has an expiration time set for automatic deletion

My current project involves encrypting and decrypting data on the client-side using the SJCL library. However, I have a specific requirement that the encryption key must expire after a certain scheduled time. So my question is this: Can a key with an e ...

javascriptencryptioncryptographyclient-sidesjcl

Even as I create fresh references, my JavaScript array object continues to overwrite previous objects

Coming from a background in c# and c++, I am facing some confusion with a particular situation. Within the scope of my function, I am creating a new object before pushing it into an 'array'. Strangely, when I create the new object, it appears to ...

javascriptangulartypescriptscope

Locate specific phrases within the text and conceal the corresponding lines

I have a JavaScript function that loops through each line. I want it to search for specific text on each line and hide the entire line if it contains that text. For example: <input id="search" type="button" value="Run" /> <textarea id ...

javascriptjquerycss

How to create a custom button or menu design with ExtJS

My objective is to customize the appearance of an ExtJS button along with its menu. I am facing difficulty in applying styling to a button even with a CSS class. I have attempted the following code: CSS: .customStyle { font-size: 20px !important; ...

javascriptjqueryhtmlextjsweb

Display a JSON encoded array using Jquery

Within an ajax call, I have a single json encoded array set: $var = json_encode($_SESSION['pictures']); The json encoded array is stored in a variable called "array" When I try to display the contents of "array" using alert, I get this respons ...

javascriptjqueryarraysjson

Preventing an iframe from reloading when transferring it to a new parent using appendChild

I'm looking to relocate an iframe to a different parent element while maintaining the iframe's current state (including scroll position and any entered form data). Unfortunately, when I use appendChild() to move the iframe, it reloads and resets ...

javascripthtmliframe

Contrasting the disparities between creating a new RegExp object using the RegExp constructor function and testing a regular

Trying to create a robust password rule for JavaScript using regex led to some unexpected results. Initially, the following approach worked well: const value = 'TTest90()'; const firstApproach = /^(?=(.*[a-z]){3,})(?=(.*[A-Z]){2,})(?=(.*[0-9]){2 ...

javascriptregex

Discovering the worth of an array property in JavaScript

I have a custom script that generates and outputs a JSON formatted object: function test() { autoscaling.describeAutoScalingGroups(params, function(err, data) { if (err) console.log(err, err.stack); // an error occurred else console.lo ...

javascriptarraysjson

JavaScript Function for Finding the Time Difference Between Two Dates (in Years, Days, Hours, or Less than One Hour)

I need to calculate the time difference between 2 dates and display it. If the difference is greater than a year, show the number of years only. If it's more than a day, show the number of days. If it's less than a day, show the number of hours. ...

javascriptdatetimetimemomentjs

Transforming jQuery object into HTML code

I need assistance with a JavaScript task where I am trying to parse and replace an item within an HTML string, but then struggling to convert it back to a string. Specifically, I am having difficulty turning the new jQuery object back to HTML. var compile ...

javascriptjqueryhtml

JavaScript - Unable to run 'getImageData' method on 'CanvasRenderingContext2D': Provided value is not a 'long' type

My setup involves a video element and a canvas element as seen below: <video id="video" width="640" height="480"></video> <canvas id="canvas" width="640" height="480"></canvas> The goal is to decode a PDF417 barcode from the webca ...

javascriptzxing

Obtain the YouTube video identifier from a YouTube embedded link

Is there a way to extract just the YouTube ID from a given URL? https://www.youtube.com/embed/cqyziA30whE?controls=1&showinfo=0&rel=0&autoplay=0&loop=0 $(".youtube").click(function () { console.log(this.href.replace(new RegExp("em ...

javascriptjqueryhtmlregex

Ways to obtain a list of properties for an object

I have a collection of items, each item containing various attributes including a list of related elements: { name : 'Club 01' , id : 1 , form : 45 , points : 0 , tactics : 'neutral' , played : ...

javascriptarraysloopsproperties

Is there a way for TypeScript to recognize that the potential data types in a union type align with the valid prototypes for a function? Any solutions available?

There seems to be an issue with this (playground link) code snippet: type ReplaceAll2ndArgType = string | ((substring: string, ...args: unknown[]) => string) export async function renderHTMLTemplate( args: Record<string, ReplaceAll2ndArgType> ...

javascripttypescripttypestype-inference