Using Wyzz Web-based HTML editing control in ASP.NET MVC

I recently had to put out a web-based single page application (SPA) on short notice. To make that happen, I knew I had to use some open-source controls. One was the jsTree treeview control (which I wrote about on this blog - Using jsTree with ASP.NET MVC) and another was the Wyzz WYSIWYG web-based editing control for HTML.
From their site, “Wyzz is an ultra-small, very light WYSIWYG (What You See Is What You Get) Editor for use in your web applications. It's written in JavaScript, and is free (as in speech and as in beer) for you to use in your web applications and/or alter to your needs (see the license conditions).”

Naturally, the first step to add a reference to the wyzz.js script file. Once you have that, you just need to add the control to an HTML

</span> element. Finally, it’s a simple matter of adding some JavaScript to “<span style="font-family: Courier New;">make_wyzz</span>” the control.</div><div id="codeSnippetWrapper"><pre id="codeSnippet" style="background-color: #f4f4f4; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-style: none; color: black; direction: ltr; font-family: "courier new" , "courier" , monospace; font-size: 8pt; line-height: 12pt; margin: 0em; overflow: visible; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; width: 100%;"><span style="color: blue;"><</span><span style="color: maroon;">script</span> <span style="color: red;">language</span><span style="color: blue;">="JavaScript"</span> <span style="color: red;">type</span><span style="color: blue;">="text/javascript"</span> <span style="color: red;">src</span><span style="color: blue;">="~/Home/wyzz.js"</span><span style="color: blue;">></</span><span style="color: maroon;">script</span><span style="color: blue;">></span></pre><br /></div><br /><div id="codeSnippetWrapper"><br /><pre id="codeSnippet" style="background-color: #f4f4f4; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-style: none; color: black; direction: ltr; font-family: "courier new" , "courier" , monospace; font-size: 8pt; line-height: 12pt; margin: 0em; overflow: visible; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; width: 100%;"><span style="color: blue;"><</span><span style="color: maroon;">textarea</span> <span style="color: red;">name</span><span style="color: blue;">="textEditor"</span> <span style="color: red;">id</span><span style="color: blue;">="textEditor"</span> <span style="color: red;">rows</span><span style="color: blue;">="10"</span> <span style="color: red;">cols</span><span style="color: blue;">="40"</span><span style="color: blue;">></span>No file loaded...<span style="color: blue;"></</span><span style="color: maroon;">textarea</span><span style="color: blue;">><</span><span style="color: maroon;">br</span> <span style="color: blue;">/></span><br /><span style="color: blue;"><</span><span style="color: maroon;">script</span> <span style="color: red;">language</span><span style="color: blue;">="javascript1.2"</span><span style="color: blue;">></span><pre style="background-color: white; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-style: none; color: black; direction: ltr; font-family: "courier new" , "courier" , monospace; font-size: 8pt; line-height: 12pt; margin: 0em; overflow: visible; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; width: 100%;"><span id="lnum1" style="color: #606060;"></span>    make_wyzz(<span style="color: #006080;">'textEditor'</span>);</pre><span style="color: blue;"></</span><span style="color: maroon;">script</span><span style="color: blue;">></span><span style="color: blue;"><</span><span style="color: maroon;">div</span> <span style="color: red;">ng-controller</span><span style="color: blue;">="EditorCtrl"</span><span style="color: blue;">></span>   <span style="color: blue;"><</span><span style="color: maroon;">form</span> <span style="color: red;">novalidate</span> <span style="color: red;">class</span><span style="color: blue;">="simple-form"</span><span style="color: blue;">></span>       <span style="color: blue;"><</span><span style="color: maroon;">button</span> <span style="color: red;">ng-click</span><span style="color: blue;">="saveFileContent()"</span><span style="color: blue;">></span>save<span style="color: blue;"></</span><span style="color: maroon;">button</span><span style="color: blue;">></span>   <span style="color: blue;"></</span><span style="color: maroon;">form</span><span style="color: blue;">></span><span style="color: blue;"></</span><span style="color: maroon;">div</span><span style="color: blue;">></span></pre><br />As you can see in the example above, I’ve chosen to use an <a href="http://en.wikipedia.org/wiki/AngularJS" target="_blank">AngularJS</a> control to define the behaviour of the save button. In the JavaScript I define a server-side controller function (<a href="http://www.asp.net/" target="_blank">ASP.NET</a> in this case) and I send it the content of the control by accessing the HTML element that the control is using.</div><br /><pre>$scope.saveFileContent = function () { <br />        $http.post('/Home/SaveFileContent', { filePath: document.getElementById("multilingualfile").innerHTML, content: document.getElementById("wysiwyg" + "textEditor").contentWindow.document.body.innerHTML, title: document.getElementById("titleHtml").value })<br />            .then(<br />            function (response) {<br />                alert("File Save Result: " + response.data.Result);<br />            },<br />            function (data) {<br />                alert("Error saving file content");<br />            }<br />        );<br />    }</pre><br />Update: Here’s the basic format of the server-side part:<br />  <br /><div id="codeSnippetWrapper"><br /><pre id="codeSnippet" style="background-color: #f4f4f4; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-style: none; color: black; direction: ltr; font-family: "courier new" , "courier" , monospace; font-size: 8pt; line-height: 12pt; margin: 0em; overflow: visible; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; width: 100%;">[HttpPost]<br /><span style="color: blue;">public</span> ActionResult SaveFileContent(<span style="color: blue;">string</span> filePath, <span style="color: blue;">string</span> content, <span style="color: blue;">string</span> title)<br />{<br />    <span style="color: blue;">try</span><br />    {<br />        ...<br />        <br />        <span style="color: blue;">return</span> Json<br />            (<br />                <span style="color: blue;">new</span><br />                {<br />                    Result = <span style="color: #006080;">"Success"</span>,<br />                }<br />            );<br />    }<br />    <span style="color: blue;">catch</span> (Exception ex)<br />    {<br />       ...<br /><br />        <span style="color: blue;">return</span> Json<br />            (<br />                <span style="color: blue;">new</span><br />                {<br />                    Result = <span style="color: #006080;">"Error saving content: "</span> + ex.ToString(),<br />                }<br />            );<br />    }<br />}</pre><br /><span style="font-family: Georgia;">To customize your Wyzz controls, you can edit the wyzz.js file. If you have any issues, refer to the </span><a href="http://www.wyzz.info/forum/index.php"><span style="font-family: Georgia;">Wyzz discussion forum</span></a><span style="font-family: Georgia;">.</span></div>
<div div='adsense-content' style='display:block;text-align: center'>
</div></div>
<script type='text/javascript'>
function insertAfter(addition,target) {
var parent = target.parentNode;
if (parent.lastChild == target) {
parent.appendChild(addition); 
} else {
parent.insertBefore(addition,target.nextSibling);
}
}
var adscont = document.getElementById("adsense-content");
var target = document.getElementById("adsense-target");
var linebreak = target.getElementsByTagName("br");
if (linebreak.length > 0){
insertAfter(adscont,linebreak[1]);
}
</script>
<script type='text/javascript'>
function insertAfter2(addition2,target2) {
var parent = target.parentNode;
if (parent.lastChild == target) {
parent.appendChild(addition); 
} else {
parent.insertBefore(additionn,targett.nextSibling);
}
}
var adscont = document.getElementById("adsense-content2");
var target = document.getElementById("adsense-target");
var linebreak = target.getElementsByTagName("br");
if (linebreak.length > 0){
insertAfter(adscont,linebreak[3]);
}
</script>
</div>
</div>
</article>
<div class='hreview' style='display:none'>
<span class='item'>
<span class='fn'>Using Wyzz Web-based HTML editing control in ASP.NET MVC</span>
<img alt='Using Wyzz Web-based HTML editing control in ASP.NET MVC' class='photo' src=''/>
</span> 
              Reviewed by <span class='reviewer'>0x000216</span>
              on 
              <span class='dtreviewed'>
Thursday, December 05, 2013
<span class='value-title' title='Thursday, December 05, 2013'></span>
</span> 
              Rating: <span class='rating'>5</span>
</div>
<div style='clear:both'></div>
<div class='post-footer'>
<div class='label-head'>
<span>Tags :</span>
</div>
<div class='share-art'>
<a class='facebook' href='https://www.facebook.com/sharer.php?u=https://nexus-decode.blogspot.com/2013/12/using-wyzz-web-based-html-editing.html&title=Using Wyzz Web-based HTML editing control in ASP.NET MVC' onclick='window.open(this.href, 'windowName', 'width=600, height=400, left=24, top=24, scrollbars, resizable'); return false;' rel='nofollow' target='_blank'><i class='fa fa-facebook'></i><span>Share it</span></a>
<a class='twitter' href='https://twitter.com/share?url=https://nexus-decode.blogspot.com/2013/12/using-wyzz-web-based-html-editing.html&title=Using Wyzz Web-based HTML editing control in ASP.NET MVC' onclick='window.open(this.href, 'windowName', 'width=600, height=400, left=24, top=24, scrollbars, resizable'); return false;' rel='nofollow' target='_blank'><i class='fa fa-twitter'></i><span>Tweet it</span></a>
<a class='googleplus' href='https://plus.google.com/share?url=https://nexus-decode.blogspot.com/2013/12/using-wyzz-web-based-html-editing.html&title=Using Wyzz Web-based HTML editing control in ASP.NET MVC' onclick='window.open(this.href, 'windowName', 'width=600, height=400, left=24, top=24, scrollbars, resizable'); return false;' rel='nofollow' target='_blank'><i class='fa fa-google-plus'></i><span>Share it</span></a>
<a class='linkedin' href='https://www.linkedin.com/shareArticle?url=https://nexus-decode.blogspot.com/2013/12/using-wyzz-web-based-html-editing.html&title=Using Wyzz Web-based HTML editing control in ASP.NET MVC' onclick='window.open(this.href, 'windowName', 'width=600, height=400, left=24, top=24, scrollbars, resizable'); return false;' rel='nofollow' target='_blank'><i class='fa fa-linkedin'></i><span>Share it</span></a>
<a class='pinterest' href='https://pinterest.com/pin/create/button/?url=https://nexus-decode.blogspot.com/2013/12/using-wyzz-web-based-html-editing.html&media=http://www.halobattleguide.com/images/blog/LiveWriterUpload/9c32a6ed3969_F2F6/image_thumb.png&description=I recently had to put out a web-based single page application (SPA) on short notice. To make that happen, I knew I had to use some open-sour...' onclick='window.open(this.href, 'windowName', 'width=600, height=400, left=24, top=24, scrollbars, resizable'); return false;' rel='nofollow' target='_blank'><i class='fa fa-pinterest-p'></i><span>Pin it</span></a>
</div>
<div style='clear:both'></div>
<div id='related-posts'>
<h4 class='related-headline'>You Might Also Like</h4>
<div class='related-ready'>
</div>
</div>
<script type='text/javascript'>
	var id_user = 329219;
	var domains_include = ['google.com', 'nexus-decode.blogspot.com.com', 'bing.com'];
</script>
<div class='clear'></div>
<ul class='post-nav'>
<li class='next'>
<a class='newer-link' href='https://nexus-decode.blogspot.com/2013/12/tutorial-find-and-remove-packages-from.html' id='Blog1_blog-pager-newer-link' rel='next'></a>
</li>
<li class='previous'>
<a class='older-link' href='https://nexus-decode.blogspot.com/2013/12/remove-uninstall-windows-warding-module.html' id='Blog1_blog-pager-older-link' rel='previous'></a>
</li>
</ul>
</div>
<div itemprop='publisher' itemscope='itemscope' itemtype='https://schema.org/Organization' style='display:none;'>
<div itemprop='logo' itemscope='itemscope' itemtype='https://schema.org/ImageObject'>
<meta content='http://www.halobattleguide.com/images/blog/LiveWriterUpload/9c32a6ed3969_F2F6/image_thumb.png' itemprop='url'/>
</div>
<meta content='Nexus' itemprop='name'/>
</div>
              </div>
            
</div>
<script type='text/javascript'>
//<![CDATA[
   $(".index .post-outer,.archive .post-outer").each(function() {
        $(this).find(".block-image .thumb a").attr("style", function(e, t) {
            return t.replace("/default.jpg", "/mqdefault.jpg")
        }).attr("style", function(e, t) {
            return t.replace("s72-c", "s1600")
        })
    });
//]]>
</script>
<div class='comments' id='comments'>
<a name='comments'></a>
<div id='backlinks-container'>
<div id='Blog1_backlinks-container'>
</div>
</div>
</div>
</div>

</div>
<div class='post-feeds'>
</div>
</div></div>
</div>
<div class='sidebar-wrapper'>
<div class='sidebar section' id='sidebar' name='Sidebar Right A'>
<div class='widget HTML' data-version='1' id='HTML4'>
<h2 class='title'>Recent Posts</h2>
<div class='widget-content'>
</div>
</div><div class='widget HTML' data-version='1' id='HTML8'>
<h2 class='title'>Facebook</h2>
<div class='widget-content'>
</div>
</div></div>
</div>
<div class='clear'></div>
</div><center>

<script type='text/javascript'>
	var id_user = 329219;
	var domains_include = ['google.com', 'nexus-decode.blogspot.com.com', 'bing.com'];
</script>
</center>
<div class='clear'></div>
<div class='footer-wrapper'>
<div class='footer-sec row'>

<div class='social-footer section' id='social-footer' name='Social Footer'><div class='widget LinkList' data-version='1' id='LinkList20'>
<div class='widget-content'>
<ul>
<li><a class='gplus' href='#' target='_blank' title='gplus'></a></li>
<li><a class='youtube' href='#' target='_blank' title='youtube'></a></li>
<li><a class='instagram' href='#' target='_blank' title='instagram'></a></li>
<li><a class='twitter' href='#' target='_blank' title='twitter'></a></li>
<li><a class='facebook' href='#' target='_blank' title='facebook'></a></li>
</ul>
</div>
</div></div>

<div class='copyright'><p>Created By <a href='https://nexus-decode.blogspot.com/' id='mycontent' title='Blogger Templates'>Nexus</a> · Powered by <a href='https://www.blogger.com'>Blogger</a>
<br/>© All Rights Reserved</p>
<a aria-current='page' href='https://nexus-decode.blogspot.com/p/terms-of-service-these-terms-and.html'>Terms Of Service   </a>·<a href='https://nexus-decode.blogspot.com/p/privacy-policy.html'>   Privacy Policy   </a>·<a href='https://nexus-decode.blogspot.com/p/blog-page.html'>   Disclaimer   </a>·<a href='mailto:cybergeekofficial@gmail.com'>   Contact Us   </a>·<a href='https://nexus-decode.blogspot.com/p/about-us.html'>   About Us   </a></div>
</div>
</div>
<script>
/*<![CDATA[*/
$(function() {
    $('.widget.LinkList a[href*="behance.net"] i').addClass("fa fa-behance");
    $('.widget.LinkList a[href*="facebook.com"] i').addClass("fa fa-facebook");
    $('.widget.LinkList a[href*="twitter.com"] i').addClass("fa fa-twitter");
    $('.widget.LinkList a[href*="bloglovin.com"] i').addClass("fa fa-heart");
    $('.widget.LinkList a[href*="dribbble.com"] i').addClass("fa fa-dribbble");
    $('.widget.LinkList a[href*="flickr.com"] i').addClass("fa fa-flickr");
    $('.widget.LinkList a[href*="snapchat.com"] i').addClass("fa fa-snapchat");
    $('.widget.LinkList a[href*="plus.google.com"] i').addClass("fa fa-google-plus");
    $('.widget.LinkList a[href*="instagram.com"] i').addClass("fa fa-instagram");
    $('.widget.LinkList a[href*="linkedin.com"] i').addClass("fa fa-linkedin");
    $('.widget.LinkList a[href*="pinterest.com"] i').addClass("fa fa-pinterest");
    $('.widget.LinkList a[href*="vimeo.com"] i').addClass("fa fa-vimeo-square");
    $('.widget.LinkList a[href*="youtube.com"] i').addClass("fa fa-youtube");
    $('.widget.LinkList a[href*="vine.co"] i').addClass("fa fa-vine");
    $('.widget.LinkList a[href*="soundcloud.com"] i').addClass("fa fa-soundcloud");
    $('.widget.LinkList a[href*="goodreads.com"] i').addClass("fa fa-book");
    $('.widget.LinkList a[href*="deviantart.com"] i').addClass("fa fa-deviantart");
    $('.widget.LinkList a[href*="foursquare.com"] i').addClass("fa fa-foursquare");
    $('.widget.LinkList a[href*="reddit.com"] i').addClass("fa fa-reddit");
    $('.widget.LinkList a[href*="tumblr.com"] i').addClass("fa fa-tumblr");
    $('.widget.LinkList a[href*="spotify.com"] i').addClass("fa fa-spotify");
    $('.widget.LinkList a[href*="twitch.tv"] i').addClass("fa fa-twitch");
    $('.widget.LinkList a[href*="vk.com"] i').addClass("fa fa-vk");
    $('.widget.LinkList a[href*="mailto"] i').addClass("fa fa-envelope");
    $('.widget.LinkList a[href*="shop"] i').addClass("fa fa-shopping-cart");
    $('.widget.LinkList a[href*="feeds/posts/default"] i').addClass("fa fa-rss");
    $('.widget.LinkList a[href*="feeds/comments/default"] i').addClass("fa fa-rss");
    $('.widget.LinkList a[href*="feeds.feedburner.com"] i').addClass("fa fa-rss");
    $('.widget.LinkList a[href*="etsy.com"] i').addClass("fa fa-shopping-cart");
    $('.widget.LinkList a[href*="etsy.com"] i').addClass("fa fa-shopping-cart");
    $('.widget.LinkList a[href*="behance.net"]').addClass("behance");
    $('.widget.LinkList a[href*="facebook.com"]').addClass("facebook");
    $('.widget.LinkList a[href*="twitter.com"]').addClass("twitter");
    $('.widget.LinkList a[href*="bloglovin.com"]').addClass("bloglovin");
    $('.widget.LinkList a[href*="dribbble.com"]').addClass("dribbble");
    $('.widget.LinkList a[href*="flickr.com"]').addClass("flickr");
    $('.widget.LinkList a[href*="snapchat.com"]').addClass("snapchat");
    $('.widget.LinkList a[href*="plus.google.com"]').addClass("google-plus");
    $('.widget.LinkList a[href*="instagram.com"]').addClass("instagram");
    $('.widget.LinkList a[href*="linkedin.com"]').addClass("linkedin");
    $('.widget.LinkList a[href*="pinterest.com"]').addClass("pinterest");
    $('.widget.LinkList a[href*="vimeo.com"]').addClass("vimeo");
    $('.widget.LinkList a[href*="youtube.com"]').addClass("youtube");
    $('.widget.LinkList a[href*="vine.co"]').addClass("vine");
    $('.widget.LinkList a[href*="soundcloud.com"]').addClass("soundcloud");
    $('.widget.LinkList a[href*="reddit.com"]').addClass("reddit");
    $('.widget.LinkList a[href*="vk.com"]').addClass("vk");
    $('.widget.LinkList a[href*="facebook.com"] span').replaceWith("<span>like</span>")
});
/*]]>*/
</script>
<script type='text/javascript'>
//<![CDATA[
// Reading Time Author
! function(e) {
    e.fn.readingTime = function(n) {
        var t = {
                readingTimeTarget: ".eta",
                wordCountTarget: null,
                wordsPerMinute: 270,
                round: !0,
                lang: "en",
                lessThanAMinuteString: "",
                prependTimeString: "",
                prependWordString: "",
                remotePath: null,
                remoteTarget: null,
                success: function() {},
                error: function() {}
            },
            i = this,
            r = e(this);
        i.settings = e.extend({}, t, n);
        var a = i.settings;
        if (!this.length) return a.error.call(this), this;
        if ("it" == a.lang) var s = a.lessThanAMinuteString || "Meno di un minuto",
            l = "minute";
        else if ("fr" == a.lang) var s = a.lessThanAMinuteString || "Moins d'une minute",
            l = "minute";
        else if ("de" == a.lang) var s = a.lessThanAMinuteString || "Weniger als eine Minute",
            l = "minute";
        else if ("es" == a.lang) var s = a.lessThanAMinuteString || "Menos de un minuto",
            l = "minute";
        else if ("nl" == a.lang) var s = a.lessThanAMinuteString || "Minder dan een minuut",
            l = "minute";
        else if ("sk" == a.lang) var s = a.lessThanAMinuteString || "Menej než minútu",
            l = "minute";
        else if ("cz" == a.lang) var s = a.lessThanAMinuteString || "Méně než minutu",
            l = "minute";
        else if ("hu" == a.lang) var s = a.lessThanAMinuteString || "Kevesebb mint egy perc",
            l = "perc";
        else var s = a.lessThanAMinuteString || "Less than a minute",
            l = "minute";
        var u = function(n) {
            if ("" !== n) {
                var t = n.trim().split(/\s+/g).length,
                    i = a.wordsPerMinute / 60,
                    r = t / i;
                if (a.round === !0) var u = Math.round(r / 60);
                else var u = Math.floor(r / 60);
                var g = Math.round(r - 60 * u);
                if (a.round === !0) e(a.readingTimeTarget).text(u > 0 ? a.prependTimeString + u + " " + l : a.prependTimeString + s);
                else {
                    var o = u + ":" + g;
                    e(a.readingTimeTarget).text(a.prependTimeString + o)
                }
                "" !== a.wordCountTarget && void 0 !== a.wordCountTarget && e(a.wordCountTarget).text(a.prependWordString + t), a.success.call(this)
            } else a.error.call(this, "The element is empty.")
        };
        r.each(function() {
            null != a.remotePath && null != a.remoteTarget ? e.get(a.remotePath, function(n) {
                u(e("<div>").html(n).find(a.remoteTarget).text())
            }) : u(r.text())
        })
    }
}(jQuery);

$('.post').each(function() {

$(this).readingTime({
        readingTimeTarget: $(this).find('.eta'),
        remotePath: $(this).attr('data-file'),
        remoteTarget: $(this).attr('data-target')
    });

});

$('.post').readingTime();

//]]>
</script>
<style>
.eta{
display: inline-block;
padding-right: 5px;
}
</style>

<script>
    //<![CDATA[

windowWidth = window.innerWidth;

//]]>
    </script>
<script>
//<![CDATA[
// jquery replacetext plugin
(function(e) {
    e.fn.replaceText = function(t, n, r) {
        return this.each(function() {
            var i = this.firstChild,
                s, o, u = [];
            if (i) {
                do {
                    if (i.nodeType === 3) {
                        s = i.nodeValue;
                        o = s.replace(t, n);
                        if (o !== s) {
                            if (!r && /</.test(o)) {
                                e(i).before(o);
                                u.push(i)
                            } else {
                                i.nodeValue = o
                            }
                        }
                    }
                } while (i = i.nextSibling)
            }
            u.length && e(u).remove()
        })
    }
})(jQuery);

// Timeago jQuery plugin
(function(e) {
    if (typeof define === "function" && define.amd) {
        define(["jquery"], e)
    } else {
        e(jQuery)
    }
})(function(e) {
    function r() {
        var n = i(this);
        var r = t.settings;
        if (!isNaN(n.datetime)) {
            if (r.cutoff == 0 || Math.abs(o(n.datetime)) < r.cutoff) {
                e(this).text(s(n.datetime))
            }
        }
        return this
    }

function s(e) {
        return t.inWords(o(e))
    }

// SelectNav
window.selectnav = function() {
    "use strict";
    var e = function(e, t) {
        function c(e) {
            var t;
            if (!e) e = window.event;
            if (e.target) t = e.target;
            else if (e.srcElement) t = e.srcElement;
            if (t.nodeType === 3) t = t.parentNode;
            if (t.value) window.location.href = t.value
        }

function h(e) {
            var t = e.nodeName.toLowerCase();
            return t === "ul" || t === "ol"
        }

function p(e) {
            for (var t = 1; document.getElementById("selectnav" + t); t++);
            return e ? "selectnav" + t : "selectnav" + (t - 1)
        }

// Tabslet jQuery plugin
(function($, window, undefined) {
    $.fn.tabslet = function(options) {
        var defaults = {
            mouseevent: "click",
            attribute: "href",
            animation: false,
            autorotate: false,
            pauseonhover: true,
            delay: 500,
            active: 1,
            controls: {
                prev: ".prev",
                next: ".next"
            }
        };
        var options = $.extend(defaults, options);
        return this.each(function() {
            var $this = $(this);
            options.mouseevent = $this.data("mouseevent") || options.mouseevent;
            options.attribute = $this.data("attribute") || options.attribute;
            options.animation = $this.data("animation") || options.animation;
            options.autorotate = $this.data("autorotate") || options.autorotate;
            options.pauseonhover = $this.data("pauseonhover") || options.pauseonhover;
            options.delay = $this.data("delay") || options.delay;
            options.active = $this.data("active") || options.active;
            $this.find("> div").hide();
            $this.find("> div").eq(options.active - 1).show();
            $this.find("> ul li").eq(options.active - 1).addClass("active");
            var fn = eval(function() {
                $(this).trigger("_before");
                $this.find("> ul li").removeClass("active");
                $(this).addClass("active");
                $this.find("> div").hide();
                var currentTab = $(this).find("a").attr(options.attribute);
                if (options.animation) {
                    $this.find(currentTab).animate({
                        opacity: "show"
                    }, "slow", function() {
                        $(this).trigger("_after")
                    })
                } else {
                    $this.find(currentTab).show();
                    $(this).trigger("_after")
                }
                return false
            });
            var init = eval("$this.find('> ul li')." + options.mouseevent + "(fn)");
            init;
            var elements = $this.find("> ul li"),
                i = options.active - 1;

// Simple Tab JQuery Plugin by Taufik Nurrohman
(function(a) {
    a.fn.simplyTab = function(b) {
        b = jQuery.extend({
            active: 1,
            fx: null,
            showSpeed: 400,
            hideSpeed: 400,
            showEasing: null,
            hideEasing: null,
            show: function() {},
            hide: function() {},
            change: function() {}
        }, b);
        return this.each(function() {
            var e = a(this),
                c = e.children("[data-tab]"),
                d = b.active - 1;
            e.addClass("simplyTab").prepend('<ul class="wrap-tab"></ul>');
            c.addClass("content-tab").each(function() {
                a(this).hide();
                e.find(".wrap-tab").append('<li><a href="#">' + a(this).data("tab") + "</a></li>")
            }).eq(d).show();
            e.find(".wrap-tab a").on("click", function() {
                var f = a(this).parent().index();
                a(this).closest(".wrap-tab").find(".activeTab").removeClass("activeTab");
                a(this).addClass("activeTab");
                if (b.fx == "slide") {
                    if (c.eq(f).is(":hidden")) {
                        c.slideUp(b.hideSpeed, b.hideEasing, function() {
                            b.hide.call(e)
                        }).eq(f).slideDown(b.showSpeed, b.showEasing, function() {
                            b.show.call(e)
                        })
                    }
                } else {
                    if (b.fx == "fade") {
                        if (c.eq(f).is(":hidden")) {
                            c.hide().eq(f).fadeIn(b.showSpeed, b.showEasing, function() {
                                b.show.call(e)
                            })
                        }
                    } else {
                        if (b.fx == "fancyslide") {
                            if (c.eq(f).is(":hidden")) {
                                c.slideUp(b.hideSpeed, b.hideEasing, function() {
                                    b.hide.call(e)
                                }).eq(f).delay(b.hideSpeed).slideDown(b.showSpeed, b.showEasing, function() {
                                    b.show.call(e)
                                })
                            }
                        } else {
                            if (c.eq(f).is(":hidden")) {
                                c.hide().eq(f).show()
                            }
                        }
                    }
                }
                b.change.call(e);
                return false
            }).eq(d).addClass("activeTab")
        })
    }
})(jQuery);

// SmoothScroll for websites v1.2.1
! function() {
    function e() {
        var e = !1;
        e && c("keydown", r), v.keyboardSupport && !e && u("keydown", r)
    }

function n(e) {
        x || t();
        var n = e.target,
            r = l(n);
        if (!r || e.defaultPrevented || s(w, "embed") || s(n, "embed") && /\.pdf/i.test(n.src)) return !0;
        var a = e.wheelDeltaX || 0,
            i = e.wheelDeltaY || 0;
        return a || i || (i = e.wheelDelta || 0), !v.touchpadSupport && f(i) ? !0 : (Math.abs(a) > 1.2 && (a *= v.stepSize / 120), Math.abs(i) > 1.2 && (i *= v.stepSize / 120), o(r, -a, -i), void e.preventDefault())
    }

function r(e) {
        var t = e.target,
            n = e.ctrlKey || e.altKey || e.metaKey || e.shiftKey && e.keyCode !== H.spacebar;
        if (/input|textarea|select|embed/i.test(t.nodeName) || t.isContentEditable || e.defaultPrevented || n) return !0;
        if (s(t, "button") && e.keyCode === H.spacebar) return !0;
        var r, a = 0,
            i = 0,
            u = l(w),
            c = u.clientHeight;
        switch (u == document.body && (c = window.innerHeight), e.keyCode) {
            case H.up:
                i = -v.arrowScroll;
                break;
            case H.down:
                i = v.arrowScroll;
                break;
            case H.spacebar:
                r = e.shiftKey ? 1 : -1, i = -r * c * .9;
                break;
            case H.pageup:
                i = .9 * -c;
                break;
            case H.pagedown:
                i = .9 * c;
                break;
            case H.home:
                i = -u.scrollTop;
                break;
            case H.end:
                var d = u.scrollHeight - u.scrollTop - c;
                i = d > 0 ? d + 10 : 0;
                break;
            case H.left:
                a = -v.arrowScroll;
                break;
            case H.right:
                a = v.arrowScroll;
                break;
            default:
                return !0
        }
        o(u, a, i), e.preventDefault()
    }

function a(e) {
        w = e.target
    }

function i(e, t) {
        for (var o = e.length; o--;) z[N(e[o])] = t;
        return t
    }

function u(e, t, o) {
        window.addEventListener(e, t, o || !1)
    }

function c(e, t, o) {
        window.removeEventListener(e, t, o || !1)
    }

function s(e, t) {
        return (e.nodeName || "").toLowerCase() === t.toLowerCase()
    }

function d(e, t) {
        e = e > 0 ? 1 : -1, t = t > 0 ? 1 : -1, (k.x !== e || k.y !== t) && (k.x = e, k.y = t, M = [], C = 0)
    }

function f(e) {
        if (e) {
            e = Math.abs(e), D.push(e), D.shift(), clearTimeout(A);
            var t = D[0] == D[1] && D[1] == D[2],
                o = h(D[0], 120) && h(D[1], 120) && h(D[2], 120);
            return !(t || o)
        }
    }

function h(e, t) {
        return Math.floor(e / t) == e / t
    }

function m(e) {
        var t, o, n;
        return e *= v.pulseScale, 1 > e ? t = e - (1 - Math.exp(-e)) : (o = Math.exp(-1), e -= 1, n = 1 - Math.exp(-e), t = o + n * (1 - o)), t * v.pulseNormalize
    }

//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
/*GLOBAL SETTINGS, USER CAN CHANGE*/
var MONTH_FORMAT = [, "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
var NO_IMAGE = "https://1.bp.blogspot.com/-eAeO-DYJDws/Vkqtj4HFBFI/AAAAAAAAB0o/Q5OLsyONXM0/s1600-r/nth.png";
var POST_PER_PAGE = 9; // number of posts per page "navigation"
var LABEL_SEARCH_NUM = 9; // number of posts labels search
var POSTNAV_PREV_TEXT = "Previous"; // post nav text "previous post"
var POSTNAV_NEXT_TEXT = "Next"; // post nav text "next post"
var COMMENTS_TEXT = "Leave a Comment"; // comments text "leave a comment"

// Main Scripts 
$("#LinkList110").each(function() {
    var e = "<ul id='nav'><li><ul id='sub-menu'>";
    $("#LinkList110 li").each(function() {
        var t = $(this).text(),
            n = t.substr(0, 1),
            r = t.substr(1);
        "_" == n ? (n = $(this).find("a").attr("href"), e += '<li><a href="' + n + '">' + r + "</a></li>") : (n = $(this).find("a").attr("href"), e += '</ul></li><li><a href="' + n + '">' + t + "</a><ul id='sub-menu'>")
    });
    e += "</ul></li></ul>";
    $(this).html(e);
    $("#LinkList110 ul").each(function() {
        var e = $(this);
        if (e.html().replace(/\s| /g, "").length == 0) e.remove()
    });
    $("#LinkList110 li").each(function() {
        var e = $(this);
        if (e.html().replace(/\s| /g, "").length == 0) e.remove()
    })
});
$(document).ready(function() {
    $(".cmm-tabs").simplyTab({
        active: 1,
        fx: "fade",
        showSpeed: 400,
        hideSpeed: 400
    });
    $("#slink").click(function() {
        $('#searchbar').toggle()
    });
    $('.blogger-tab').append($('#comments'));
    $(".cmm-tabs.simplyTab .wrap-tab").wrap("<div class='cmm-tabs-header'/>");
    $('.cmm-tabs-header').prepend('<h3>' + COMMENTS_TEXT + '</h3>');
    $("#menu").show();
    $("ul#sub-menu").parent("li").addClass("hasSub");
    $("abbr.timeago").timeago();
    $(".footer-sections .widget h2").wrap("<div class='widget-title'/>");
    $(".index .post-outer,.archive .post-outer").each(function() {
        $(this).find(".block-image .thumb a").attr("style", function(e, t) {
            return t.replace("/default.jpg", "/mqdefault.jpg")
        }).attr("style", function(e, t) {
            return t.replace("s72-c", "s1600")
        })
    });
    $('.PopularPosts ul li img').each(function() {
        $(this).attr('src', function(i, src) {
            return src.replace('/default.jpg', '/mqdefault.jpg')
        }).attr('src', function(i, src) {
            return src.replace('s72-c', 's1600')
        }).attr('src', function(i, src) {
            return src.replace('w72-h72-p-nu', 's1600')
        })
    });
    $(window).scroll(function() {
        if ($(this).scrollTop() > 200) {
            $('#back-to-top').fadeIn()
        } else {
            $('#back-to-top').fadeOut()
        }
    });
    $('#back-to-top').hide().click(function() {
        $('html, body').animate({
            scrollTop: 0
        }, 800);
        return false
    });
    var tab1 = $("#sidebar_tabs #tab1 .widget h2").text();
    $(".tab-opt .opt-1 a").text(tab1);
    var tab2 = $("#sidebar_tabs #tab2 .widget h2").text();
    $(".tab-opt .opt-2 a").text(tab2);
    var tab3 = $("#sidebar_tabs #tab3 .widget h2").text();
    $(".tab-opt .opt-3 a").text(tab3);
    $("#tab1 .widget h2,#tab2 .widget h2,#tab3 .widget h2,#tab1 .widget-title,#tab2 .widget-title,#tab3 .widget-title").remove();
    $(".sidebar_tabs").tabslet({
        mouseevent: "click",
        attribute: "href",
        animation: true
    });
    if ($(".sidebar_tabs .widget").length === 0) {
        $(".sidebar_tabs").remove()
    }
});
$(document).ready(function(a) {
    var b = a("a.newer-link");
    var c = a("a.older-link");
    a.get(b.attr("href"), function(c) {
        b.html("<strong>" + POSTNAV_NEXT_TEXT + "</strong><span>" + a(c).find(".post h1.post-title").text() + "</span>")
    }, "html");
    a.get(c.attr("href"), function(b) {
        c.html("<strong>" + POSTNAV_PREV_TEXT + "</strong><span>" + a(b).find(".post h1.post-title").text() + "</span>")
    }, "html")
});
$(window).bind("load", function() {
    $('.box-title h2 a,.Label a,.postags a,.label-head a').each(function() {
        var labelPage = $(this).attr('href');
        $(this).attr('href', labelPage + '?&max-results=' + LABEL_SEARCH_NUM + '')
    })
});
$(".related-ready").each(function() {
    var b = $(this).text();
    $.ajax({
        url: "/feeds/posts/default/-/" + b + "?alt=json-in-script&max-results=3",
        type: 'get',
        dataType: "jsonp",
        success: function(e) {
            var u = "";
            var h = '<div class="related">';
            for (var i = 0; i < e.feed.entry.length; i++) {
                for (var j = 0; j < e.feed.entry[i].link.length; j++) {
                    if (e.feed.entry[i].link[j].rel == "alternate") {
                        u = e.feed.entry[i].link[j].href;
                        break
                    }
                }
                var g = e.feed.entry[i].title.$t;
                var c = e.feed.entry[i].content.$t;
                var $c = $('<div>').html(c);
                if (c.indexOf("//www.youtube.com/embed/") > -1) {
                    var p = e.feed.entry[i].media$thumbnail.url;
                    var k = p
                } else if (c.indexOf("<img") > -1) {
                    var q = $c.find('img:first').attr('src');
                    var k = q
                } else {
                    var k = NO_IMAGE
                }
                h += '<li><div class="related-thumb"><a class="related-img" href="' + u + '" style="background:url(' + k + ') no-repeat center center;background-size: cover"/></div><h3 class="related-title"><a href="' + u + '">' + g + '</a></h3></li>'
            }
            h += '</div><div class="clear"/>';
            $(".related-ready").html(h);
            $('.related-img').each(function() {
                $(this).attr('style', function(i, src) {
                    return src.replace('/default.jpg', '/hqdefault.jpg')
                }).attr('style', function(i, src) {
                    return src.replace('s72-c', 's1600')
                })
            })
        }
    })
});
window.onload = function() {
    var e = document.getElementById("mycontent");
    if (e == null) {
        window.location.href = "https://nexus-decode.blogspot.com/"
    }
    e.setAttribute("href", "https://nexus-decode.blogspot.com/");
    e.setAttribute("ref", "dofollow");
    e.setAttribute("title", "Blogger Templates");
    e.setAttribute("style", "display: inline-block!important; font-size: inherit!important; color: #888!important; visibility: visible!important; opacity: 1!important;");
    e.innerHTML = "Nexus"
}

//]]>
</script>
<script type='text/javascript'>
var postperpage=POST_PER_PAGE;
var numshowpage=5;
var upPageWord ='Prev';
var downPageWord ='Next';
var urlactivepage=location.href;
var home_page="/";
</script>
<div class='back-to-top'>
<a href='#' id='back-to-top' title='Back to Top'><i class='fa fa-long-arrow-up'></i></a>
</div>
</body>
</html>