Can you list out the various settings attributes that can be used in the addButton() function of TinyMCE?

The guide is lacking clarity on this topic.

name - String - The name of the button to be added.

settings - Object - Object containing settings such as title, cmd, and more.

What exactly does "etc" refer to? Is there a comprehensive list of all available attributes?

Answer №1

  • autofocus: Indicates whether the control should be focused when displayed
  • border: Example of border box values: 1 1 1 1
  • classes: List of classes separated by spaces to add
  • disabled: Determines if the control is disabled by default
  • hidden: Indicates if the control is hidden by default
  • icon: Icon that will be used for the button
  • image: Image to use as an icon
  • margin: Example of margin box values: 1 1 1 1
  • minHeight: Minimum height required for the control
  • minWidth: Minimum width required for the control
  • name: Name assigned to the control instance
  • padding: Example of padding box values: 1 1 1 1
  • role: WAI-ARIA role used for the control
  • size: Size options for the button - small, medium, or large
  • style: Additional CSS properties to be applied
  • text: Content to be shown inside the widget
  • tooltip: Text that appears as a tooltip when hovering over the control

To access a comprehensive list of settings and methods, please refer to the TinyMCE documentation page

Answer №2

Are you wondering about the possible settings that can be included in the settings object for TinyMCE 3? Here is a list to guide you:

title       --> title
label       --> label
scope       --> scope
onclick     --> function to trigger on click
menu_button --> flag indicating if button is part of a menu
cmd         --> TinyMCE command to execute onClick
ui          --> parameter for the cmd Tinymce command
value       --> value for the cmd TinyMCE command

These settings are set within the createButton function of the ControlManager class.

Answer №3

Struggling to locate the documentation for the addButton in V4, I stumbled upon the link that may be helpful for anyone searching for it.

tinymce.ui.Button

Hopefully, this information proves beneficial to someone in need!

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

Struggling to retrieve information upon form initialization using JavaScript in Yii2

When the salary form loads, I need to retrieve data from the ratechart model and populate certain text fields. In the Ratechart Controller, I have included: public $rateid = '1'; public function actionGetForRatechart($rateid) { $ra ...

Exploring promises with loops and patience?

I created a function that accesses an API and retrieves an array containing 100 objects at once. The getPageData() function works as expected when passing an integer without the loop. However, when attempting to iterate through it, I am not getting any res ...

Updating the load context variable in Django template after making changes via an AJAX call: a step-by-step guide

Here is the code snippet for displaying table items in my customer_items.html page: <table id="tblData" style="width: 100% !important;" class="display table table-bordered table-striped table-condensed"> <thead> <tr> ...

Pause the event listener temporarily and reattach it after specific actions have been completed

I am currently working on a React app that includes a scrollable div. Here is an example: <main id="main" onScroll={this.handleScroll}> My question is, how can I temporarily remove the onScroll event listener from the main element and then reattach ...

In React, the functionality of rendering components conditionally is not functioning properly

I am looking to conditionally display either the Login component or Menubar component based on the value of the isLogin state. If the isLogin state is false, I want to render the login page. If it is true, I want to render the Menubar page. To achieve thi ...

Having trouble accessing the property 'TUT' because it is undefined?

After loading a JSON file using jQuery, I attempted to access specific properties but encountered an undefined error. Despite being able to clearly see the object within the JSON when printed, the issue persists. { "Calculus 1": { "LEC": { "sec ...

Having trouble with the nav-item dropdown functionality on Laravel Vue?

Currently utilizing Laravel and Vue.js along with AdminLTE. Initially it was functioning properly, but now... head <!-- Font Awesome Icons --> <link rel="stylesheet" href="plugins/fontawesome-free/css/all.min.css"> <!-- Theme style --> ...

Mastering the ins and outs of ngStorage in AngularJS

Imagine a web page featuring a form that allows users to input multiple entries before submitting. As each entry is added, a summary of the data entered is displayed in a table at the top. Once all entries are completed, the user can then proceed to submit ...

Guide to displaying a table enclosed in a div based on a selected value in a select dropdown?

I am attempting to retrieve the table options using the select question-picker: Here is what I have tried: $(document).ready(function() { var question_container = $('.question-picker option[value="1"]').parent(); console.log(question_cont ...

Increase the space below the footer on the Facebook page to allow for an

I recently created a webpage at and noticed that it is adding extra height below the footer on my Facebook page: "" I am seeking assistance on how to remove this additional 21px height below all content in the footer. I have tried various templates but n ...

How do you go about installing the most recent version of a module through Private NPM?

When using a private npm registry, I have noticed that some common commands do not seem to be functioning properly: npm install without specifying a specific @version :: issue npm outdated :: issue npm update :: issue npm view <private-packag ...

Navigating the file paths for Vue.js assets while utilizing the v-for directive

Recently, I started working with Vue.js and found it simple enough to access the assets folder for static images like my logo: <img src="../assets/logo.png"> However, when using v-for to populate a list with sample data, the image paths se ...

Prevent certain images from loading by blocking them

I am trying to create an extension that blocks two specific images from loading. Initially, I attempted to achieve this by using the following code in the content.js file: $("#rated-image").remove(); //id of one image $(".blur-mask").remove(); //class of ...

Is it necessary for me to use bindActionCreators?

While going through a post, I couldn't help but notice that the bindActionCreators method from redux wasn't being utilized. Is there a specific reason for this? Could it be that the method is not necessary in this context? The post in question ...

Executing events in a loop with Node.js

Hi there! I'm currently facing an issue with my setInterval function as it seems to execute only once. Below is the function along with its if else checks: const redis = require('redis'); const cache = redis.createClient(); require(&apos ...

How can I exclude a specific JavaScript asset file in Symfony2?

My default setup includes loading all scripts into the head section from the js/ folder. However, I need to exclude one specific script file from being loaded with the others. How can I achieve this? Code base.html.twig .... {% block javascripts %} { ...

The header row in HTML tables sometimes vanishes unexpectedly after sorting the table

Upon filtering the table, I noticed that the header disappears sporadically. The issue is that the table header row should remain in place regardless of whether or not the characters used for filtering are present in the table rows. In Example 1: When fil ...

Modify the indicator color of the tabs in Material UI v5

https://i.sstatic.net/nhXHL.png I have implemented tabs in my project, but I am unable to change the background indicator: const theme = createTheme({ MuiTabs: { root: { styleOverrides: { indicator: {backgroundColor: "red !i ...

Navigate to a different page in Vue3 after completing the file download process

After receiving a link from the server to download the file, the user initiates the function to begin downloading. Once the file has finished downloading, the user will be redirected to the main page. <script setup lang="ts"> const goToMai ...

Utilizing Server-Sent Events to display a interactive navigation button

Currently, I am managing a web-based point of sale system where some buttons are hidden for specific functions. To streamline the process, I would like to allow managers to simply click on an "Enable" button in the admin panel and have it immediately refle ...