Adding SyntaxHighlighter plugin to tinyMCE

by Jacobus Meintjes February 03, 2010 21:59

This will only be a step-by-step to add the plugin to BlogEngine.

1. Download SyntaxHighlighter

2. Download plugin

3. Copy SyntaxHighlighter to BlogEngine's root folder

Layout 1

4. Copy plugin to editors plugin folder

Layout 2

5. Add the following line to the top of your selected theme's masterpage.

<link rel="stylesheet" href="~/SyntaxHighlighter/styles/SyntaxHighlighter.css" />

6. Add the following section to the bottom of your selected theme's masterpage.

<script language="javascript" src="/SyntaxHighlighter/scripts/shCore.js"></script>
<script language="javascript" src="/SyntaxHighlighter/scripts/shBrushCSharp.js"></script>
<script language="javascript" src="/SyntaxHighlighter/scripts/shBrushXml.js"></script>
<script language="javascript" src="/SyntaxHighlighter/scripts/shBrushCss.js"></script>
<script language="javascript" src="/SyntaxHighlighter/scripts/shBrushSql.js"></script>
<script language="javascript" src="/SyntaxHighlighter/scripts/shBrushVb.js"></script>
<script language="javascript" src="/SyntaxHighlighter/scripts/shBrushJScript.js"></script>

<script language="javascript">
    window.onload = function() {
        dp.SyntaxHighlighter.ClipboardSwf = 'SyntaxHighlighter/flash/clipboard.swf';
//this section is important to allow for the correct formatting of BR tags
        dp.SyntaxHighlighter.BloggerMode();

        dp.SyntaxHighlighter.HighlightAll('code');
    }
</script>

7. In the admin folder, locate the tinyMCE.ascx file and change the following

<script type="text/javascript">
    tinyMCE.init({
        // General options
        mode: "exact",
        elements : "<%=txtContent.ClientID %>",
        theme: "advanced",
        plugins: "inlinepopups,fullscreen,contextmenu,emotions,table,iespell,advlink,codesyntax",
        convert_urls: false,
       
      // Theme options
        theme_advanced_buttons1: "fullscreen,code,|,cut,copy,paste,|,undo,redo,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,bullist,numlist,outdent,indent,|,iespell,link,unlink,sub,sup,removeformat,cleanup,charmap,emotions,|,formatselect,fontselect,fontsizeselect,|,codeformat",
        theme_advanced_buttons2: "",
        theme_advanced_toolbar_location: "top",
        theme_advanced_toolbar_align: "left",
        theme_advanced_statusbar_location: "bottom",
        theme_advanced_resizing: true,
        extended_valid_elements: "pre[name|class]",
        tab_focus : ":prev,:next"
    });
</script>

8. Now you are done.

Your Add Entry editor should now contain a dropdown like the one below

Layout 3

It works the same as formatting text inside the editor, just select the text to change and then the format at has to comply to.

Tags: , ,

Javascript | tinyMCE

Speed up Javascript loads

by Jacobus Meintjes August 01, 2009 10:17

After looking for a few tips on the internet to speed up my page loads I came accross the following urls;

Most of it is loading javascript files in parallel to speed up the page loads.

 

Reading Material

Optimizing Script Loading

Non-blocking Javascript Downloads

Loading Javascript in parallel

Yahoo Best Practices

Tags:

Javascript

Powered by BlogEngine.NET 1.6.0.0
Theme by Mads Kristensen | Modified by Mooglegiant

About Me

Jacobus Meintjes
 
C# developer working with ASP.Net and/or Windows Forms.
Email Me

Cumulus

This will be shown to users with no Flash or Javascript.

Widget Twitter not found.

Root element is missing.X