-- corr

Scripts/AjaxControlToolkit/Debug/HtmlEditorExtender.debug.js

@@ -20,7 +20,7 @@ Sys.Extended.UI.HtmlEditorExtenderBehavior = function(element) {
     /// <getter>get_isDirty</getter>
     /// <member name="cP:AjaxControlToolkit.HtmlEditorExtender.isDirty" />
     this._isDirty = false;
-    this._viewMode = 'content';
+    this._lastMode = Sys.Extended.UI.HtmlEditorExtenderMode.Content;
 
     /// <summary>
     /// Determines whether or not to display a source view tab/button to see the source view of HtmlEditorExtender
@@ -30,6 +30,14 @@ Sys.Extended.UI.HtmlEditorExtenderBehavior = function(element) {
     /// <member name="cP:AjaxControlToolkit.HtmlEditorExtender.displaySourceTab" />
     this._displaySourceTab = false;
 
+    /// <summary>
+    /// Determines whether or not to display a preview tab/button providing access to HtmlEditorExtender<65>s preview
+    /// </summary>
+    /// <getter>get_displayPreviewTab</getter>
+    /// <setter>set_displayPreviewTab</setter>
+    /// <member name="cP:AjaxControlToolkit.HtmlEditorExtender.displayPreviewTab" />
+    this._displayPreviewTab = false;
+
     /// <summary>
     /// Button width in pixels
     /// </summary>
@@ -119,6 +127,18 @@ Sys.Extended.UI.HtmlEditorExtenderBehavior = function(element) {
         cssClasses: ['ajax__html_editor_extender_button ajax__html_editor_extender_source']
     };
 
+    this._buttonPreviewTemplate = {
+        nodeName: 'input',
+        properties: {
+            type: 'button',
+            style: {
+                width: this._ButtonWidth + 'px',
+                height: this._ButtonHeight + 'px'
+            }
+        },
+        cssClasses: ['ajax__html_editor_extender_button ajax__html_editor_extender_preview']
+    };
+
     this._textboxTemplate = {
         nodeName: 'input',
         properties: {
@@ -145,15 +165,15 @@ Sys.Extended.UI.HtmlEditorExtenderBehavior = function(element) {
         cssClasses: ['ajax__html_editor_extender_buttoncontainer']
     };
 
-    this._topButtonContainerTemplate2 = {
+    this._bottomButtonsContainerTemplate = {
         nodeName: 'div',
         properties: {
-            id: id + '_ExtenderButtonContainer2',
+            id: id + '_ExtenderModeButtonContainer',
             style: {
                 clear: 'both'
             }
         },
-        cssClasses: ['ajax__html_editor_extender_buttoncontainer2']
+        cssClasses: ['ajax__html_editor_extender_modebuttonscontainer']
     };
 
     // variables
@@ -168,14 +188,16 @@ Sys.Extended.UI.HtmlEditorExtenderBehavior = function(element) {
     this._toolbarButtons = null;
     this._editableDiv = null;
     this._sourceViewDiv = null;
+    this._previewDiv = null;
     this._topButtonContainer = null;
-    this._topButtonContainer2 = null;
+    this._bottomButtonsContainer = null;
     this._buttons = [];
     this._requested_buttons = new Array();
     this._colorPicker = null;
     this._txtBoxForColor = null;
     this._contentViewButton = null;
     this._sourceViewButton = null;
+    this._previewButton = null;
     this._popupDiv = null;
     this._btnDone = null;
     this._btnCancel = null;
@@ -187,6 +209,7 @@ Sys.Extended.UI.HtmlEditorExtenderBehavior = function(element) {
     this._contentViewClickDelegate = null;
     this._sourceViewClickDelegate = null;
     this._sourceViewDivOnBlurDelegate = null;
+    this._previewClickDelegate = null;
     this._imageCancelClickDelegate = null;
 
     // Hook into the ASP.NET WebForm_OnSubmit function to encode html tags prior to submission
@@ -203,15 +226,20 @@ Sys.Extended.UI.HtmlEditorExtenderBehavior.prototype = {
         HtmlEditorExtender_editableDivs[HtmlEditorExtender_editableDivs.length] = this;
 
         this._button_list = new Array();
+        var focused = this._element === document.activeElement;
         this._createContainer();
         this._createTopButtonContainer();
         this._createButton();
         this._createEditableDiv();
 
-        if(this.get_displaySourceTab()) {
+        if(this.get_displaySourceTab())
             this._createSourceViewDiv();
-            this._createTopButtonContainer2();
-        }
+
+        if(this.get_displayPreviewTab())
+            this._createPreviewDiv();
+
+        if(this._hasMultipleTabs())
+            this._createBottomButtonsContainer();
 
         // get form that contains textbox
         var formElement = this._textbox._element.parentNode;
@@ -247,9 +275,14 @@ Sys.Extended.UI.HtmlEditorExtenderBehavior.prototype = {
         this._editableDivOnFocusDelegate = Function.createDelegate(this, this._editableDiv_onfocus);
         this._btnClickDelegate = Function.createDelegate(this, this._executeCommand);
 
-        if(this.get_displaySourceTab()) {
-            this._contentViewClickDelegate = Function.createDelegate(this, this._contentView_click);
+        if(this.get_displaySourceTab())
             this._sourceViewClickDelegate = Function.createDelegate(this, this._sourceView_click);
+
+        if(this.get_displayPreviewTab())
+            this._previewClickDelegate = Function.createDelegate(this, this._preview_click);
+
+        if(this._hasMultipleTabs()) {
+            this._contentViewClickDelegate = Function.createDelegate(this, this._contentView_click);
             this._sourceViewDivOnBlurDelegate = Function.createDelegate(this, this._sourceViewDiv_onblur);
         }
 
@@ -259,11 +292,19 @@ Sys.Extended.UI.HtmlEditorExtenderBehavior.prototype = {
         $addHandler(this._editableDiv, 'focus', this._editableDivOnFocusDelegate, true);
         $addHandler(this._topButtonContainer, 'click', this._btnClickDelegate, true);
 
-        if(this.get_displaySourceTab()) {
-            $addHandler(this._contentViewButton, 'click', this._contentViewClickDelegate, true);
+        if(this.get_displaySourceTab())
             $addHandler(this._sourceViewButton, 'click', this._sourceViewClickDelegate, true);
+
+        if(this.get_displayPreviewTab())
+            $addHandler(this._previewButton, 'click', this._previewClickDelegate, true);
+
+        if(this._hasMultipleTabs()) {
+            $addHandler(this._contentViewButton, 'click', this._contentViewClickDelegate, true);
             $addHandler(this._sourceViewDiv, 'blur', this._sourceViewDivOnBlurDelegate, true);
         }
+
+        if(focused)
+            this._editableDiv.focus();
     },
 
     _dispose: function() {
@@ -272,9 +313,14 @@ Sys.Extended.UI.HtmlEditorExtenderBehavior.prototype = {
         $removeHandler(this._editableDiv, 'focus', this._editableDivOnFocusDelegate);
         $removeHandler(this._topButtonContainer, 'click', this._btnClickDelegate);
 
-        if(this.get_displaySourceTab()) {
-            $removeHandler(this._contentViewButton, 'click', this._contentViewClickDelegate);
+        if(this.get_displaySourceTab())
             $removeHandler(this._sourceViewButton, 'click', this._sourceViewClickDelegate);
+
+        if(this.get_displayPreviewTab())
+            $removeHandler(this.previewButton, 'click', this._previewClickDelegate);
+
+        if(this._hasMultipleTabs()) {
+            $removeHandler(this._contentViewButton, 'click', this._contentViewClickDelegate);
             $removeHandler(this._sourceViewDiv, 'blur', this._sourceViewDivOnBlurDelegate);
         }
 
@@ -284,6 +330,10 @@ Sys.Extended.UI.HtmlEditorExtenderBehavior.prototype = {
         Sys.Extended.UI.HtmlEditorExtenderBehavior.callBaseMethod(this, 'dispose');
     },
 
+    _hasMultipleTabs: function(){
+        return this.get_displaySourceTab() || this.get_displayPreviewTab();
+    },
+
     _createContainer: function() {
         var e = this.get_element();
         this._container = $common.createElementFromTemplate(this._containerTemplate, e.parentNode);
@@ -306,6 +356,8 @@ Sys.Extended.UI.HtmlEditorExtenderBehavior.prototype = {
     },
 
     _createButton: function() {
+        var self = this;
+
         var isIE = Sys.Browser.agent == Sys.Browser.InternetExplorer;
         for(i = 0; i < this._toolbarButtons.length; i++) {
             var _btn;
@@ -353,7 +405,7 @@ Sys.Extended.UI.HtmlEditorExtenderBehavior.prototype = {
                         change: function(e) {
                             var value = this.options[this.selectedIndex].value;
                             setTimeout(function() {
-                                document.execCommand("fontname", false, value);
+                                self.setFontFamily(value);
                             }, 200);
                         }
                     }
@@ -425,7 +477,7 @@ Sys.Extended.UI.HtmlEditorExtenderBehavior.prototype = {
                         change: function(e) {
                             var value = this.options[this.selectedIndex].value;
                             setTimeout(function() {
-                                document.execCommand("fontsize", false, value);
+                                self.setFontSize(value);
                             }, 200);
                         }
                     }
@@ -527,36 +579,45 @@ Sys.Extended.UI.HtmlEditorExtenderBehavior.prototype = {
 
                 this._backColor.setAttribute('unselectable', 'on');
             } else {
-                var map = {
-                    Copy: 1,
-                    Cut: 1,
-                    Paste: 1
-                };
+                _btn = $common.createElementFromTemplate({
+                    nodeName: 'input',
+                    properties: {
+                        type: 'button',
+                        id: this._id + this._toolbarButtons[i].CommandName,
+                        name: this._toolbarButtons[i].CommandName,
+                        title: this._toolbarButtons[i].Tooltip,
+                        style: {
+                            width: '23px',
+                            height: '21px'
+                        }
+                    },
+                    cssClasses: ['ajax__html_editor_extender_button ajax__html_editor_extender_' + this._toolbarButtons[i].CommandName]
+                }, this._topButtonContainer);
+                _btn.setAttribute('unselectable', 'on');
 
-                if(Sys.Browser.agent != Sys.Browser.InternetExplorer && map[this._toolbarButtons[i].CommandName]) {
-                    // don't render button
-                } else {
-                    _btn = $common.createElementFromTemplate({
-                        nodeName: 'input',
-                        properties: {
-                            type: 'button',
-                            id: this._id + this._toolbarButtons[i].CommandName,
-                            name: this._toolbarButtons[i].CommandName,
-                            title: this._toolbarButtons[i].Tooltip,
-                            style: {
-                                width: '23px',
-                                height: '21px'
-                            }
-                        },
-                        cssClasses: ['ajax__html_editor_extender_button ajax__html_editor_extender_' + this._toolbarButtons[i].CommandName]
-                    }, this._topButtonContainer);
-                    _btn.setAttribute('unselectable', 'on');
-                }
                 Array.add(this._buttons, _btn);
             }
         }
     },
 
+    setFontFamily: function(fontFamilyName) {
+        this._executeStyleWithCssCommand();
+        document.execCommand("fontname", false, fontFamilyName);
+    },
+
+    setFontSize: function(fontSize) {
+        this._executeStyleWithCssCommand();
+        document.execCommand("fontsize", false, fontSize);
+    },
+
+    _executeStyleWithCssCommand: function(){
+        var styleWithCssCmdName = 'styleWithCSS';
+        var isStyleWithCssCommandAvailable = document.queryCommandSupported(styleWithCssCmdName);
+
+        if(isStyleWithCssCommandAvailable)
+            document.execCommand(styleWithCssCmdName, false, true);
+    },
+
     _createEditableDiv: function() {
         var id = this.get_id(),
             height;
@@ -585,17 +646,22 @@ Sys.Extended.UI.HtmlEditorExtenderBehavior.prototype = {
             cssClasses: ['ajax__html_editor_extender_texteditor']
         }, this._container);
 
-        this._textbox._element.value = this._textbox._element.value.replace('&#x26;amp&#x3B;', '&#x26;');
+        this._textbox._element.value = this._textbox._element.value.replace(/&amp;/g, '&');
         this._editableDiv.innerHTML = this._textbox._element.value;
         this._oldContents = this._editableDiv.innerHTML;
 
         $common.setVisible(this._textbox._element, false);
     },
 
-    _createTopButtonContainer2: function() {
-        this._topButtonContainer2 = $common.createElementFromTemplate(this._topButtonContainerTemplate2, this._container);
-        this._contentViewButton = $common.createElementFromTemplate(this._buttonContentTemplate, this._topButtonContainer2);
-        this._sourceViewButton = $common.createElementFromTemplate(this._buttonSourceTemplate, this._topButtonContainer2);
+    _createBottomButtonsContainer: function() {
+        this._bottomButtonsContainer = $common.createElementFromTemplate(this._bottomButtonsContainerTemplate, this._container);
+        this._contentViewButton = $common.createElementFromTemplate(this._buttonContentTemplate, this._bottomButtonsContainer);
+
+        if(this.get_displaySourceTab())
+            this._sourceViewButton = $common.createElementFromTemplate(this._buttonSourceTemplate, this._bottomButtonsContainer);
+
+        if(this.get_displayPreviewTab())
+            this._previewButton = $common.createElementFromTemplate(this._buttonPreviewTemplate, this._bottomButtonsContainer);
     },
 
     _createSourceViewDiv: function() {
@@ -619,6 +685,26 @@ Sys.Extended.UI.HtmlEditorExtenderBehavior.prototype = {
         $common.setVisible(this._sourceViewDiv, false);
     },
 
+    _createPreviewDiv: function () {
+        var id = this.get_id(),
+            height = this._container.clientHeight - 25;
+
+        this._previewDiv = $common.createElementFromTemplate({
+            nodeName: 'div',
+            properties: {
+                id: id + '_ExtenderPreview',
+                style: {
+                    height: height + 'px',
+                    overflow: 'auto',
+                    clear: 'both'
+                }
+            },
+            cssClasses: ['ajax__html_editor_extender_texteditor']
+        }, this._container);
+
+        $common.setVisible(this._previewDiv, false);
+    },
+
     _editableDiv_onblur: function() {
         this._textbox._element.value = this._encodeHtml();
         this._isFocusInEditableDiv = false;
@@ -652,54 +738,89 @@ Sys.Extended.UI.HtmlEditorExtenderBehavior.prototype = {
         this._editableDiv.innerHTML = this._textbox._element.value;
     },
 
-    _contentView_click: function() {
-        if(this._viewMode != 'content') {
-            $common.setVisible(this._topButtonContainer, true);
-            $common.setVisible(this._editableDiv, true);
+    _contentView_click: function () {
+        if(this._lastMode === Sys.Extended.UI.HtmlEditorExtenderMode.Content)
+            return;
 
-            if(this._sourceViewDiv.textContent != undefined)
-                this._editableDiv.innerHTML = this._sourceViewDiv.textContent;
-            else
-                this._editableDiv.innerHTML = this._sourceViewDiv.innerText;
+        $common.setVisible(this._topButtonContainer, true);
+        $common.setVisible(this._editableDiv, true);
 
-            this._oldContents = this._editableDiv.innerHTML;
-            $common.setVisible(this._sourceViewDiv, false);
-            this._viewMode = 'content';
-        }
+        if(this._sourceViewDiv.textContent != undefined)
+            this._editableDiv.innerHTML = this._sourceViewDiv.textContent;
+        else
+            this._editableDiv.innerHTML = this._sourceViewDiv.innerText;
+
+        this._oldContents = this._editableDiv.innerHTML;
+        $common.setVisible(this._sourceViewDiv, false);
+        $common.setVisible(this._previewDiv, false);
+        this._lastMode = Sys.Extended.UI.HtmlEditorExtenderMode.Content;
     },
 
-    _sourceView_click: function() {
-        if(this._viewMode != 'source') {
-            $common.setVisible(this._sourceViewDiv, true);
+    _sourceView_click: function () {
+        if(this._lastMode === Sys.Extended.UI.HtmlEditorExtenderMode.Source)
+            return;
 
+        $common.setVisible(this._sourceViewDiv, true);
+
+        this._copyContentToSource();
+
+        this._oldContents = this._editableDiv.innerHTML;
+        $common.setVisible(this._editableDiv, false);
+        $common.setVisible(this._topButtonContainer, false);
+        $common.setVisible(this._previewDiv, false);
+        this._lastMode = Sys.Extended.UI.HtmlEditorExtenderMode.Source;
+    },
+
+    _preview_click: function () {
+        if(this._lastMode === Sys.Extended.UI.HtmlEditorExtenderMode.Preview)
+            return;
+
+        $common.setVisible(this._previewDiv, true);
+
+        if(this._lastMode === Sys.Extended.UI.HtmlEditorExtenderMode.Content)
+            this._copyContentToSource();
+
+        if(this._lastMode === Sys.Extended.UI.HtmlEditorExtenderMode.Source) {
             if(this._sourceViewDiv.textContent != undefined)
-                this._sourceViewDiv.textContent = this._editableDiv.innerHTML;
+                this._previewDiv.innerHTML = this._sourceViewDiv.textContent;
             else
-                this._sourceViewDiv.innerText = this._editableDiv.innerHTML;
-
-            this._oldContents = this._editableDiv.innerHTML;
-            $common.setVisible(this._editableDiv, false);
-            $common.setVisible(this._topButtonContainer, false);
-            this._viewMode = 'source';
+                this._previewDiv.innerHTML = this._sourceViewDiv.innerText;
         }
+
+        if(this._lastMode === Sys.Extended.UI.HtmlEditorExtenderMode.Content)
+            this._previewDiv.innerHTML = this._editableDiv.innerHTML;
+
+        $common.setVisible(this._editableDiv, false);
+        $common.setVisible(this._sourceViewDiv, false);
+        $common.setVisible(this._topButtonContainer, false);
+        this._lastMode = Sys.Extended.UI.HtmlEditorExtenderMode.Preview;
+    },
+
+    _copyContentToSource: function() {
+        var html = this._editableDiv.innerHTML;
+
+        if(/^\s*$/.test(this._editableDiv.innerText)
+            && this._editableDiv.innerHTML === "<br>")
+            html = "";
+
+        if(this._sourceViewDiv.textContent != undefined)
+            this._sourceViewDiv.textContent = this.cleanHtml(html);
+        else
+            this._sourceViewDiv.innerText = this.cleanHtml(html);
+    },
+
+    cleanHtml: function(html) {
+        return html.replace(/<br>/g, "<br />");
     },
 
     _btnCancel_click: function() {
         this._popupBehavior.hide();
     },
 
-    _attributes: {
-        style: 'st_yle_',
-        size: 'si_ze_',
-        color: 'co_lor_',
-        face: 'fa_ce_',
-        align: 'al_ign_'
-    },
-
     _rgbToHex: function(s) {
         var a = /rgb\s?\(\s?(\d+)\s?,\s?(\d+)\s?,\s?(\d+)\s?\)/.exec(s);
 
-        return '#' + (parseInt(a[3], 10) | (parseInt(a[2], 10) << 8) | (parseInt(a[1], 10) << 16)).toString(16);
+        return '#' + ("000000" + (parseInt(a[3], 10) | (parseInt(a[2], 10) << 8) | (parseInt(a[1], 10) << 16)).toString(16)).substr(-6);
     },
 
     _encodeHtml: function() {
@@ -708,22 +829,6 @@ Sys.Extended.UI.HtmlEditorExtenderBehavior.prototype = {
             elements = this._editableDiv.getElementsByTagName('*'),
             element;
 
-        for(var i = 0; element = elements[i]; i++) {
-            try {
-                element.className = '';
-                element.removeAttribute('class');
-            } catch(ex) { }
-
-            try {
-                element.id = '';
-                element.removeAttribute('id');
-            } catch(ex) { }
-
-            try {
-                element.removeAttribute('width');
-            } catch(ex) { }
-        }
-
         var html = this._editableDiv.innerHTML;
         if(isIE) {
             //force attributes to be double quoted
@@ -770,40 +875,18 @@ Sys.Extended.UI.HtmlEditorExtenderBehavior.prototype = {
     },
 
     _editableDiv_submit: function() {
-        var char = 0,
-            selection = null;
-
-        setTimeout(function() {
-            if(this._editableDiv != null)
-                this._editableDiv.focus();
-        }, 0);
-
-        if(Sys.Browser.agent != Sys.Browser.Firefox) {
-            if(document.selection) {
-                selection = document.selection.createRange();
-                selection.moveStart('character', char);
-                selection.select();
-            } else {
-                selection = window.getSelection();
-
-                if(this._editableDiv.firstChild !== null)
-                    selection.collapse(this._editableDiv.firstChild, char);
-            }
-        }
-
         this._textbox._element.value = this._encodeHtml();
     },
 
-    _isHtmlElement: function (obj) {
+    _isHtmlElement: function(obj) {
         if(obj instanceof HTMLElement)
             return true;
 
         return false;
     },
 
-    isValidTarget: function(target)
-    {
-        if (target.name == undefined
+    isValidTarget: function(target) {
+        if(target.name == undefined
             ||
             target.name == ""
             ||
@@ -813,22 +896,40 @@ Sys.Extended.UI.HtmlEditorExtenderBehavior.prototype = {
         return true;
     },
 
+    isSimpleTextDecoration: function(commandName) {
+        if(commandName)
+            return commandName.toLowerCase() == "bold"
+                || commandName.toLowerCase() == "italic"
+                || commandName.toLowerCase() == "underline";
+
+        return false;
+    },
+
     _executeCommand: function(command) {
         if(!this.isValidTarget(command.target))
             return;
 
+        var selection = this._getSelection();
+        if(selection != null) {
+            var isEditDivChild = this._isDescendantOrSelf(this._editableDiv, selection.commonAncestorContainer);
+
+            if(!isEditDivChild)
+                return;
+        }
+
         var isFireFox = Sys.Browser.agent == Sys.Browser.Firefox,
+            isWebKit = Sys.Browser.agent == Sys.Browser.Safari,
+            isIE = (Sys.Browser.agent == Sys.Browser.InternetExplorer || Sys.Browser.agent == null),
             delcolorPicker_onchange = Function.createDelegate(this, this._colorPicker_onchange);
 
-        if(isFireFox)
-            document.execCommand('styleWithCSS', false, false);
+        if(!this.isSimpleTextDecoration(command.target.name))
+            this._executeStyleWithCssCommand();
 
         var map = {
             JustifyRight: 1,
             JustifyLeft: 1,
             JustifyCenter: 1,
             JustifyFull: 1,
-            Indent: 1,
             Outdent: 1
         };
 
@@ -904,7 +1005,7 @@ Sys.Extended.UI.HtmlEditorExtenderBehavior.prototype = {
                 document.execCommand(command.target.name, false, null);
             }
         } else if(command.target.name == 'InsertImage') {
-            // if focus in not at editable div then dom error occurs                                        
+            // if focus in not at editable div then dom error occurs
             if(!this._isFocusInEditableDiv)
                 this._editableDiv.focus();
 
@@ -929,6 +1030,21 @@ Sys.Extended.UI.HtmlEditorExtenderBehavior.prototype = {
                 left: '',
                 opacity: '1'
             });
+        } else if(command.target.name == 'CleanWord') {
+            this._editableDiv.innerHTML = this.cleanWordHtml(this._editableDiv.innerHTML);
+        } else if(command.target.name == 'Indent') {
+            if(isIE)
+                document.execCommand(command.target.name, false, null);
+            else {
+                var selectionHtml = this._getSelectionHtml();
+                var indentedHtml = "<blockquote style=\"margin: 0 0 0 40px; border: none; padding: 0px;\"><div>" + selectionHtml + "</div></blockquote>";
+                document.execCommand("insertHTML", false, indentedHtml);
+            }
+        } else if(command.target.name == 'InsertHorizontalRule') {
+            if(isWebKit)
+                document.execCommand("insertHTML", false, "<hr />");
+            else
+                document.execCommand(command.target.name, false, null);
         } else {
             document.execCommand(command.target.name, false, null);
         }
@@ -938,28 +1054,86 @@ Sys.Extended.UI.HtmlEditorExtenderBehavior.prototype = {
     _colorPicker_onchange: function(e) {
         this.restoreSelection();
 
-        if(/backcolor/i.test(this._commandName)) {
+        this.setColor(this._commandName, "#" + e._selectedColor);
+    },
+
+    setColor: function(commandName, color) {
+        if(/backcolor/i.test(commandName)) {
             var isFireFox = Sys.Browser.agent == Sys.Browser.Firefox;
             if(isFireFox) {
                 document.execCommand('stylewithcss', false, true);
-                document.execCommand("hilitecolor", false, "#" + e._selectedColor);
+                document.execCommand("hilitecolor", false, color);
                 document.execCommand('stylewithcss', false, false);
             } else {
-                document.execCommand("backcolor", false, "#" + e._selectedColor);
+                document.execCommand("backcolor", false, color);
             }
-        } else
-            document.execCommand(this._commandName, false, "#" + e._selectedColor);
+        } else {
+            document.execCommand('stylewithcss', false, true);
+            document.execCommand(commandName, false, color);
+        }
     },
 
     /// <summary>
     /// Saves selected text
     /// </summary>
     /// <member name="cM:AjaxControlToolkit.HtmlEditorExtender.saveSelection" />
-    saveSelection: function () {
+    saveSelection: function() {
+        if(!(this instanceof Sys.Extended.UI.HtmlEditorExtenderBehavior))
+            return;
+
+        this._savedRange = this._getSelection();
+    },
+
+    _getSelection: function() {
         if(window.getSelection) //non IE Browsers
-            this._savedRange = window.getSelection().rangeCount && window.getSelection().getRangeAt(0);
+            return window.getSelection().rangeCount && window.getSelection().getRangeAt(0);
         else if(document.selection) //IE
-            this._savedRange = document.selection.createRange();
+            return document.selection.createRange();
+
+        return null;
+    },
+
+    _getSelectionHtml: function() {
+        var userSelection;
+
+        if(window.getSelection) {
+            userSelection = window.getSelection();
+            if(userSelection.getRangeAt)
+                var range = userSelection.getRangeAt(0);
+            else {
+                var range = document.createRange();
+                range.setStart(userSelection.anchorNode, userSelection.anchorOffset);
+                range.setEnd(userSelection.focusNode, userSelection.focusOffset);
+            }
+            var clonedSelection = range.cloneContents();
+            var div = document.createElement('div');
+            div.appendChild(clonedSelection);
+            return div.innerHTML;
+        } else if(document.selection) {
+            userSelection = document.selection.createRange();
+            return userSelection.htmlText;
+        } else
+            return '';
+    },
+
+    _isDescendantOrSelf: function(parent, child) {
+        if(!parent)
+            return false;
+
+        if(!child)
+            return false;
+
+        if(parent == child)
+            return true;
+
+        var node = child.parentNode;
+        while(node != null) {
+            if(node == parent)
+                return true;
+
+            node = node.parentNode;
+        }
+        return false;
     },
 
     /// <summary>
@@ -990,6 +1164,63 @@ Sys.Extended.UI.HtmlEditorExtenderBehavior.prototype = {
         }
     },
 
+    cleanWordHtml: function(html) {
+        html = this._cleanOP(html);
+        html = this._cleanMSO(html);
+        html = this._cleanStyleAttr(html);
+        html = this._cleanLangAttr(html);
+        html = this._cleanXmlNamespaceTags(html);
+        html = this._cleanComments(html);
+        html = this._cleanFontFamily(html);
+        html = this._cleanSpan(html);
+        html = this._cleanB(html);
+        return html;
+    },
+
+    _cleanOP: function(html) {
+        html = html.replace(/<o:p>\s*<\/o:p>/g, '');
+        html = html.replace(/<o:p>[\s\S]*?<\/o:p>/g, '&nbsp;');
+        return html;
+    },
+
+    _cleanMSO: function(html) {
+        return html.replace(/\s*mso-[^:]+:[^;"]+;?/gi, '');
+    },
+
+    _cleanFontFamily: function(html) {
+        return html.replace(/\s*FONT-FAMILY:[^;"]*;?/gi, '');
+    },
+
+    _cleanSpan: function(html) {
+        html = html.replace(/<SPAN\s*[^>]*>\s*&nbsp;\s*<\/SPAN>/gi, '&nbsp;');
+        html = html.replace(/<SPAN\s*[^>]*><\/SPAN>/gi, '');
+        html = html.replace(/<SPAN\s*>([\s\S]*?)<\/SPAN>/gi, '$1');
+        html = html.replace(/<span>\s*<\/span>/gi, '');
+        return html;
+    },
+
+    _cleanStyleAttr: function(html) {
+        return html.replace(/<(\w[^>]*) style="([^\"]*)"([^>]*)/gi, "<$1$3");
+    },
+
+    _cleanLangAttr: function(html) {
+        return html.replace(/<(\w[^>]*) lang=([^ |>]*)([^>]*)/gi, "<$1$3");
+    },
+
+    _cleanXmlNamespaceTags: function(html) {
+        return html.replace(/<\/?\w+:[^>]*>/gi, '');
+    },
+
+    _cleanComments: function(html) {
+        return html.replace(/<\!--[\s\S]*?-->/g, '');
+    },
+
+    _cleanB: function(html) {
+        html = html.replace(/<b>\s*&nbsp;\s*<\/b>/gi, '');
+        html = html.replace(/<b>\s*<\/b>/gi, '');
+        return html;
+    },
+
     _elementVisible: function(obj, flag) {
         if(obj.tagName == 'FORM')
             return;
@@ -1035,7 +1266,7 @@ Sys.Extended.UI.HtmlEditorExtenderBehavior.prototype = {
         }
     },
 
-    get_buttonWidth: function () {
+    get_buttonWidth: function() {
         return this._ButtonWidth;
     },
     get_ButtonWidth: function() {
@@ -1043,8 +1274,8 @@ Sys.Extended.UI.HtmlEditorExtenderBehavior.prototype = {
         return this.get_buttonWidth();
     },
 
-    set_buttonWidth: function (value) {
-        if (this._ButtonWidth != value) {
+    set_buttonWidth: function(value) {
+        if(this._ButtonWidth != value) {
             this._ButtonWidth = value;
             this.raisePropertyChanged('ButtonWidth');
         }
@@ -1057,7 +1288,7 @@ Sys.Extended.UI.HtmlEditorExtenderBehavior.prototype = {
     get_buttonHeight: function() {
         return this._ButtonHeight;
     },
-    get_ButtonHeight: function () {
+    get_ButtonHeight: function() {
         Sys.Extended.Deprecated("get_ButtonHeight()", "get_buttonHeight()");
         return this.get_buttonHeight();
     },
@@ -1068,12 +1299,12 @@ Sys.Extended.UI.HtmlEditorExtenderBehavior.prototype = {
             this.raisePropertyChanged('ButtonHeight');
         }
     },
-    set_ButtonHeight: function (value) {
+    set_ButtonHeight: function(value) {
         Sys.Extended.Deprecated("set_ButtonHeight(value)", "set_buttonHeight(value)");
         this.set_buttonHeight();
     },
 
-    get_toolbarButtons: function () {
+    get_toolbarButtons: function() {
         return this._toolbarButtons;
     },
     get_ToolbarButtons: function() {
@@ -1087,7 +1318,7 @@ Sys.Extended.UI.HtmlEditorExtenderBehavior.prototype = {
             this.raisePropertyChanged('ToolbarButtons');
         }
     },
-    set_ToolbarButtons: function (value) {
+    set_ToolbarButtons: function(value) {
         Sys.Extended.Deprecated("set_ToolbarButtons(value)", "set_ToolbarButtons(value)");
         this.set_toolbarButtons(value);
     },
@@ -1103,6 +1334,17 @@ Sys.Extended.UI.HtmlEditorExtenderBehavior.prototype = {
         }
     },
 
+    get_displayPreviewTab: function () {
+        return this._displayPreviewTab;
+    },
+
+    set_displayPreviewTab: function (value) {
+        if(this._displayPreviewTab != value) {
+            this._displayPreviewTab = value;
+            this.raisePropertyChanged('DisplayPreviewTab');
+        }
+    },
+
     /// <summary>
     /// Fires when text change occurs
     /// </summary>
@@ -1188,4 +1430,10 @@ ajaxClientUploadComplete = function(sender, e) {
             htmlEditorExtender._savedRange.insertNode(node);
         }
     }
+};
+
+Sys.Extended.UI.HtmlEditorExtenderMode = {
+    Content: 0,
+    Source: 1,
+    Preview: 2
 };