Title: TinyMCE 4 Problems – Missing classes and how to render HTML
Last modified: August 21, 2016

---

# TinyMCE 4 Problems – Missing classes and how to render HTML

 *  [Mickey Kay](https://wordpress.org/support/users/mcguive7/)
 * (@mcguive7)
 * [12 years, 1 month ago](https://wordpress.org/support/topic/tinymce-4-problems-missing-classes-and-how-to-render-html/)
 * I’m working on converting my plugin, [Better Font Awesome](https://wordpress.org/support/topic/tinymce-4-problems-missing-classes-and-how-to-render-html/wordpress.org/support/plugin/better-font-awesome?output_format=md),
   to work with WP 3.9 and TinyMCE 4. I’m almost done converting my custom TinyMCE
   plugin for use with version 4 (it worked fine with v3*), however there are a 
   few questions I have:
 * 1. Previously, I was able to render HTML inside of the list box component I was
   rendering, which is important because I’m generating a drop down (list box) with
   a bunch of Font Awesome icons, and I need to be able to actually render the `
   <i class="fa fa-flag"></i>` bit. This was working before:
    [http://ps.w.org/better-font-awesome/assets/screenshot-2.png?rev=887838](http://imgur.com/ax3ELhr)
 * But now the `<i>` elements seem to be getting rendered as plain text, not actual
   HTML:
    [http://imgur.com/ax3ELhr](http://imgur.com/ax3ELhr)
 * 2. The second issue is that the unique ID/classes that were attached to my TinyMCE
   drop-down previously, are now totally gone. The generic TinyMCE classes (e.g.`
   mce-widget mce-btn mce-menubtn mce-fixed-width mce-listbox mce-last`), and even
   an ID (`mce_16`) are applied to my dropdown, however none of these can be relied
   on for consistent styling on different WP installs (other users might have more
   TinyMCE plugins installed that would change the ID count and/or `mce-last` class).
   So I’m trying to figure out if there is any way to add a unique and consistent
   class to the TinyMCE drop-downI’m creating.
 * Any help would be much appreciate! here’s the code I’m using in my TinyMCE plugin:
 *     ```
       ( function() {
           "use strict";
   
           var icons = bfa_vars.fa_icons.split(',');
           var prefix = bfa_vars.fa_prefix;
   
           var icon_i = function(id) {
               return '<i class="fa ' + prefix + 'fw ' + prefix + id + '"></i>';
           }
   
           var icon_shortcode = function(id) {
               return '[icon name="' + id + '" class=""]';
           }
   
           var bfaSelect = function( editor, url ) {
               editor.addButton('bfaSelect', function() {
                   var values = [];
   
                   for (var i = 0; i < icons.length; i++) {
                       var _id = icons[i];
                       values.push({text: icon_i(_id) + ' ' + _id, value: _id});
                   }
   
                   return {
                       type: 'listbox',
                       name: 'bfaSelect',
                       tooltip: 'Better Font Awesome Icons',
                       role: 'bfaSelect',
                       text: 'Icons',
                       label: 'Select :',
                       fixedWidth: true,
                       onselect: function(e) {
                           if (e) {
                               editor.insertContent(icon_shortcode(e.control.settings.value));
                           }
                           return false;
                       },
                       values: values,
                   };
               });
   
           console.log(editor);
           };
           tinymce.PluginManager.add( 'bfa_plugin', bfaSelect );
   
       } )();
       ```
   

Viewing 2 replies - 1 through 2 (of 2 total)

 *  Thread Starter [Mickey Kay](https://wordpress.org/support/users/mcguive7/)
 * (@mcguive7)
 * [12 years, 1 month ago](https://wordpress.org/support/topic/tinymce-4-problems-missing-classes-and-how-to-render-html/#post-4829463)
 * **Update**
 * I was able to add a class to the main drop-down button (“Icons”) by adding the
   following code:
 *     ```
       onPostRender: function() {
           this.addClass('bfaSelect');
       }
       ```
   
 * However this applies a class ONLY to the “Icons” button, which is an entirely
   separate element from the actual drop-down element itself. No idea why the drop-
   down isn’t nested inside the top level button/link, like a normal `<ul>`, but
   that’s the way it is. So I still need to be able to apply links to the drop-down
   itself, not just the initially visible “Icons” link. Just to be clear. . .
 * **Here’s the HTML that’s generated for the initially visible link:**
 *     ```
       <div id="mce_16" class="mce-widget mce-btn mce-menubtn mce-fixed-width mce-listbox mce-last mce-bfaSelect" tabindex="-1" aria-labelledby="mce_16" role="button" aria-label="Better Font Awesome Icons" aria-haspopup="true" aria-expanded="false">
       	<button id="mce_16-open" role="presentation" type="button" tabindex="-1">
       		<span>Icons</span>
       		<i class="mce-caret"></i>
       	</button>
       </div>
       ```
   
 * **Here’s the HTML that gets generated for the drop-down menu:**
 *     ```
       <div id="mce_39" class="mce-container mce-panel mce-floatpanel mce-menu mce-menu-align" hidefocus="1" tabindex="-1" role="application" style="border-width: 1px; z-index: 100100; left: 636px; top: 140px; width: 172px; display: none;">
       	<div id="mce_39-body" class="mce-container-body mce-stack-layout" role="menu" style="width: 172px;">
       		<div id="mce_40" class="mce-menu-item mce-menu-item-normal mce-first mce-stack-layout-item" tabindex="-1" role="menuitem">
       			<i class="mce-ico mce-i-none"></i>%nbsp;
       			<span id="mce_40-text" class="mce-text">adjust</span>
       		</div>
       		<div id="mce_41" class="mce-menu-item mce-menu-item-normal mce-stack-layout-item" tabindex="-1" role="menuitem">
       			<i class="mce-ico mce-i-none"></i> 
       			<span id="mce_41-text" class="mce-text">adn</span>
       		</div>
       		<div id="mce_42" class="mce-menu-item mce-menu-item-normal mce-stack-layout-item" tabindex="-1" role="menuitem">
       			<i class="mce-ico mce-i-none"></i> 
       			<span id="mce_42-text" class="mce-text">align-center</span>
       		</div>
       		.
       		.
       		.
       	</div>
       </div>
       ```
   
 * **And here’s my TinyMCE plugin JS:**
 *     ```
       ( function() {
           "use strict";
   
           var icons = bfa_vars.fa_icons.split(',');
           var prefix = bfa_vars.fa_prefix;
   
           var icon_i = function(id) {
               return '<i class="fa ' + prefix + 'fw ' + prefix + id + '"></i>';
           }
   
           var icon_shortcode = function(id) {
               return '[icon name="' + id + '" class=""]';
           }
   
           var bfaSelect = function( editor, url ) {
               editor.addButton('bfaSelect', function() {
                   var values = [];
   
                   for (var i = 0; i < icons.length; i++) {
                       var _id = icons[i];
                       values.push({text: _id, value: _id});
                   }
   
                   return {
                       type: 'listbox',
                       name: 'bfaSelect',
                       tooltip: 'Better Font Awesome Icons',
                       role: 'bfaSelect',
                       text: 'Icons',
                       label: 'Select :',
                       fixedWidth: true,
                       values: values,
                       onselect: function(e) {
                           if (e) {
                               editor.insertContent(icon_shortcode(e.control.settings.value));
                           }
                           return false;
                       },
                       onPostRender: function() {
       	                this.addClass('bfaSelect');
       	            }
   
                   };
               });
   
           };
           tinymce.PluginManager.add( 'bfa_plugin', bfaSelect );
   
       } )();
       ```
   
 * I’ll buy a coffee for anyone who can solve this one 🙂
 *  [uggway](https://wordpress.org/support/users/uggway/)
 * (@uggway)
 * [11 years, 1 month ago](https://wordpress.org/support/topic/tinymce-4-problems-missing-classes-and-how-to-render-html/#post-4829806)
 *     ```
       var ICONS;
   
       	var setIconShortcode = function(id) {
       		return '[wc_fa icon="' + id + '" margin_left="" margin_right=""][/wc_fa]';
       	}
   
       	var icon = function(id) {
       		return '<i class="fa fa-' + id + '"></i>';
       	}
   
       	function getHtml() {
       		var Html;
   
       		Html = '<div style="overflow-y: scroll;height:500px;width:200px"><table role="list" class="mce-grid">';
   
       		tinymce.each(ICONS, function( name ) {
       			Html += '<tr>';
   
       				Html += '<td style="width: 200px; height: 25px; padding: 3px;"><a href="#" data-mce-alt="' + name + '" tabindex="-1" ' +
       					'role="option" aria-label="' + name + '">' + icon(name) + " " + name +'</a></td>';
       			Html += '</tr>';
       		});
   
       		Html += '</table></div>';
   
       		return Html;
       	}
   
       	var wcShortcodeFA = function( editor, url ) {
   
       		editor.addButton('wpcfontAwesomeGlyphSelect', function() {
   
       			return {
       			type: 'panelbutton',
       			text: 'Icons',
       			icon: 'fa-puzzle-piece',
       			panel: {
       			role: 'application',
       			autohide: true,
       			html: getHtml,
       			onclick: function(e) {
       				var linkElm = editor.dom.getParent( e.target, 'a' );
   
       				if ( linkElm ) {
       					editor.insertContent(
       						' ' + setIconShortcode(linkElm.getAttribute('data-mce-alt')) + ' '
       					);
   
       					this.hide();
       				}
       			}
       		},
       			};
       		});
       	};
       	tinymce.PluginManager.add( 'wpc_font_awesome', wcShortcodeFA );
       ```
   

Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘TinyMCE 4 Problems – Missing classes and how to render HTML’ is closed
to new replies.

## Tags

 * [class](https://wordpress.org/support/topic-tag/class/)
 * [html](https://wordpress.org/support/topic-tag/html/)
 * [id](https://wordpress.org/support/topic-tag/id/)
 * [mce](https://wordpress.org/support/topic-tag/mce/)
 * [render](https://wordpress.org/support/topic-tag/render/)
 * [tinymce](https://wordpress.org/support/topic-tag/tinymce/)

 * In: [Fixing WordPress](https://wordpress.org/support/forum/how-to-and-troubleshooting/)
 * 2 replies
 * 2 participants
 * Last reply from: [uggway](https://wordpress.org/support/users/uggway/)
 * Last activity: [11 years, 1 month ago](https://wordpress.org/support/topic/tinymce-4-problems-missing-classes-and-how-to-render-html/#post-4829806)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics