Add class to all links created by tinyMCE

Question

I'm attempting to automatically add a class to all links created when clicking the "link" button in tinyMCE. I've found this snippet in the tinyMCE docs:

// Adds a class to all paragraphs in the active editor
tinyMCE.activeEditor.dom.addClass(
    tinyMCE.activeEditor.dom.select('p'),
    'myclass'
);

I think this will be what I need if I change it to apply to anchors.

Do you think this will work? Do you know of a better way to do it?

How and where do I add this snippet to my theme?

The theme I'm using has a tinyMCE folder in the functions directory.

Answer 1

So I ended up doing a jQuery fix rather than going through tinyMCE. Code as follows:

jQuery(document).ready(function(){
    $("#content a").addClass("link_color");
});

Answer 2

i don't think it possible or easy to change the "make link button" in the tinymce

but in wordpress you can pull your custom style in the editor and apply it to a link ;)

maybe using somthing like that in your theme function.php :

add_filter( 'mce_buttons_2', 'my_mce_buttons_2' );
// add the style list to tinymce
function my_mce_buttons_2( $buttons ) {
    array_unshift( $buttons, 'styleselect' );
    return $buttons;
}

add_filter( 'tiny_mce_before_init', 'my_mce_before_init' );
function my_mce_before_init( $settings ) {

    $style_formats = array(
        array(
            'title' => 'Custom Class for Links', // title that apear in the list
            'selector' => 'a', // limited to specific html tag
            'classes' => 'myClass' // the class to add
        )
    );

    $settings['style_formats'] = json_encode( $style_formats );

    return $settings;
} 

don't forget to add the definition of .myClass in your editor-style.css check add_editor_style() function for how to load and use custom sytle in WP editor

i hope this help you