Microsoft Computing: WYSIWYG HTML Editing in Internet Explorer (5.5+/Win)

Microsoft

Tools

Typography

Smaller Small Medium Big Bigger
Default Helvetica Segoe Georgia Times
Reading Mode

In doing some late-night research for a recent community-based software project, I stumbled across a very cool open-source product/piece of code from interactivetools.com. Called htmlArea, it exploits an interesting capability in Internet Explorer 5.5 and higher in Windows. With this code and some very minor tweaks, your HTML

form fields become full-fledged WYSIWYG HTML editors with capabilities similar to those in Outlook Express (editing HTML emails) and FrontPage. <br><br>One of the things I like best about this code is that, in other browsers that don't support the WYSIWYG code, the appearance of the text degrades automatically to a standard <textarea>. Another thing I like about it is that it's completely free and open source! Not only that, but it works with any Web server application!<br><br>If you've ever used any MS-based editing program, you'll feel comfortable in this editor, and if not, you can flip to HTML mode and edit the generated HTML yourself. When editing, CTL-B makes highlighted text <b>bold</b>, and CTL-I does <i>italics</i>, and other keys (with the possible exception of undo, which I had to press twice) work as expected. You can change a font's face, color, and size and see the results of your changes right on screen. It's got pop-up dialogs for inserting image references, colors, and tables. It can even pop-up a "fullscreen" editor. It will do bulleted and numbered lists as well as indents and outdents. Figure 1 shows a screen shot of the tool in action. <a href="http://bsing.com/bs/WYSIWYGTest">Click here</a> to try it, then come back to learn how easy it is to fit in your applications.<br><br><a href="http://www.mcpressonline.com/articles/images/2002/WYSIWYG%20HTML%20Editing%20in%20Internet%20Explorer%20(5.5%2BWin)%20V400.png"> <img height=367 width=450 src="http://www.mcpressonline.com/articles/images/2002/WYSIWYG%20HTML%20Editing%20in%20Internet%20Explorer%20(5.5%2BWin)%20V400.png" alt="http://www.mcpressonline.com/articles/images/2002/WYSIWYG%20HTML%20Editing%20in%20Internet%20Explorer%20(5.5%2BWin)%20V400.png" border="0" > </a> <p><b>Figure 1: The gray area in the center of the page is a WYSIWYG HTML editor. (Click image to enlarge.)</b><br></p> </p> <h2> Getting It into Your Web Applications</h2> <p><a name="Heading12"></a>The <a href="http://www.interactivetools.com/products/htmlarea/documentation.html#setup1">installation instructions</a> are very simple. First, you copy some files (provided) onto your Web server. Then, for the pages where you need the WYSIWYG editing capability, you paste the provided Javascript code into the <HEAD> area. Next, you add three simple lines of code for each <textarea> you need. Bamma-lamma, you've got WYSIWYG text input areas!<br><br>I have a version of it in my <a href="http://www.bsing.com/bs/Blogs/About">blogging application</a>, so I use it daily on my blogs. So far, I've been very pleased with its performance. It's not a 100% replacement for a standalone HTML editor, but it can sure come in handy when you need decent rich-text formatting on the fly.<br><br>Figure 2 shows the minimal amount of code required on the page to make it work. Since most of the code is provided for you, all you really have to do is decide which text areas you want to make WYSIWYG-capable.</p> <pre></pre><TABLE cellspacing="0" border="0" align="center"><tbody><TR><TD align="center" bgcolor="blue"><TABLE cellspacing="0" cellpadding="2" border="0" width="100%"><tbody><TR><TD align="left" bgcolor="#ebebeb" ><div><tt> <font face="Courier New" size="1"><HTML><HEAD></font></tt><font size="1"><br> </font><tt><font face="Courier New" size="1"><title>BSing.com - Add Discussion</title></HEAD></font></tt><font size="1"><br> </font><tt><font face="Courier New" size="1"><body></font></tt><font size="1"><br><br><br> </font><tt><font face="Courier New" size="1"></font></tt><font size="1"><br> </font><tt><font face="Courier New" size="1"><script language="Javascript1.2" src="/htmlarea/editor.js"></script></font></tt><font size="1"><br> </font><tt><font face="Courier New" size="1"><script></font></tt><font size="1"><br> </font><tt><font face="Courier New" size="1">// set this to the URL of editor direcory (with trailing forward slash)</font></tt><font size="1"><br> </font><tt><font face="Courier New" size="1">// NOTE: _editor_url MUST be on the same domain as this page or the popups</font></tt><font size="1"><br> </font><tt><font face="Courier New" size="1">// won't work (due to IE cross frame/cross window security restrictions).</font></tt><font size="1"><br> </font><tt><font face="Courier New" size="1">// example: http://www.hostname.com/editor/</font></tt><font size="1"><br><br> </font><tt><font face="Courier New" size="1">_editor_url = "/htmlarea/";</font></tt><font size="1"><br> </font><tt><font face="Courier New" size="1"></script></font></tt><font size="1"><br> </font><tt><font face="Courier New" size="1"><style type="text/css"></style></font></tt><font size="1"><br> </font><tt><font face="Courier New" size="1"></font></tt><font size="1"><br> </font><tt><font face="Courier New" size="1"></font></tt><font size="1"><br><br><br> </font><tt><font face="Courier New" size="1"><FORM name=editDiscussionForm METHOD="POST" ACTION="http://your_action_url_here"></font></tt><font size="1"><br><br> </font><tt><font face="Courier New" size="1"></font></tt><font size="1"><br><br> </font><tt><font face="Courier New" size="1"><textarea name="</font><font face="Courier New" size="1" color="Red"><b>header</b></font><font face="Courier New" size="1">" rows=10 cols=75 maxlength=24000 wrap=virtual>

editor_generate('header'); // field, width, height

Figure 2: This code will create a WYSIWYG rich text editing field for IE5.5+/Win users. Most of the code is provided for you; you just paste it in.

How Does It Work?

It works on an IE-only (so far) property of HTML objects called the CONTENTEDITABLE property. If this property is turned on for an HTML object (

, etc.), then Internet Explorer adds all kinds of WYSIWYG and other editing features to the object that you tweak in your JavaScript code. The htmlArea uses regular HTML to display the toolbar and then uses JavaScript to manipulate the content of the text box (which it re-creates as an iframe) based on actions in the toolbar. </p> <p>The control's properties can be queried as to which text is selected, what the entire contents of a box are, and other useful information. The value of the <a href="http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/properties/innerhtml.asp">innerHTML</a> property of the editor control, which contains the HTML results of the text in the editor, is mirrored to a standard hidden form variable, which of course is returned when the form is submitted. On the server, you reference it just like any other form variable containing HTML, so it works in ASP, PHP, JSP, Domino, and probably every other Web application server on the market.</p> <p>Here's <a href="http://www.interactivetools.com/products/htmlarea/documentation.html#faq1">another explanation</a>. </p> <p>Suffice it to say, it just works!</p> <h2> More Goodness and the Dark Side</h2> <p><a name="Heading63"></a>Thanks to <a href="http://interactivetools.com/">interactivetools.com</a>'s generous <a href="http://www.interactivetools.com/products/htmlarea/license.html">license agreement</a>, the tool is open source and modifiable, so if there's something you don't want or need in the toolbar, you can remove it. Or you can add your own buttons. The source code is well-documented, and there is a <a href="http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/properties/innerhtml.asp">support forum</a> as well.</p> <p>On the down side, it does not support other browsers. Right now, it only adds WYSIWYG features to Internet Explorer 5.5 on Windows. Support for other browsers may be added in a future version, and Mozilla is ready (or nearly ready) with similar hooks for code like this, so it should work in other browsers soon. </p> <p>So, should you use it or not? It's a few hours time invested, but it takes advantage of features currently found only in Internet Explorer for Windows. Although that represents the largest slice of the browser pie, it still feels like stepping over to the dark side when you code for special browser features--especially for <i>that</i> browser. The good thing is that users of other browsers pay no direct penalty (assuming they can handle the JS code), so at least they're not locked out. To me, the features are worth the few hours of integration work it required to add it to <a href="http://bsing.com/">bsing.com</a>.</p> <p>If you do need cross-platform editing, one place to check is <a href="http://www.ektron.com/wysiwyg-editors.cfm">Ektron</a>, which makes a $99 solution that offers WYSIWYG editing in a cross-platform manner using Flash. There are a number of other Web-based HTML editors out there, including some done in Java. Do a <a href="http://www.google.com/search?sourceid=navclient&q=browser+based+WYSIWYG+html+editors">Google search</a> with keywords like "browser based WYSIWYG HTML editors," and you'll find loads of them. Hit the "Discuss this article" link below to share what you find!<br><br><font face="Arial"><b>Brian Singleton</b>, formerly Editor of <i>Midrange Computing</i> magazine, is a best-selling author, consultant, speaker, and trainer. He blogs and can be reached at </font><a href="http://bsing.com">http://bsing.com</a><font face="Arial">. </font></p>
																				</section>

<li class="previous">
  	<a href="/programming-other/microsoft/techtip-ms-excelthey-gotta-have-it" rel="prev">
      <i class="fa fa-caret-left"></i>
      <span>Previous Article</span>
      <strong>TechTip: MS Excel--They Gotta Have It!</strong>
    </a>
	</li>
  
  	<li class="next">
  	<a href="/programming-other/microsoft/screen-capture-software-for-windows" rel="next">
      <i class="fa fa-caret-right"></i>
      <span>Next Article</span>
      <strong>Screen Capture Software for Windows</strong>
    </a>
	</li>
    
</ul>
	</section>

</article>
												</div>
	</div>
			</div>

<div class="t3-sidebar t3-sidebar-right col-md-3 ">
				<div class="t3-module module " id="Mod1334"><div class="module-inner"><div class="module-ct">

<div class="custom"  >
	<center>
<script type="text/javascript">// <![CDATA[
if (!window.AdButler) {
			(function() {
				var s = document.createElement("script");
				s.async = true;
				s.type = "text/javascript";
				s.src = 'https://servedbyadbutler.com/app.js';
				var n = document.getElementsByTagName("script")[0];
				n.parentNode.insertBefore(s, n);
			}());
		}
// ]]></script>
<script type="text/javascript">// <![CDATA[
var AdButler = AdButler || {};
		AdButler.ads = AdButler.ads || [];
		var abkw = window.abkw || '';
		var plc261596 = window.plc261596 || 0;
		document.write('<' + 'div id="placement_261596_' + plc261596 + '"></' + 'div>');
		AdButler.ads.push({
			handler: function(opt) {
				AdButler.register(168268, 261596, [300, 250], 'placement_261596_' + opt.place, opt);
			},
			opt: {
				place: plc261596++,
				keywords: abkw,
				domain: 'servedbyadbutler.com',
				click: 'CLICK_MACRO_PLACEHOLDER'
			}
		});
// ]]></script>
</center></div>
</div></div></div><div class="t3-module module " id="Mod1639"><div class="module-inner"><div class="module-ct">

<div class="custom"  >
	<script async="async" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js" type="text/javascript"></script>

<p><ins class="adsbygoogle" style="display: block;" data-ad-client="ca-pub-6907546339095191" data-ad-slot="6374680746" data-ad-format="auto" data-full-width-responsive="true"></ins></p>
<script type="text/javascript">
	(adsbygoogle = window.adsbygoogle || []).push({});
</script></div>
</div></div></div><div class="t3-module module " id="Mod1339"><div class="module-inner"><div class="module-ct">

<div class="custom"  >
	<center>
<script type="text/javascript">// <![CDATA[
if (!window.AdButler){(function(){var s = document.createElement("script"); s.async = true; s.type = "text/javascript";s.src = 'https://servedbyadbutler.com/app.js';var n = document.getElementsByTagName("script")[0]; n.parentNode.insertBefore(s, n);}());}
// ]]></script>
<script type="text/javascript">// <![CDATA[
var AdButler = AdButler || {}; AdButler.ads = AdButler.ads || [];
var abkw = window.abkw || '';
var plc267600 = window.plc267600 || 0;
document.write('<'+'div id="placement_267600_'+plc267600+'"></'+'div>');
AdButler.ads.push({handler: function(opt){ AdButler.register(168268, 267600, [300,250], 'placement_267600_'+opt.place, opt); }, opt: { place: plc267600++, keywords: abkw, domain: 'servedbyadbutler.com', click:'CLICK_MACRO_PLACEHOLDER' }});
// ]]></script>
</center></div>
</div></div></div><div class="t3-module modulecommentscss2 " id="Mod1158"><div class="module-inner"><h3 class="module-title commentscss2"><span>LATEST COMMENTS</span></h3><div class="module-ct">

<div class="customcommentscss2"  >
	<div class="section-expanded sidebar-fixed">
<div class="cover cover-forum" data-role="cover-area">
<div>
<div class="section-contained">
<div class="cover-body">
<div class="cover-body-left">
<div class="cover-profile-content" dir="auto">
<div class="cover-profile-name-wrapper"><a href="https://disqus.com/home/forums/mcpressonline/" id="community-tab" class="publisher-nav-color" data-action="community-sidebar" data-forum="mcpressonline" data-tid="102"><img src="//a.disquscdn.com/uploads/forums/270/7761/favicon.png" alt="MC Press Online" class="cover-favicon" /></a>
<h1 class="cover-profile-name truncate-line">MC Press Online</h1>
<div class="cover-profile-action"><button class="btn-follow" data-action="toggle-follow"><span class="text-default">Follow</span><span class="symbol-following"></span> </button></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="section-contained"><nav class="cover-nav cover-nav-profile-user">
<ul class="cover-nav-options">
<li class="cover-nav-option" data-action="switch-tab" data-tab="recent"><a href="https://www.disqus.com/home/forum/mcpressonline/" class="truncate-line" title="Latest Discussions" target="_blank" rel="noopener"> <span class="hidden-md">Latest Discussions</span> </a></li>
<li class="cover-nav-option" data-action="switch-tab" data-tab="commenters"><a href="https://www.disqus.com/home/forum/mcpressonline/commenters/" class="truncate-line" title="Top Commenters" target="_blank" rel="noopener"> <span class="hidden-md">Top Commenters</span> </a></li>
</ul>
</nav></div></div>
</div></div></div><div class="t3-module modulecommentscss1 " id="Mod1157"><div class="module-inner"><div class="module-ct"><div id="recentcomments" class="dsq-widget">
	<script type="text/javascript" src="https://mcpressonline.disqus.com/recent_comments_widget.js?num_items=4&hide_avatars=0&avatar_size=32&excerpt_length=85"></script>
</div>
</div></div></div><div class="t3-module moduledonate-sidebar " id="Mod1815"><div class="module-inner"><h3 class="module-title "><span>Support MC Press Online</span></h3><div class="module-ct"><style>
td.mod_jdonation_amount .mod_jd_switch_amounts  input:checked + label {
   color:#3283b6;
   background-color:#3283b6;
   border:1px solid #3283b6;
}
td.mod_jdonation_amount .mod_jd_switch_amounts label {
	width:120px;
}

#give-donation-level-button-wrap .give-btn:hover, .give-default-level {
	background-color: #3283b6 !important;
	color: #3283b6 !important;
}

.give-total-wrap .give-currency-symbol {
	background: #3283b6;
}

.elementor-give-totals
{
	background: #4b3381;
	color: #FFFFFF;
}

.give-goal-progress .progress .bar
{
	background-color: #3283b6;
}

</style>
<form name="campaign_form" id="campaign_form" method="post" action="https://test.mcpressonline.com/donation-form">
	<div class="elementor-give-totals">
		<div class="campaign_title">
					</div>
		<div class="give-totals-shortcode-wrap">
			<div class="give-card__progress give-card__progress-custom" data-type="line" data-strokewidth="1" data-easing="linear" data-duration="800" data-color="#FFEA82" data-trailcolor="#EEEEEE" data-trailwidth="1" data-tocolor="#ED6A5A" data-width="100%" data-height="15px">  	
				<div class="give-goal-progress">
					<div class="raised">
						<span class="raised-income">
							<span class="income">$0.00</span>
							Raised:
						</span>
											</div>
									</div>
			</div>
		</div>
		<div class="donation-module-general-div">
			<div class="give-total-wrap">
				<div class="give-donation-amount form-row-wide">
					<span class="give-currency-symbol give-currency-position-before">
						$					</span>
										<input class="give-text-input give-amount-top form-control" id="rd_amount1" name="rd_amount1" type="text" inputmode="decimal" placeholder="" value="" autocomplete="off"  />
					<input type="hidden" name="rd_amount" id="rd_amount" value="" />
				</div>
			</div>
						<ul id="give-donation-level-button-wrap" class="give-donation-levels-wrap give-list-inline">
										<li>
							<button type="button" data-price-id="0" class="give-donation-level-btn give-btn give-btn-level-1 " value="12" id="amount0">$12.00</button>
						</li>
						<script type="text/javascript">
						jQuery( "#amount0" ).click(function() {
							jQuery(".give-btn").removeClass("give-default-level");
							jQuery( "#amount0" ).addClass("give-default-level");
							jQuery("#rd_amount1").val('12');
							jQuery("#rd_amount").val('12');
						});
						</script>
											<li>
							<button type="button" data-price-id="1" class="give-donation-level-btn give-btn give-btn-level-1 " value="24" id="amount1">$24.00</button>
						</li>
						<script type="text/javascript">
						jQuery( "#amount1" ).click(function() {
							jQuery(".give-btn").removeClass("give-default-level");
							jQuery( "#amount1" ).addClass("give-default-level");
							jQuery("#rd_amount1").val('24');
							jQuery("#rd_amount").val('24');
						});
						</script>
											<li>
							<button type="button" data-price-id="2" class="give-donation-level-btn give-btn give-btn-level-1 " value="36" id="amount2">$36.00</button>
						</li>
						<script type="text/javascript">
						jQuery( "#amount2" ).click(function() {
							jQuery(".give-btn").removeClass("give-default-level");
							jQuery( "#amount2" ).addClass("give-default-level");
							jQuery("#rd_amount1").val('36');
							jQuery("#rd_amount").val('36');
						});
						</script>
											<li>
							<button type="button" data-price-id="3" class="give-donation-level-btn give-btn give-btn-level-1 " value="48" id="amount3">$48.00</button>
						</li>
						<script type="text/javascript">
						jQuery( "#amount3" ).click(function() {
							jQuery(".give-btn").removeClass("give-default-level");
							jQuery( "#amount3" ).addClass("give-default-level");
							jQuery("#rd_amount1").val('48');
							jQuery("#rd_amount").val('48');
						});
						</script>
								</ul>
						<div class="give-payment-wrap">
							</div>
			<div class="give-donate-button-wrap">
				<button type="button" class="button btn btn-warning" name="btnDonate" id="btnDonate" onclick="checkDonation(this.form);">Contribute Now!</button>
			</div>
		</div>
	</div>
	
    		<input type="hidden" name="payment_method" value="os_paypal" />
		<input type="hidden" name="option" value="com_jdonation" />
	<input type="hidden" name="task" value="" />
	<input type="hidden" name="Itemid" value="0" />
	</form>
	<script type="text/javascript">
		var donationType = 2;
		var minimumAmount = 10 ;
		var maximumAmount = 1000 ; 
		function checkDonation(form) 
		{				
			var amount = 0 ;	
			
			if (!parseFloat(form.rd_amount.value)) {
				alert("Please enter a valid donation amount");
				form.rd_amount.focus();						
				return;
			}
			if (parseFloat(form.rd_amount.value) < minimumAmount) {
				alert("Minimum donation amount allowed is : $" + minimumAmount);
				form.rd_amount.focus();						
				return;
			}
			if ((maximumAmount > 0) &&  (parseFloat(form.rd_amount.value) > maximumAmount)) {
				alert("Maximum donation amount allowed is : $" + maximumAmount);
				form.rd_amount.focus();						
				return;
			}
					
            if (form.payment_method.value == '')
            {
                alert("Please choose a payment method");
                form.payment_method.focus();
                return;
            }
			//All data is valid, submit form for processing
			form.submit();
		}
	</script>	
</form></div></div></div><div class="t3-module module " id="Mod1340"><div class="module-inner"><div class="module-ct">

<div class="custom"  >
	<center>
<script type="text/javascript">// <![CDATA[
if (!window.AdButler){(function(){var s = document.createElement("script"); s.async = true; s.type = "text/javascript";s.src = 'https://servedbyadbutler.com/app.js';var n = document.getElementsByTagName("script")[0]; n.parentNode.insertBefore(s, n);}());}
// ]]></script>
<script type="text/javascript">// <![CDATA[
var AdButler = AdButler || {}; AdButler.ads = AdButler.ads || [];
var abkw = window.abkw || '';
var plc261602 = window.plc261602 || 0;
document.write('<'+'div id="placement_261602_'+plc261602+'"></'+'div>');
AdButler.ads.push({handler: function(opt){ AdButler.register(168268, 261602, [300,600], 'placement_261602_'+opt.place, opt); }, opt: { place: plc261602++, keywords: abkw, domain: 'servedbyadbutler.com', click:'CLICK_MACRO_PLACEHOLDER' }});
// ]]></script>
</center></div>
</div></div></div>
			</div>
			
			
		</div>
	
  </div>

<div class="custom"  >
	<div class="magazine-section-heading row">
<h4 class="linkwhite"><a href="https://www.mc-store.com/" target="_blank">MC-STORE.COM</a></h4>
</div>
<table style="width: 100%;" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td valign="top" align="center">
<script type="text/javascript">// <![CDATA[
if (!window.AdButler) {
						(function() {
							var s = document.createElement("script");
							s.async = true;
							s.type = "text/javascript";
							s.src = 'https://servedbyadbutler.com/app.js';
							var n = document.getElementsByTagName("script")[0];
							n.parentNode.insertBefore(s, n);
						}());
					}
// ]]></script>
<script type="text/javascript">// <![CDATA[
var AdButler = AdButler || {};
					AdButler.ads = AdButler.ads || [];
					var abkw = window.abkw || '';
					var plc220684 = window.plc220684 || 0;
					document.write('<' + 'div id="placement_220684_' + plc220684 + '"></' + 'div>');
					AdButler.ads.push({
						handler: function(opt) {
							AdButler.register(168268, 220684, [158, 238], 'placement_220684_' + opt.place, opt);
						},
						opt: {
							place: plc220684++,
							keywords: abkw,
							domain: 'servedbyadbutler.com',
							click: 'CLICK_MACRO_PLACEHOLDER'
						}
					});
// ]]></script>
</td>
<td valign="top" align="center">
<script type="text/javascript">// <![CDATA[
if (!window.AdButler) {
						(function() {
							var s = document.createElement("script");
							s.async = true;
							s.type = "text/javascript";
							s.src = 'https://servedbyadbutler.com/app.js';
							var n = document.getElementsByTagName("script")[0];
							n.parentNode.insertBefore(s, n);
						}());
					}
// ]]></script>
<script type="text/javascript">// <![CDATA[
var AdButler = AdButler || {};
					AdButler.ads = AdButler.ads || [];
					var abkw = window.abkw || '';
					var plc220687 = window.plc220687 || 0;
					document.write('<' + 'div id="placement_220687_' + plc220687 + '"></' + 'div>');
					AdButler.ads.push({
						handler: function(opt) {
							AdButler.register(168268, 220687, [158, 238], 'placement_220687_' + opt.place, opt);
						},
						opt: {
							place: plc220687++,
							keywords: abkw,
							domain: 'servedbyadbutler.com',
							click: 'CLICK_MACRO_PLACEHOLDER'
						}
					});
// ]]></script>
</td>
<td valign="top" align="center">
<script type="text/javascript">// <![CDATA[
if (!window.AdButler) {
						(function() {
							var s = document.createElement("script");
							s.async = true;
							s.type = "text/javascript";
							s.src = 'https://servedbyadbutler.com/app.js';
							var n = document.getElementsByTagName("script")[0];
							n.parentNode.insertBefore(s, n);
						}());
					}
// ]]></script>
<script type="text/javascript">// <![CDATA[
var AdButler = AdButler || {};
					AdButler.ads = AdButler.ads || [];
					var abkw = window.abkw || '';
					var plc220688 = window.plc220688 || 0;
					document.write('<' + 'div id="placement_220688_' + plc220688 + '"></' + 'div>');
					AdButler.ads.push({
						handler: function(opt) {
							AdButler.register(168268, 220688, [158, 238], 'placement_220688_' + opt.place, opt);
						},
						opt: {
							place: plc220688++,
							keywords: abkw,
							domain: 'servedbyadbutler.com',
							click: 'CLICK_MACRO_PLACEHOLDER'
						}
					});
// ]]></script>
</td>
<td valign="top" align="center">
<script type="text/javascript">// <![CDATA[
if (!window.AdButler) {
						(function() {
							var s = document.createElement("script");
							s.async = true;
							s.type = "text/javascript";
							s.src = 'https://servedbyadbutler.com/app.js';
							var n = document.getElementsByTagName("script")[0];
							n.parentNode.insertBefore(s, n);
						}());
					}
// ]]></script>
<script type="text/javascript">// <![CDATA[
var AdButler = AdButler || {};
					AdButler.ads = AdButler.ads || [];
					var abkw = window.abkw || '';
					var plc220689 = window.plc220689 || 0;
					document.write('<' + 'div id="placement_220689_' + plc220689 + '"></' + 'div>');
					AdButler.ads.push({
						handler: function(opt) {
							AdButler.register(168268, 220689, [158, 238], 'placement_220689_' + opt.place, opt);
						},
						opt: {
							place: plc220689++,
							keywords: abkw,
							domain: 'servedbyadbutler.com',
							click: 'CLICK_MACRO_PLACEHOLDER'
						}
					});
// ]]></script>
</td>
<td valign="top" align="center">
<script type="text/javascript">// <![CDATA[
if (!window.AdButler) {
						(function() {
							var s = document.createElement("script");
							s.async = true;
							s.type = "text/javascript";
							s.src = 'https://servedbyadbutler.com/app.js';
							var n = document.getElementsByTagName("script")[0];
							n.parentNode.insertBefore(s, n);
						}());
					}
// ]]></script>
<script type="text/javascript">// <![CDATA[
var AdButler = AdButler || {};
					AdButler.ads = AdButler.ads || [];
					var abkw = window.abkw || '';
					var plc220690 = window.plc220690 || 0;
					document.write('<' + 'div id="placement_220690_' + plc220690 + '"></' + 'div>');
					AdButler.ads.push({
						handler: function(opt) {
							AdButler.register(168268, 220690, [158, 238], 'placement_220690_' + opt.place, opt);
						},
						opt: {
							place: plc220690++,
							keywords: abkw,
							domain: 'servedbyadbutler.com',
							click: 'CLICK_MACRO_PLACEHOLDER'
						}
					});
// ]]></script>
</td>
<td valign="top" align="center">
<script type="text/javascript">// <![CDATA[
if (!window.AdButler) {
						(function() {
							var s = document.createElement("script");
							s.async = true;
							s.type = "text/javascript";
							s.src = 'https://servedbyadbutler.com/app.js';
							var n = document.getElementsByTagName("script")[0];
							n.parentNode.insertBefore(s, n);
						}());
					}
// ]]></script>
<script type="text/javascript">// <![CDATA[
var AdButler = AdButler || {};
					AdButler.ads = AdButler.ads || [];
					var abkw = window.abkw || '';
					var plc220691 = window.plc220691 || 0;
					document.write('<' + 'div id="placement_220691_' + plc220691 + '"></' + 'div>');
					AdButler.ads.push({
						handler: function(opt) {
							AdButler.register(168268, 220691, [158, 238], 'placement_220691_' + opt.place, opt);
						},
						opt: {
							place: plc220691++,
							keywords: abkw,
							domain: 'servedbyadbutler.com',
							click: 'CLICK_MACRO_PLACEHOLDER'
						}
					});
// ]]></script>
</td>
</tr>
</tbody>
</table></div>

</div>
	</div>

</div>

<footer id="t3-footer" class="wrap t3-footer">
  <div class="container">

<div class="col-md-4">
        
        <div class="logo">
          <div class="logo-image">
            <a href="/" title="MC Press Online">
                              <img class="logo-img" src="/images/stories/logos/MC-WEB-HEADER-290x96-overlay-dots-fade-l-r.gif" alt="MC Press Online" />
                            <span>MC Press Online</span>
            </a>
            <small class="site-slogan"></small>
          </div>
        </div>

<div class="acy-email-footer">

<div class="custom"  >
	<div class="signup">Sign up via our free email subscription services to receive our publications, bookstore offer and industry vendor notifications.</div>
<p class="acysubbuttons"> </p>
<p class="acysubbuttons"><a class="button subbutton btn btn-primary" href="/component/comprofiler/registers">Subscribe</a></p></div>

</div>
        
      </div>

<div class="col-md-8">
      	      	
      			
	<div class="t3-spotlight t3-footnav  row">
					<div class=" col-lg-3 col-md-3 col-sm-3 col-xs-6">
								<div class="t3-module module " id="Mod1097"><div class="module-inner"><h3 class="module-title "><span>MC Press Users</span></h3><div class="module-ct">

<div class="custom"  >
	<div class="joomla_user">
	<div><a href="/log-in/">Login</a>
		<div>
			<div><a href="/create-an-account">Registration</a></div>
		</div>
	</div>
</div></div>
</div></div></div><div class="t3-module module " id="Mod1091"><div class="module-inner"><h3 class="module-title "><span>Explore</span></h3><div class="module-ct">

<div class="custom"  >
	<div class="explore">
	<div><a href="/index.php?option=com_osmap&view=html&id=1&Itemid=4002&lang=en">Site Map</a></div>
	<div><a href="/general-content/privacy-policy">Privacy Policy</a></div>
</div></div>
</div></div></div>
							</div>
					<div class=" col-lg-3 col-md-3 col-sm-3 col-xs-6">
								<div class="t3-module module " id="Mod1092"><div class="module-inner"><h3 class="module-title "><span> Advertise</span></h3><div class="module-ct">

<div class="custom"  >
	<div class="advertise">
	<div><a href="/general-content/online-media-kit">Advertise</a></div>
	<div><a href="/general-content/write-for-mc-press">Write For Us</a></div>
</div></div>
</div></div></div><div class="t3-module module " id="Mod1098"><div class="module-inner"><h3 class="module-title "><span>Help</span></h3><div class="module-ct">

<div class="custom"  >
	<div class="help">
	<div><a href="/general-content/contact-us">Contact Us</a></div>
	<div><a href="/search">Search</a></div>
  <div><a href="/faq">FAQs</a></div>
</div></div>
</div></div></div>
							</div>
					<div class=" col-lg-3 col-md-3 col-sm-3 col-xs-6">
								<div class="t3-module module " id="Mod1099"><div class="module-inner"><h3 class="module-title "><span>Articles</span></h3><div class="module-ct">

<div class="custom"  >
	<div class="custom_feature">
<div><a href="/general-content/feature-articles">Feature</a></div>
<div><a href="/news">Industry News</a></div>
</div></div>
</div></div></div><div class="t3-module module " id="Mod1100"><div class="module-inner"><h3 class="module-title "><span>Resources</span></h3><div class="module-ct">

<div class="custom"  >
	<div class="custom_resources">
	<div><a href="/resource-center/coming-soon">White Papers</a></div>
	<div><a href="/resource-center/coming-soon">Webcast</a></div>
	<div><a href="/resource-center/coming-soon">Trial Software</a></div>
</div></div>
</div></div></div>
							</div>
					<div class=" col-lg-3 col-md-3 col-sm-3 col-xs-6">
								<div class="t3-module module " id="Mod1093"><div class="module-inner"><h3 class="module-title "><span>Social</span></h3><div class="module-ct">

<div class="custom"  >
	<div class="socailmedia">
<div><a href="https://twitter.com/mcpressonline" target="_blank"><i class="fa fa-twitter"> </i> Twitter</a></div>
<div><a href="https://www.facebook.com/mcpressonline/" target="_blank"><i class="fa fa-facebook"> </i> Facebook</a></div>
<div><a href="https://www.linkedin.com/company/mc-press-online-llc" target="_blank"><i class="fa fa-linkedin-square"> </i> Linked</a></div>
<div><a href="/general-content/rssfeed"><i class="fa fa-rss"> </i> RSS</a></div>
</div></div>
</div></div></div>
							</div>
			</div>

      	
      	          <div class="footer-banner">

<div class="custom"  >
	<script async="async" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js" type="text/javascript"></script>

<p><ins class="adsbygoogle" style="display: block;" data-ad-client="ca-pub-6907546339095191" data-ad-slot="6374680746" data-ad-format="auto" data-full-width-responsive="true"></ins></p>
<script type="text/javascript">
(adsbygoogle = window.adsbygoogle || []).push({});
</script></div>

</div>
      </div>

</div>
  </section>

</div>
  	</div>
  </section>

</div>
</footer>

<div id="back-to-top" data-spy="affix" data-offset-top="200" class="back-to-top hidden-xs hidden-sm affix-top">
  <button class="btn btn-primary" title="Back to Top"><span class="fa fa-angle-up"></span></button>
</div>

</div>
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-5c63616521cd1952"></script>

</body>

</html>

Analytics & Cognitive Categories

Latest Analytics & Cognitive News

Career Catgories

Latest Career News

Cloud Categories

Latest Cloud News

IT Infrastructure Categories

Latest IT Infrastructure News

News Categories

Latest News

Programming Categories

Latest Programming News

Security Categories

Latest Security News

Tools

Typography

Share This

How Does It Work?