TinyMCE4 and custom styles

  • Resolved cruxwireweb

    (@cruxwireweb)


    10 years, 6 months ago

    In the past, I used a line like this in my functions.php to allow clients to add custom styles to selected text:

    $init['theme_advanced_styles'] = 'More Link=readmore,Featured Text=featuredtext,Call to Action=cta';

    I am trying to update this so it works with TinyMCE4. The only instructions I have found are how to add custom styles to the styles_format menu, such as described here.

    However, I don’t want the custom styles here. All the other items in this menu are repetitive; there are other places on the toolbars to achieve those effects. This will confuse my clients, as will the terms “block” and “inline”.

    Also, in the article I linked to above, the author suggested not disabling the native functions of the styles_format menu, because plug-ins may want to use them. I think that’s wise advice.

    So, I want to put my custom styles in a listbox of their own. However, I can’t find any examples of this anywhere. There are lots of instructions for shortcodes, but nothing for custom classes.

    I find TinyMCE 4’s documentation hard to use and confusing, and it doesn’t explain the WordPress end of things, but I’ll take any clues I can get.

    Thanks.

Viewing 5 replies - 1 through 5 (of 5 total)
  • Thread Starter cruxwireweb

    (@cruxwireweb)

    I figured this out, but don’t have time to post the solution – gotta run. I will post the solution tonight or tomorrow though.

    Worst. Post. Ever.

    For anyone else suffering this issue and who stumbled across this post (as it appears top in some searches), you can find a solution posted by the awesome Kathy of KathyIsAwesome here:

    https://www.kathyisawesome.com/506/custom-styles-for-wordpress-3-9/

    Thread Starter cruxwireweb

    (@cruxwireweb)

    You are right – I totally suck for that. I’m sorry. Here’s what I figured out.

    I created a plug-in. The plug-in contains one PHP file and one js file in a folder titled js.

    PHP File

    This is the relevant code. The file contains some other code as well, such as defining custom colors. (More info here.)

    /*
Plugin Name: CW Custom TinyMCE
Description: Customizations for TinyMCE 4
*/

// --- CUSTOM TINY MCE BUTTON ----------------------------
// Use the PHP below in functions.php and also add the javascript in a seperate file in the theme's js folder.

// Hooks your functions into the correct filters
	function my_add_mce_button() {
		// check user permissions
		if ( !current_user_can( 'edit_posts' ) && !current_user_can( 'edit_pages' ) ) {
			return;
		}
		// check if WYSIWYG is enabled
		if ( 'true' == get_user_option( 'rich_editing' ) ) {
			add_filter( 'mce_external_plugins', 'my_add_tinymce_plugin' );
		}
	}
	add_action('admin_head', 'my_add_mce_button');

	// Declare script for new button
	function my_add_tinymce_plugin( $plugin_array ) {
		// customize for each button
		$plugin_array['cw_font_size_btn'] = plugins_url( 'js/tinymce-custom.js', __FILE__ );
		return $plugin_array;
	}

    JS File

    My javascript is definitely amateur, but this works for me.

    (function() {
	tinymce.PluginManager.add('cw_font_size_btn', function( editor, url ) {
		editor.addButton( 'cw_font_size_btn', {
			type: 'listbox',
			text: 'Font Size',// name on the listbox in the ui
			icon: false,
			classes: 'fixed-width widget btn',// adds classes to the div surrounding the <button>.  don't need the 'mce-' prefix
			onselect: function(e) {
			},
			values: [
				{text: 'Bigger', onclick : function() {
					var selected2 = tinyMCE.activeEditor.selection.getContent();
					var content2 = '';
					var spantitleclass = ' class="bigger"';
					if (selected2 !== '') {
						content2 = '<span'+spantitleclass+'>' + selected2 + '</span>';
					} else {
						content2 = '<span'+spantitleclass+'></span>';
					}
					tinymce.execCommand('mceInsertContent', false, content2);
				}},

				{text: 'Big', onclick : function() {
					var selected2 = tinyMCE.activeEditor.selection.getContent();
					var content2 = '';
					var spantitleclass = ' class= "big"';
					if (selected2 !== '') {
						content2 = '<span'+spantitleclass+'>' + selected2 + '</span>';
					} else {
						content2 = '<span'+spantitleclass+'></span>';
					}
					tinymce.execCommand('mceInsertContent', false, content2);
				}},

				{text: 'Small', onclick : function() {
					var selected2 = tinyMCE.activeEditor.selection.getContent();
					var content2 = '';
					var spantitleclass = ' class= "small"';
					if (selected2 !== '') {
						content2 = '<span'+spantitleclass+'>' + selected2 + '</span>';
					} else {
						content2 = '<span'+spantitleclass+'></span>';
					}
					tinymce.execCommand('mceInsertContent', false, content2);
				}},	

				{text: 'Smaller', onclick : function() {
					var selected2 = tinyMCE.activeEditor.selection.getContent();
					var content2 = '';
					var spantitleclass = ' class= "smaller"';
					if (selected2 !== '') {
						content2 = '<span'+spantitleclass+'>' + selected2 + '</span>';
					} else {
						content2 = '<span'+spantitleclass+'></span>';
					}
					tinymce.execCommand('mceInsertContent', false, content2);
				}},
			]
		});
	});
})();

    Upload and activate the plug-in.

    Thread Starter cruxwireweb

    (@cruxwireweb)

    Unfortunately, I was not able to figure out how to add a class to the selected element (instead of adding it to a surrounding span.) Nor was I able to figure out how to change the label of the button to anything other than “Formats.”

    Thread Starter cruxwireweb

    (@cruxwireweb)

    In my first post, I linked to an article but the link doesn’t work. The correct URL is https://www.wpexplorer.com/wordpress-tinymce-tweaks/.

    It’ a great article with other helpful tweaks.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘TinyMCE4 and custom styles’ is closed to new replies.