TinyMCE 4 Problems – Missing classes and how to render HTML

  • I’m working on converting my plugin, Better Font Awesome, 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:
    https://ps.w.org/better-font-awesome/assets/screenshot-2.png?rev=887838

    But now the <i> elements seem to be getting rendered as plain text, not actual HTML:
    https://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

    (@mcguive7)

    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 ??

    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.