Customizing a tinyMCE button with a unique icon

I'm attempting to insert a Font-Awsome icon into a button that I included in tinyMCE using the following code:

 ed.addButton('youtube', {
     title: 'Add Video' ,
     icon: 'icon-youtube',
     onclick: function () {
     //do stuff here...
 }

Despite following the documentation's advice to use an image, I have been unsuccessful in getting this to function properly. Does anyone have any suggestions for troubleshooting?

javascriptangularjspluginstinymce

Answer №1

Here is an effective solution using CSS:

.mce-i-[FONT-AWESOME-CLASSNAME]:before {   
    content: "[FONT-AWESOME-CONTENT]";       
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
    color: #000;
    font-size: 1.5em;
    padding-right: 0.5em;
    position: absolute;
    top: 15%;
    left: 0;
}

This approach was inspired by matt-royal's response in this specific WordPress forum thread.

Answer №2

Although this information may be dated, I wanted to share my solution for those who might find it useful. In my case, I am utilizing TinyMCE 4 and made the following CSS adjustment:

.mce-ico.mce-i-fa {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

When assigning icons to buttons, you can simply do the following:

editor.addButton('adjust', {
    tooltip: 'Adjust Layout',
    icon: 'fa fa-adjust',
    onclick: function () {
        dialogLayout(editor, url, settings);
    }
});

This approach allows for the easy incorporation of any Font Awesome icons without the need for distinct class layouts per icon.

I hope this proves helpful to someone in their development efforts.

Answer №3

It seems like you are looking to include a button with an image in the list of icons within tinyMCE.

 tinymce.PluginManager.add("video", function (editor) {   
    editor.addButton('video', {
        tooltip: 'Insert video',
        image: tinymce.baseURL + '/plugins/video/icons/video.gif',
        onclick: function() {

        }
    }); 
});

To achieve this, create a new folder (e.g., "video") and within it, create another folder named "icons" where you can store your image. Next, create a file called video.js under the video folder.

Answer №4

In the latest version of TinyMCE, known as TinyMCE v5, a new functionality called tinymce.editor.ui.Registry has been introduced. This method, named addIcon, allows users to register a new SVG icon with the editor instance it was configured for. The purpose is to provide customizable icons for various Ui components.

The registered SVG icon can be referenced by name and utilized by different TinyMCE 5 Ui elements that support icon display. It remains exclusive to the specific editor instance it was assigned to.

Parameters of the Method:

addIcon(name: String, svgData: String)
  • name (String) - A unique identifier for the newly added icon.
  • svgData (String) - The SVG data string used by the browser to render the SVG icon.

Implementation of the Method:

// Example code to add a basic triangle icon:
editor.ui.registry.addIcon('triangleUp', '<svg height="24" width="24"><path d="M12 0 L24 24 L0 24 Z" /></svg>');

Subsequently, you can reference this unique identifier in creating custom buttons like so:

editor.ui.registry.addButton('youtube', {
  text: 'Add Video' ,
  icon: 'triangleUp',
  onAction: () => {
    // Perform desired actions here...
  }
});

Result:

https://i.sstatic.net/9bfV7.png

Answer №5

In the case of tinymce 5, an example code snippet that can be utilized is as follows:

editor.ui.registry.addButton('customButton1', {
    text: '<span class="fa fa-youtube"></span>',
    //icon: '<span class="icon-youtube"></span>',
    onAction: () => alert('Button clicked!')
});

Answer №6

This easy-to-use stylesheet was successful for me:

i.mce-i-[FONT-AWESOME-CLASSNAME]:before {   // Customize FONT-AWESOME-CLASSNAME like "icon-youtube"
    content: [FONT-AWESOME-CONTENT];         // Update FONT-AWESOME-CONTENT such as "\f166"
    font-family: FontAwesome;
}

It's suitable for both toolbar buttons and menu items.

ed.addButton('youtube', {
     title: 'Insert Video' ,
     icon: '[FONT-AWESOME-CLASSNAME]',
     onclick: function () { /* perform magic here */ }
}

ed.addMenuItem('youtube', {
     text: 'Insert Video' ,
     icon: '[FONT-AWESOME-CLASSNAME]',
     onclick: function () { /* perform magic here */ },
     context: 'view'
}

Avoid using position: absolute to prevent disrupting the layout in the menu.

Answer №7

If you are using TinyMCE 4 and FontAwesome 5, the CSS code below will help you achieve your desired results:

.mce-ico.mce-i-fas {
    display: inline-block;
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale; }

Answer №8

I've built upon Ricardo's response and devised a method to incorporate font awesome icons into your project. Follow these steps:

1. Visit the font awesome website and locate the SVG of the desired icon:

https://fontawesome.com/icons/sitemap?f=classic&s=solid

https://i.sstatic.net/29Cho.png

2. Embed the SVG icon into tinyMCE:

editor.ui.registry.addIcon('iconName', '<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M208 80c0-26.5 21.5-48 48-48h64c26.5 0 48 21.5 48 48v64c0 26.5-21.5 48-48 48h-8v40H464c30.9 0 56 25.1 56 56v32h8c26.5 0 48 21.5 48 48v64c0 26.5-21.5 48-48 48H464c-26.5 0-48-21.5-48-48V368c0-26.5 21.5-48 48-48h8V288c0-4.4-3.6-8-8-8H312v40h8c26.5 0 48 21.5 48 48v64c0 26.5-21.5 48-48 48H256c-26.5 0-48-21.5-48-48V368c0-26.5 21.5-48 48-48h8V280H112c-4.4 0-8 3.6-8 8v32h8c26.5 0 48 21.5 48 48v64c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V368c0-26.5 21.5-48 48-48h8V288c0-30.9 25.1-56 56-56H264V192h-8c-26.5 0-48-21.5-48-48V80z</path></svg>');

3. Associate the icon with the button:

                    editor.ui.registry.addButton('btn', {
                        text: 'Workflow Field',
                        icon: "iconName"
                    });

Result:

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

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 there a way to dynamically include a peer dependency in a file that is bundled using webpack?

I am currently developing a plugin that relies on jQuery as a peer dependency. However, when I attempt to import this plugin into my primary project (which already has jQuery installed), I encounter the following error: Module not found: Error: Can't ...

javascriptnpmwebpack

Store the value returned from either the URI or the response in the test context using Cypress IO

I am struggling to figure out how to extract a specific portion of a key from both the URL and the xhr response. I initially attempted using the URI method but couldn't specify to save only part of the value. .url().then(($url) => { co ...

javascriptnpmcypress

Title of the most recently created file on GitHub

Being new to web designing and javascript, I am seeking help in understanding how to display the latest PDF file in my small website hosted on GitHub. Despite successfully displaying a PDF file, I encountered difficulties when attempting to showcase the mo ...

javascripthtmlgithubgithub-api

Is there a way to transfer the value from one directive to another directive template and access it in a different directive's scope?

I attempted to pass the directive attribute value to a template ID, which can then be used in another directive. Below is my index.html code: <my-value name="jhon"></my-value> Here is the JavaScript code: .directive('myValue',func ...

javascriptangularjs

Tips on how to connect the scope from a controller to a custom directive in Angular

Currently, I am delving into the world of Angular and finding myself immersed in directive lessons. However, as I engage in some practice exercises, I have encountered a stumbling block. Specifically, I have developed a custom directive with the intention ...

javascriptangularjs

What is the solution to having a div move along with window resizing without displacing adjacent divs?

After much effort, I still can't seem to get this working correctly. I've been playing around with a section named "RightExtra" and a div inside it called "RightExtraContent". My goal is to allow these two divs to move freely when the window is ...

javascriptjqueryhtmlcss

Bootstrap form validation issues

Currently, I am utilizing Vue.js along with Bootstrap for the creation of a website. In this process, I have set up a form on which I am implementing my custom validation logic. Everything seems to be functioning correctly until the moment when the user hi ...

javascripttwitter-bootstrapvue.jsbootstrap-4vue-cli

Issue with UseState causing a re-render not to be triggered

My orders list state works perfectly on the initial update. However, when an order in the database gets updated, the order list is updated but fails to trigger a re-render even with <...> const [orders, setOrders] = useState([]); useEffect(( ...

javascriptreactjsreact-hooksstate

Employing promises for retrieving ajax data

I've been struggling to make sure my code waits for an ajax call to finish before proceeding, as I need data in an array first. No matter what I try, it seems like promises might be the best solution in this scenario. Currently, the ajax call still oc ...

javascriptjqueryajax

Dynamic Vue2 input field names

With Vue2, I am attempting to create input tags with dynamic content. My attempts at binding it to a function using :name="someFunction" have been unsuccessful in this case. The name attribute needs to be in the format people[0]['name'] people ...

javascriptdynamicvue.jsvuejs2

Unlocking the secrets of obtaining post values using Body-parser in your Express Node.js application

Currently, I am utilizing Express version 4.11.1 and Body-parser version 1.11.0 in my project. However, upon running the code snippet below, I encountered the following output: I am seeking suggestions on how to retrieve the form value. Output {} serve ...

javascriptnode.jsexpressbody-parser

Setting a value to an anchor tag in AngularJS

A user is presented with a list of options (e.g. 1. Apple; 2. Banana; 3. Mango). They are provided with a textbox where they can input their desired option and then click "send" to proceed. Current Setup: HTML: <p ng-repeat="opt in objHistory.OptionI ...

angularjs

Retrieve the data stored in an array of objects

code props.thumbnails.forEach(value=>{ console.log(value.photo.thumbnail_url); }) error TypeError: Cannot read property 'thumbnail_url' of undefined Trying to loop through props.thumbnails array and access the thumbnail_url pro ...

javascriptreactjsforeachjsx

How to showcase a list from intricate JSON data using Angular

I recently came across this pre-existing JSON data that I am unable to change: {"tags": [ { "title": "news", "options": [ { "title": "important", }, { "title": "less important", ...

javascriptangularjsjsonhtml-listsangularjs-ng-repeat

Unveil the modules of a Node.js NPM application

I have a Node application that is used as an npm module and serves as a dependency in the package.json file of another Node application. This application needs to grant access to internal modules to the app utilizing my package as a dependency. All these m ...

javascriptnode.jsmodulenpm

Using the conditional rendering technique in a mapped function within a React table cell

I have an array that is being displayed inside a Table, and I need to compare each object's "userName" property with the header in order to determine where to place the value. If there is no match, it should display a "0". Here is a snippet of the ta ...

javascriptarraysreactjsmaterial-ui

Retrieve the value of a dynamically added or removed input field in JQuery using Javascript

Check out this informative article here I'm looking for a way to gather the values from all the text boxes and store them in an array within my JavaScript form. I attempted to enclose it in a form, but I'm struggling to retrieve the HTML ID beca ...

javascriptjqueryhtmlcssnode.js

What is the best way to optimize angular code for production environments?

My development project, utilizing Node and Angular, is ready to go into production. How can I minify the Angular code for production? I am looking to minify or uglify the following controller. Whenever I try to minify the code online, the application stop ...

angularjs

What is the best way to retrieve information from a JSON object?

Currently, I'm in the process of developing a Discord bot that will utilize commands from a JSON file. For example, if the command given is "abc", the program should search for "abc" in an array of commands and respond with the corresponding data. Bel ...

javascriptnode.jsjsontypeerror

Issue with rendering React Three JS in the browser

I recently attempted to follow a tutorial at https://www.youtube.com/watch?v=wRmeFtRkF-8 However, upon running my code, all I see is a blank canvas with a black background (as specified in the CSS). Interestingly, I can tell that the canvas is functional ...

javascriptreactjsthree.jsreact-three-fiber