How To Install the Code Snippet Button

You probably noticed the code snippet button on the support forum that I wrote. This tutorial will help you install that button into your editor. Code Snippets are generally used to post small portions of code that are displayed inline with text.

Installation

To install this plugin go to Admin Panel > Modules > JavaScript codes management and create a new script with the following settings.

Title : Code Snippet
Placement : In all the pages
Paste the code below and submit :

Code:

$(function() {
  if ($.sceditor) {
    $.sceditor.command.set('inline-code', {
      exec : function() {
        this.insert('[table class="inline-code"][tr][td][code]','[/code][/td][/tr][/table]');
      },
   
      txtExec : function() {
        this.insert('[table class="inline-code"][tr][td][code]','[/code][/td][/tr][/table]');
      },
   
      tooltip : 'Code snippet'
    });
   
    toolbar = toolbar.replace(/code/, 'code,inline-code');
  }
});
document.write('<style type="text/css">.inline-code,.inline-code *{display:inline-block!important}.inline-code .codebox{background-color:rgba(0,0,0,.04)!important;border:1px solid rgba(0,0,0,.05)!important;margin:0;line-height:12px;border-radius:3px}#mpage-body .inline-code .codebox p,.inline-code .codebox dt{display:none!important}.inline-code .codebox code{padding:0!important;margin:0;border:none;background:0 0}.sceditor-button-inline-code div{background-image:url(http://i21.servimg.com/u/f21/18/21/41/30/snippe10.png)!important}</style>');

Once you're finished, save the JavaScript and you're ready to use the code snippet !


If you have any questions or comments feel free to leave a reply below. Enjoy !

Notice

Tutorial written by Ange Tuteur. Reproduction not permitted without consent from the author.

It works great on my two phpBB 3 forums. Thanks for posting this tutorial.

SLGray wrote:It works great on my two phpBB 3 forums. Thanks for posting this tutorial.

Good to hear !

Don't mention it.

hi if i want to set this for admins is that possible
thanks

@Michael_vx yes,

Replace

Code: if ($.sceditor)

with

Code: if ($.sceditor && _userdata.user_level == 1)

.

thanks a lot thats like a charm

No problem.

If you ever want to make something for admins only, just make a condition like this :

Code:

if (_userdata.user_level == 1) {
  /* ADMIN ONLY SCRIPT */
}

and replace the comment with the script to only be executed for admins. Just make sure the condition is inside a document ready function, otherwise the condition will throw an error.

Installed for admins only. Works fine on Edge.

If you remove the background image, would you get the same image as FM Design has?

@SLGray oh no, you wouldn't. However, if you add the CSS below to your stylesheet you'll be able to achieve the same result.

Code:

.sceditor-button-inline-code:after { content:"\f0c4"; }

You might need to remove this from the script first though :

Code:

.sceditor-button-inline-code div{background-image:url(http://i21.servimg.com/u/f21/18/21/41/30/snippe10.png)!important}

Thanks @Ange Tuteur

No problem.