Ideas

Create easy API for adding simple html tag buttons to TinyMCE

12

  1. Jeremy Clarke
    Member

    12345

    Many people find that there are buttons they wish were in the visual editor but aren't there. Plugins like TinyMCE Advanced do a good job of expanding the default toolset, but don't offer easy ways to create custom buttons. Examples of custom buttons:

    * <p align="right"> (instead of using style=)
    * <p class="translation">
    * <li class="inventory_item">
    * <p class="note">

    etc. Obviously there is an infinite number of possibilities. Having buttons for these things would not only be more convenient than entering them manually it would also allow really unskilled users to use these classes in their posts.

    The problem is that even if you understand PHP and WP plugin development it is very very complicated to add buttons to the TinyMCE editor. It has large overhead in terms of extra files in your plugin, knowing javascript, and learning the TinyMCE API considering that it is such a common and simple goal.

    THE IDEA: Have someone skilled with the TinyMCE api write a wrapper function in PHP that easily lets plugins or the functions.php file (very relevant since classes are often tied to themes!) add buttons to the TinyMCE editor. Something like:

    wp_add_tinymce_button($before_text, $after_text, $button_image);

    This would probably open the door to a lot more plugins using TinyMCE buttons and would make a general "add whatever buttons you want" plugin a snap to build.

    Posted: 4 years ago #

  2. Mike Schinkel
    Member

    12345

    Great idea. I would love to see this added to core.

    Of course I'd rather see something more like

    wp_register_tinymce_button('key',array(
    'before_text' => ' <p align="right">',
    'after_text' => ' </p>',
    'before_text' => dirname(__FILE__) . '/my-button.png',
    'function' => 'mybuttonfunc',
    );

    This will ensure future flexibility and also I think you'll at least need to name a Javascript function to call.

    Posted: 3 years ago #

  3. Stephanie Leary
    Member

    12345

    I love this idea. I have done custom buttons before, and it was one of the most painful plugin projects I've ever worked on. I am not looking forward to repeating it.

    I'd be especially excited about it if there were an easy way to specify that the new button should appear in both TinyMCE and the quick tag list.

    Posted: 3 years ago #

  4. Jeremy Clarke
    Member

    12345

    Making it compatible with the HTML editor should be easy enough for simple before/after buttons. I've gotten html editor buttons added pretty easily in the past so it shouldn't add too much work to this idea being completed.

    To match the register_sidebar() function and account for the html editor as well as visual here's a stab at function usage:


    register_editor_button($args = array(
	'name' => 'custombutton', // slug
	'description' => 'Custom button hover text.', // title/hover text
	'icon_url' => MY_PLUGIN_URL . '/images/custumbutton.png', // mce button image
	'before_html' => '<p class="custom">', // text to insert before selected/cursor
	'after_html' => '<p>', // text to insert after selected/cursor
	'visual_editor' => true, // if false disable this button in visual, default true.
	'html_editor' => true, // if false disable this button in html editor, default true.
));

    @mike I'm not sure how your javascript callback would work. In this idea I'm mostly hoping to get the basic before/after html button worked out, as its a very common pattern for editor buttons and a lot of buttons would use the same logic (i.e. if something is selected wrap it in the html, if not OPEN the tag and set the button to be sensitive to CLOSE the tag again)

    If we want to also support javascript callbacks it gets really complicated. We could pass the selected text into a callback function and replace it with the function's output, but what if nothing is selected? The callback would have to handle several specific cases and the API for that would be complex. I'd personally rather focus on the simple use-case first, then let someone extend it further if they feel like it. It would be easy enough to add a 'js_callback' property to the $args array to accomplish this once it was worked out.

    Posted: 3 years ago #

  5. Dougal Campbell
    Member

    12345

    Yeah, the common use-case for this should be easy enough to handle. For example, I just want to add a button for the 'code' element (it's in the quicktags editor, but not in the WYSIWYG). This should be easy to do, but as far as I can tell, it currently requires writing a double-handful of PHP and javascript code. Seems awfully tedious just for adding a single button for a standard HTML tag.

    Adding a pre-defined tag should be as easy as passing the name of the tag (and any optional attributes) and a button image url.

    Posted: 3 years ago #

  6. Mark
    Member

    12345

    I very much like the idea of being able to plug TinyMCE from functions.php .

    Note that this is already possible to some extent, but rather sparsely documented. The following code for example will enable all but the mentioned blockformats (in the style dropdown menu) and disable the foreground color button.

    function change_mce_options( $init ) {
 $init['theme_advanced_blockformats'] = 'p,h1,h2,h3';
 $init['theme_advanced_disable'] = 'forecolor';
 return $init;
}
add_filter('tiny_mce_before_init', 'change_mce_options');

    Heartily support this!

    Posted: 3 years ago #

  7. iPad
    Member

    12345

    I very much like the idea of being able to plug TinyMCE from functions.php .

    Posted: 3 years ago #

  8. Anointed
    Member

    a HUGE +1 on this idea

    Posted: 3 years ago #

  9. ircpresident
    Member

    12345

    +1 on this too.

    Posted: 2 years ago #

  10. Unsal Korkmaz
    Member

    12345

    Well, any custom ways to do this atm?

    Posted: 2 years ago #

RSS feed for this topic

Reply »

You must log in to post.

  • Rating

    12345
    55 Votes

  • Status

    This is plugin territory
12