Ehsan Ghanbari

Experience, DotNet, Solutions

Syntaxhighlighter plugin in CKEditor

 There are lots of plugins for CKEditor and one of the most used plugin for the developers is SyntaxHighlighter. In order to get and install this nice one with a sexy them like the following picture:

Get the latest version from the website and copy the content of the plugin into the plugin folder. Note that you should get the requirement plugin of every plugin in CKEditor of course, you will see the following popup modal after clicking the download button:

And the Dialog plugin needs Dialog User Interface as well. So after getting all three plugins and putting in the plugin folder. You just need to define the plugin like below:


<textarea id="js-my-textarea"></textarea>

<script type="text/javascript">

    CKEDITOR.replace('js-my-textarea', {

        "extraPlugins": 'syntaxhighlight'

    }); 

</script>


 

If you run your application you will see the plugin, you just need to copy and paste your code and select the language. That's all!

 

 

But you don't have that sexy highlighter yet! You need to add some CSS and JS code wherever your final body would be rendered. You have to get those extra files from highlighter web site. Get the latest version, after extracting you will see Scripts and Styles folder:

 

 

Some files are needed to be referenced like XRegExp.js, shCore.js, shCore.css, shThemeDefault.css :

 

    <script src="~/Content/syntaxhighlighter/scripts/XRegExp.js"></script>
    <script src="~/Content/syntaxhighlighter/scripts/shCore.js"></script>

    <script src="~/Content/syntaxhighlighter/scripts/shBrushCSharp.js"></script>
    <script src="~/Content/syntaxhighlighter/scripts/shBrushCss.js"></script>
    <script src="~/Content/syntaxhighlighter/scripts/shBrushJava.js"></script>
    <script src="~/Content/syntaxhighlighter/scripts/shBrushJScript.js"></script>
    <script src="~/Content/syntaxhighlighter/scripts/shBrushPython.js"></script>
    <script src="~/Content/syntaxhighlighter/scripts/shBrushRuby.js"></script>
    <script src="~/Content/syntaxhighlighter/scripts/shBrushSql.js"></script>
    <script src="~/Content/syntaxhighlighter/scripts/shBrushXml.js"></script>

    <link href="~/Content/syntaxhighlighter/styles/shCore.css" rel="stylesheet" />
    <link href="~/Content/syntaxhighlighter/styles/shThemeDefault.css" rel="stylesheet" />
    <script type="text/javascript">SyntaxHighlighter.all();</script>
 

Then you can reference all the language you want to highlight. By the way, you can find some other template rather than the default (shThemeDefault.css) in the same folder. 



Image browse plugin in CKEditor

I was recently integrating my blog with CKEditor Image Browser plugin and it was interesting to me, It was cool! in order to add Image Browser plugin to your CKEditor you should get the file from the mentioned link and put it in your plugins folder inside CKEditor. Then you should go to the config.js file of CKEditor and add the target plugin:

CKEDITOR.editorConfig = function( config ) {

// Define changes to default configuration here. For example:

// config.language = 'fr';

// config.uiColor = '#AADC6E';

    config.extraPlugins = 'imagebrowser';

    config.extraPlugins = 'prism';

    config.extraPlugins = 'codesnippet';

    config.extraPlugins = 'widget';

    config.extraPlugins = 'dialog';

};

Now before browsing, if you run your application, you would see the image properties with  Browse server button:

 

 

Now you should tell the plugin that where your images should be getting, imageBrowser_listUrl is the URL which should return a JSON file:

 <textarea id="my-textarea-id"></textarea>

 <script type="text/javascript">

    CKEDITOR.replace('js-my-textarea', {

        "extraPlugins": 'imagebrowser',

        "imageBrowser_listUrl": "/Administrator/File/BrowseImages"

    });

</script>

As I've written my blog with MVC4, I used HTML helper instead of <textarea> tag:

     @Html.TextAreaFor(blog => blog.Body, new { @id = "js-my-textarea", @class = "ckeditor" })

Image browser in CKEditor needs the JSON result in a format like this:

[

        {

                "image": "/image1.jpg",

                "thumb": "/image1_thumb.jpg"

        },

        {

                "image": "/image2_.jpg",

                "thumb": "/image2_thumb.jpg"                

        },

]

To create a JSON file like this in MVC, make JsonResult with the same output:

 public JsonResult BrowseImages()

        {

            var imageBrowser = new List<ImageBrowserViewModel>();

            var path="/Images/"

            var images = Directory.GetFiles(Server.MapPath(path)).OrderByDescending(d => new FileInfo(d).CreationTime);

            foreach (var image in images)

            {

                imageBrowser.Add(new ImageBrowserViewModel

                {

                    image = string.Format(finalPath + Path.GetFileName(image)),

                    thumb = string.Format(finalPath + "Thumb/" + Path.GetFileName(image)),

                });

            }

            return Json(imageBrowser, JsonRequestBehavior.AllowGet);

        }

And the ImageBrowserViewModel is just a ViewModel to initiate the output:

 public class ImageBrowserViewModel

    {

        public string image { get; set; }

 

        public string thumb { get; set; }

    }

As you can see in my code and also based on the required JSON output, I save the thumb of my images to show them in image browser to pick. Now you can see the output of your plugin in your editor:

  



Ember Data

Ember.Js is another popular web application framework to build single page application based on MVC pattern. There is an interesting feature in ember which lets you handle integrated templates to update automatically when the underlying data changes by ensuring your HTML. Ember Data is just a data persistence library such as JSON API that maps client-side models to server-side data. You know, it provides something like ORM in client side.

Ember Data provides two adaptors: RESTAdapter and FixtureAdapterThe RESTAdapter is configured for use by default Which provides a fully RESTful mechanism for your persistence layer. FixtureAdapter allows you to switch to another adapter when your API is ready to consume without any changes to your application code.

Using Ember Data makes it easy to retrieve records from a server, cache them for performance, save updates back to the server, and create new records on the client. But you don’t need to use ember data when you are using emberJS. Ember Data is also designed to work with streaming APIs like socket.io, Firebase, or WebSockets.

 

 

 



Characteristics of Meteor

Just a few hours ago I read some cool stuff about another JS library called Meteor. The story of Meteor doesn't stop on a simple library or framework. There are some claims in the documentation of Meteor website which seems interesting:

  1. Meteor makes it an order of magnitude simpler
  2. You can build a complete application in a weekend via Meteor
  3. No longer do you need to provision server resources
  4. You don’t need to manage database, ORM or broadcast data invalidations to clients.
  5. You use one language in both client and server to produce your application
  6. With meteor, All layers, from the database to template, should make an event-driven interface available

 

So what's going In the background?

Meteor use the Node.Js in server-side and JavaScript in the client. Meteor gathers all of the JS files and renders in node.JS server and provides the variables isClient and isServer so that your code can alter its behavior depending on whether it's running on the client or the server (WOW!) That's where every important thing you need to make it secure is kept in server directory. Meteor deals with Html code so different: "Meteor scans all the HTML files in your directory for three top-level elements:<head>, <body>, and <template>. The head and body sections are separately concatenated into a single head and body, which are transmitted to the client on initial page load." I've no Idea until I haven’t tested it!

Meteor has a Meteor account for authentication and authorization! It has integrated with Open Id for giant websites like Facebook, Twitter,… it supports for reactive programming: "you can write your code in a simple imperative style, and the result will be automatically recalculated whenever data changes that your code depends on."

 

Read about Meteor in http://docs.meteor.com/#quickstart . It's a really complete documentation for Meteor.



Model classes in BackboneJS

backbonJS is based on MV* patterns and designed for developing single page applications. It provides some basic and essential functionalities like attributes, events, and validations for models. A model of backboneJS encapsulates model data that is further available for an application to interact with the user interface.

"Backbone.js gives structure to web applications by providing models with key-value binding and custom events, collections with a rich API of enumerable functions, views with declarative event handling, and connects it all to your existing API over a RESTful JSON interface. With Backbone, you represent your data as Models, which can be created, validated, destroyed, and saved to the server."

As I'm only talking about backbonJS model classes in this blog post, so take a look at a model class as an example:

var Info= Backbone.Model.extend({

   defaults: {

        'name': 'Ehsan',

        'address': {

            'street': '14st Street'

            'city': 'Tehran',

            'Phone': +9809193782914

        }

   }

});

The most important part of the above object is Backbone.Model.extend which is a backboneJS Operand. you can also create an object from the above Model:

var infoObj= new Info({

    'name': 'Ben',

    'phone' '+79***********'

});

by creating an object, you will get a reference to that object, and any manipulation to the object will directly manipulate the actual object in the model. For example, you can manipulate the above model  like this:

Info.set('name', 'Jim.', { validate: true });

 



About Me

Ehsan Ghanbari

Hi! my name is Ehsan. I'm a developer, passionate technologist, and fan of clean code. I'm interested in enterprise and large-scale applications architecture and design patterns. I spend a lot of time on software architecture. Since 2008, I've been as a developer for different companies and organizations and I've been focusing on Microsoft ecosystem all the time. During the past years, Read More

Post Tags
Pending Blog Posts
using Elmah in asp.net MVC4
Using FluentSecurity in MVC
Strategic design
Factory Pattern
time out pattern in ajax
Redis as a cache server
How to use PagedList In asp.net MVC
Multiple submit buttons in asp.net MVC
Domain driven design VS model driven architecture
What's the DDD-lite?