Click here to Skip to main content
Click here to Skip to main content
Technical Blog

Tagged as

TinyMCE 4.x Preformatted Text and Syntax Highlighting

, 25 Jul 2014 Public Domain
Rate this:
Please Sign up or sign in to vote.
We use the SyntaxHighlighter from Alex Gorbachev on thios page to highlight our code. Unfortunately TinyMCE has some issues with pre-formatted text (pre HTML element). Most important: It places line breaks () after the lines. After some research I ended up with the following setup:    $(document).re

We use the SyntaxHighlighter from Alex Gorbachev on thios page to highlight our code. Unfortunately TinyMCE has some issues with pre-formatted text (pre HTML element). Most important: It places line breaks (<br />) after the lines. After some research I ended up with the following setup:

    $(document).ready(function () {

        fixNewLines = function (content) {

            var codeBlocks = content.match(/<pre.*?>[^]*?<\/pre>/mg);

            console.log('codeBlocks', codeBlocks);

            if(codeBlocks == null) return content;
            for(var index=0; index < codeBlocks.length; index++) {
                content = content.replace(codeBlocks[index], codeBlocks[index].replace(/<br\s*\/?>/mgi, "\n"));
            }
            return content;
        }


        tinymce.init({
            selector: "#@ViewData.TemplateInfo.GetFullHtmlFieldId(string.Empty)",
            entity_encoding: "raw",
            content_css : "/Content/tinymce/Customized.css",
            height: 450,
            width: 790,
            plugins: [
                "advlist autolink lists link image charmap print preview anchor template",
                "searchreplace visualblocks fullscreen",
                "code additional_formats",
                "insertdatetime media table contextmenu paste@(canUploadPictures ? " jbimages" : null)"
            ],
            toolbar1: " formatselect styleselect template link image@(canUploadPictures ? " jbimages" : null) | undo redo code",
            toolbar2: "bold italic codeElement varElement | bullist numlist outdent indent | alignleft aligncenter alignright alignjustify ",
            //"relative_urls" required by jbimages plugin to be set to "false"
            //but in this case it'll break existing links (e.g. message template tokens)
            relative_urls: true,
            templates: [
                   { title: 'C# Code Template', content: '<pre class="brush: csharp;">/*Code Goes Here*/</pre>' },
                   { title: 'JavaScript Code Template', content: '<pre class="brush: js;">/*Code Goes Here*/</pre>' }
            ],

            setup: function (editor) {

                editor.on('BeforeSetContent', function (e) {
                    console.log('BeforeSetContent event', e);
                    e.content = fixNewLines(e.content);
                });

                editor.on('SaveContent', function (e) {
                    console.log('SaveContent event', e);
                    e.content = fixNewLines(e.content);
                });

                editor.on('GetContent', function (e) {
                    console.log('GetContent event', e);
                    e.content = fixNewLines(e.content);
                });


            }
        });
    });

This code removes the <br /> stuff from the pre elements. It is not very elaborated at the moment, but it works quite good.

Additionally i want to have a better WYSIWYG experience with TinyMCE, so i added a custom style sheet, to make a pre element look nicer in the editor. This is the stylesheet.

h1 {
}

h2 {
    margin-top: 10px;
    margin-bottom: 5px;
}

h3 {
    margin-top: 8px;
    margin-bottom: 4px;
}

p {
    margin-top: 3px;
    margin-bottom: 7px;
}

a {
    color: #003399;
    text-decoration: underline;
}

pre {
    font-family: consolas, monospace;
    font-weight: normal;
    color: #069;
    border-top: 1px dotted #a9a9a9; 
    border-bottom: 16px solid #ededed;
    border-left: 3px solid #6CE26C;
    margin-left: 28px;
    padding: 3px 0px 5px 7px  ;
}

code {
    font-family: consolas, monospace;
    font-weight: bold;
    color: #069;
}

    code a {
        font-family: consolas, monospace;
        font-size: 100%;
        font-weight: bold;
        color: #069;
        text-decoration: underline;
    }

a > code {
    font-family: consolas, monospace;
    font-size: 100%;
    font-weight: bold;
    color: #069;
    text-decoration: underline;
}

ul {
    list-style-type: disc;
    padding-left: 14px;
    margin-top: 3px;
    margin-bottom: 7px;
}

    ul > li {
        margin-bottom: 4px;
    }


ol {
    list-style-type: decimal;
    padding-left: 14px;
    margin-top: 3px;
    margin-bottom: 7px;
}

    ol > li {
        margin-bottom: 4px;
    }

This styles give the pre and code elements the same spacing and kind of the same visual appearance as the have on the real site. Now it looks like this when I edit topics with pre elements:

TinyMCE Preformatted Source Code Block

The topic in the editor is: Simple Task Sample: Crawl a Website and Extract all Links

License

This article, along with any associated source code and files, is licensed under A Public Domain dedication

Share

About the Author

I'm working on a new project called Crawler-Lib. It is a generalized back-end processing and hosting framework for Microsoft .NET and Mono. Please take a look at it:
Crawler-Lib Homepage
Crawler-Lib Blog
Crawler-Lib YouTube Channel
Follow on   Twitter   Google+   LinkedIn

Comments and Discussions

 
-- There are no messages in this forum --
| Advertise | Privacy | Terms of Use | Mobile
Web04 | 2.8.150224.1 | Last Updated 25 Jul 2014
Article Copyright 2014 by Thomas Maierhofer (Tom)
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid