Forum

Wordpress, wpForo &...
 
Notifications
Clear all

Wordpress, wpForo & EnlighterJS

1 Posts
1 Users
0 Reactions
1 Views
(@frank)
Active Member Admin
Joined: 5 years ago
Posts: 2
Topic starter  

I had now several issues to get more buttons and especially the code Enlighter to work with wpForo. Unfortunately wpForo by default only uses the minimal TinyMCE editor and this can't be changed.

But thanks to the functions.php file in you theme you can at least modify it's behavior in some parts which helps a lot.

Also images aren't shown directly but as upload. So here are some tweaks for your functions.php file that may help you.

 

function ISeeT_customize_wpforo_editor($settings) {
    // Add more buttons to the toolbar
$settings['tinymce']['toolbar1'] = 'fontsizeselect,bold,italic,underline,strikethrough,forecolor,bullist,numlist,hr,alignleft,aligncenter,alignright,alignjustify,link,unlink,blockquote,wpf_spoil,undo,redo,pastetext,emoticons,fullscreen';
$settings['tinymce']['toolbar2'] = 'cut,subscript,superscript,outdent,indent,backcolor,removeformat,table,visualblocks,visualchars,insertdatetime,formats,charmap,styleselect,searchreplace,anchor,image,media,pre,codesample,EnlighterInsert,EnlighterEdit';

    // Enable additional plugins
    $settings['plugins'] = 'charmap,colorpicker,compat3x,directionality,fullscreen,hr,image,link,lists,media,paste,tabfocus,textcolor,wordpress,wpautoresize,wpdialogs,wpeditimage,wpemoji,wpgallery,wplink,wptextpattern,wpview,advlist,codesample,enlighterjs';
    
    $settings['external_plugins'] = 
array(
    'enlighterjs' => site_url('/wp-content/plugins/enlighter/resources/tinymce/enlighterjs.tinymce.min.js')
);

    

    // Optional: set other TinyMCE settings
    $settings['tinymce']['tinymce'] = true;
    $settings['tinymce']['menubar'] = false;
    $settings['tinymce']['resize'] = true;
    $settings['tinymce']['teeny'] = false;
    $settings['tinymce']['quicktags'] = true;
    $settings['tinymce']['height'] = 600;
    return $settings;
}
add_filter('wpforo_editor_settings', 'ISeeT_customize_wpforo_editor');

 

You can see within the code what is used for what - Pay attention that if you want to add additional plugins like me (advlist, codesample,...) you need to download the correct version and here you must know that Wordpress is using a very very old version of TinyMCE as they don't want to invest the time to upgrade it. So you need to download the version 4.9.11 (I'll attach a version here)

Of course you can adapt this to your needs.

But by default wpForo is stripping some HTML tags by default for security reasons which is good but also bad as with that behavior the code isn't loaded correctly with the Enlighter Plugin

 

function ISeeT_allow_custom_html_in_wpforo($content) {
    $allowed_tags = wp_kses_allowed_html('post');

    // Erlaube zusätzliche Tags und Attribute
    $allowed_tags['pre']['class'] = true;
    $allowed_tags['code']['class'] = true;
    $allowed_tags['span']['class'] = true;
    $allowed_tags['div']['class'] = true;

    return wp_kses($content, $allowed_tags);
}
add_filter('wpforo_content_filter', 'ISeeT_allow_custom_html_in_wpforo', 10);

 

Thanks to that little code now the Enlighter plugin works well. Here the link to the plugin I'm talking of.

 

And last but not least the little code to show the images - I didn't test it myself yet as the forum is brand new but I already integrated the code on the site and other told me that it is working.

 

add_filter('wpforo_content_after', 'wpforo_default_attachment_image_embed', 11);
function wpforo_default_attachment_image_embed( $content ){
    if( preg_match_all('|<a class=\"wpforo\-default\-attachment\" href\=\"([^\"\']+)\"[^><]*>.+?<\/a>|is', $content, $data, PREG_SET_ORDER) ){
        foreach($data as $array){
            if(isset($array[1])){
                $file = $array[1];
                $e = strtolower(substr(strrchr($file, '.'), 1));
                if( $e === 'jpg' || $e === 'jpeg' || $e === 'png' || $e === 'gif' || $e === 'bmp' || $e === 'webp' ){
                    $filename = explode('/', $file); $filename = end($filename);
                    $html = '<a href="' . esc_url($file) . '" target="_blank"><img class="wpforo-default-image-attachment" src="' . esc_url($file) . '" alt="' . esc_attr($filename) . '" title="' . esc_attr($filename) . '" /></a>';
                    $content = str_replace($array[0], $html, $content);
                }
            }
        }
    }
    return $content;
}

 

I hope this will help you as it helped me - It was much try on error until I got it to work like I wanted.

This topic was modified 2 hours ago 2 times by Frank Schroeder

   
Quote