Hi.
I have a couple of additional plugins in TinyMCE in my Wordpress Admin page (the 'back-end'). These don't show in the front-end. I'd like to include these in the Forum front-end TinyMCE when people are making a post.
How can I do this?
Thanks.
Just to append on to this, is there any way to override the editor so it uses the default TinyMCE that WordPress uses? I'm using the 'Crayon Syntax Highlighter' plugin but I can't get the TinyMCE editor in WPForo to show it?
Thanks.
Hi @captain_planet,
This restriction is made by wpForo developers so as to not allow the additional plugins, as it may cause the styling issue, etc.
If you're a developer you can simply add the TinyMCE additional plugins using the TinyMCE filters.
Hi @sofy.
The filters don't seem to work on the WPForo TinyMCE instance? They work in the WordPress instantiated TinyMCE though? I've put these in my functions.php to test...
function register_crayon_tinymce( $plugin_array ) {
$plugin_array['crayon_tinymce'] = plugins_url() . '/crayon-syntax-highlighter/util/tag-editor/crayon_tinymce.js';
return $plugin_array;
}
add_filter( 'mce_external_plugins', 'register_crayon_tinymce' );
function configure_tinymce_buttons($buttons) {
return array('formatselect', 'bold', 'italic', 'subscript', 'crayon_tinymce');
}
add_filter("mce_buttons", "configure_tinymce_buttons", 0);
I didn't. Unfortunately I ended up using a different forum plugin and writing my own Wordpress syntax highlighter plugin that uses prims.js.
So I managed to add tinymce plugins by adding them to the wpforo plugins folder, and editing the class-template.php file... that was really easy.
Trying to do that via the functions file and I am struggling for some reason... have literally spent hours trying to work out why what you had don't was not working and I believe I have worked it out.
The filter does not work because the array is being reinitialised, effectively making the filter absolutely pointless.
add_filter( 'mce_external_plugins', 'custom_mce_plugins');
function custom_mce_plugins( $plugin_array ) {
$plugin_array['image'] = get_stylesheet_directory_uri() . '/tinymce-plugins/image/plugin.js';
return $plugin_array;
};
The above is my fairly basic filter to load the plugin - basically the same as yours.
I added some logging in wpForo's class-template.php file to output the return $plugin_array for the add_mce_external_plugins function - the below is the output and clearly out filter has not worked:
Array
(
[wpforo_pre_button] => https://staging.abcde.xyz/wp-content/plugins/wpforo/wpf-assets/js/tinymce-pre.js
[wpforo_link_button] => https://staging.abcde.xyz/wp-content/plugins/wpforo/wpf-assets/js/tinymce-link.js
[wpforo_spoiler_button] => https://staging.abcde.xyz/wp-content/plugins/wpforo/wpf-assets/js/tinymce-spoiler.js
[wpforo_source_code_button] => https://staging.abcde.xyz/wp-content/plugins/wpforo/wpf-assets/js/tinymce-code.js
[emoticons] => https://staging.abcde.xyz/wp-content/plugins/wpforo/wpf-assets/js/tinymce-emoji.js
)
Below is a screenshot of the function, in which you can see the logging I added. You will also notice that the function starts by reinitialising the array:
If I comment out just that one line and refresh the page, the log output now shows:
Array
(
[image] => https://staging.abcde.xyz/wp-content/themes/airi-child/tinymce-plugins/image/plugin.js
[wpforo_pre_button] => https://staging.abcde.xyz/wp-content/plugins/wpforo/wpf-assets/js/tinymce-pre.js
[wpforo_link_button] => https://staging.abcde.xyz/wp-content/plugins/wpforo/wpf-assets/js/tinymce-link.js
[wpforo_spoiler_button] => https://staging.abcde.xyz/wp-content/plugins/wpforo/wpf-assets/js/tinymce-spoiler.js
[wpforo_source_code_button] => https://staging.abcde.xyz/wp-content/plugins/wpforo/wpf-assets/js/tinymce-code.js
[emoticons] => https://staging.abcde.xyz/wp-content/plugins/wpforo/wpf-assets/js/tinymce-emoji.js
)
I had already implemented this filter to add the Image button to the toolbar (as well as enable Paste as Text by default), so when I refreshed the page, I had an amazing Image button. I had just appended it to the end of the string, so it actually pushed the Full Screen button to the left next to the others, took its place on the far right - only a minor thing and can be sorted out later.
add_filter( 'wpforo_editor_settings', function( $settings ){
$settings['tinymce']['toolbar1'] .= ',image';
$settings['tinymce']['paste_as_text'] = 'true';
return $settings;
} );
I have already read elsewhere that a few additional lines of code are needed to display the File Browser button next to the Source field, and that is something I will probably look into next.
So when this was said:
Is this what you meant? The functions for the other filters you have do not reinitialise the arrays, so any particular reason why this does? If for some reason you need to reset it, then your filter is the wrong way around, because in that scenario you would
Still waiting on an explanation to this... the lack of response just makes it seem more deceitful 🙄
The logic you're using is correct. You've found the right way.
However, you've done some customizations in the class-template.php file, that will be lost after the wpForo update. In case, if you don't want to make the same changes each time after the plugin update, just do it via the hook.
So the correct way (without modifying any wpForo core files) to get it resolved is calling the "mce_external_plugins" filter and use the priority greater than 15 (for example we use 16 in the example below 16).
For adding the buttons in the TinyMCE toolbar you've written the correct way in the post above (using the "wpforo_editor_settings" filter).
Finally, to add custom TinyMCE plugin to wpForo editor you just need to write the small functions as shown below
//to add custum plugin
add_filter( 'mce_external_plugins', function ( $plugin_array ) {
$plugin_array['crayon_tinymce'] = plugins_url() . '/crayon-syntax-highlighter/util/tag-editor/crayon_tinymce.js';
return $plugin_array;
} , 16 );
//to add the buttons in the TinyMCE toolbar
add_filter( 'wpforo_editor_settings', function( $settings ){
$settings['tinymce']['toolbar1'] .= ',crayon_tinymce';
return $settings;
} );
Ahh, that makes more sense... having a lower priority (a higher number) means that it will run after your code rather than before... which is what was previously causing your code to basically overwrite what I had defined.
Thanks 😀
@captain_planet Thanks for letting me know 😀
@sofy Can you please advise how to actually add the plugins using the method you mentioned, because based on what @captain_planet said, it doesn't actually work.
