TinyMCE4 and custom styles

  • Resolved cruxwireweb

    (@cruxwireweb)


    12 years 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)

    12 years ago

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

    indextwo

    (@indextwo)

    12 years ago

    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:

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

    Thread Starter cruxwireweb

    (@cruxwireweb)

    12 years ago

    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)

    12 years ago

    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)

    12 years ago

    In my first post, I linked to an article but the link doesn’t work. The correct URL is http://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.