TinyMCE - Custom plugin makes visual editor blank in wordpress - wordpress

Question

I am trying to add TinyMCE custom plugin in wordpress that change the direction of selected text by using <bdo>. I register the plugin in wordpress:
/*Register Custom TinyMCE plugin*/
add_filter('mce_external_plugins', 'my_tinymce_plugins');
function my_tinymce_plugins() {
$plugins_array = array(
'tiny' => 'tiny.js' //Plugin directory is same as theme's funtion.php
);
return $plugins_array;
}
But it hide visual editor completely & also make text editor, un-editable. What is wrong?

Answer 1

I think you're overwriting all the other plugins, rather than just adding yours. Try
function my_tinymce_plugins($plugin_array) {
$plugin_array['tiny'] = 'tiny.js';
return $plugin_array;
}
instead. You may need to prepend get_stylesheet_directory_uri() to tiny.js to ensure the URL is correct.
Edit
Further to your comment, here's some code I used a few years ago to add a button. I can't say for certain best practices haven't changed, but it worked for me:
add_action('init', 'immo_add_column_button');
function immo_add_column_button() {
if ( ! current_user_can('edit_posts') && ! current_user_can('edit_pages') ) {
return;
}
if ( get_user_option('rich_editing') == 'true') {
add_filter('mce_external_plugins', 'immo_add_column_tinymce_plugin');
add_filter('mce_buttons', 'immo_register_addcolumn_button');
}
}
function immo_register_addcolumn_button($buttons) {
array_push($buttons, "|", "addcol");
return $buttons;
}
function immo_add_column_tinymce_plugin($plugin_array) {
$plugin_array['addcol'] = get_bloginfo('stylesheet_directory').'/js/immo_column_button.js';
return $plugin_array;
}
add_filter( 'tiny_mce_version', 'immo_refresh_mce');
function immo_refresh_mce($ver) {
// Force refresh of TinyMCE cache by updating the version number
$ver += 3;
return $ver;
}