HtmlEditorExtender Default Styles

Question

I've got an ajax HtmlEditorExtender on my page, like described in this:

http://www.asp.net/ajaxLibrary/AjaxControlToolkitSampleSite/HTMLEditorExtender/HTMLEditorExtender.aspx

The problem is, it didn't come with any default styling. As a result, I have a bunch of plain buttons with no images or anything. I tried finding this so-called "Editor.css" page as described here: http://www.asp.net/ajaxlibrary/act_HTMLEditor.ashx, but it doesn't seem to exist anywhere. It does this on my dev server, but on my production server, it does nothing (just a plain textbox). Can anyone please help?

My aspx code is below

<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="New.aspx.cs" Inherits="C4G.NPO.Themes.New" %>
<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
    <script type="text/javascript">
        function colorChanged(sender) {
            sender.get_element().style.color = "#" + sender.get_selectedColor();
        }
    </script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#Editor").wysiwyg();
        });
    </script>
    <div id="MainContent">
        <h1>Add a New Theme</h1>
        <div class="Form" style="width: 600px;">
            <div class="FormRow">
                <asp:Label ID="Label1" runat="server" Text="Name"></asp:Label><asp:TextBox ID="NameTextBox" runat="server"></asp:TextBox>
            </div>
            <div class="FormRow">
                <asp:Label ID="Label2" runat="server" Text="Description"></asp:Label><asp:TextBox ID="DescriptionTextBox" runat="server" TextMode="MultiLine"></asp:TextBox>
            </div>
            <div class="FormRow">
                <asp:TextBox runat="server" ID="Editor"></asp:TextBox>
                <ajaxToolkit:HtmlEditorExtender ID="HtmlEditorExtender1" 
                    TargetControlID="Editor" DisplaySourceTab="true" 
                    runat="server">
                    <Toolbar> 
                        <ajaxToolkit:Undo />
                        <ajaxToolkit:Redo />
                        <ajaxToolkit:Bold />
                        <ajaxToolkit:Italic />
                        <ajaxToolkit:Underline />
                        <ajaxToolkit:StrikeThrough />
                        <ajaxToolkit:Subscript />
                        <ajaxToolkit:Superscript />
                        <ajaxToolkit:JustifyLeft />
                        <ajaxToolkit:JustifyCenter />
                        <ajaxToolkit:JustifyRight />
                        <ajaxToolkit:JustifyFull />
                        <ajaxToolkit:InsertOrderedList />
                        <ajaxToolkit:InsertUnorderedList />
                        <ajaxToolkit:CreateLink />
                        <ajaxToolkit:UnLink />
                        <ajaxToolkit:RemoveFormat />
                        <ajaxToolkit:SelectAll />
                        <ajaxToolkit:UnSelect />
                        <ajaxToolkit:Delete />
                        <ajaxToolkit:Cut />
                        <ajaxToolkit:Copy />
                        <ajaxToolkit:Paste />
                        <ajaxToolkit:BackgroundColorSelector />
                        <ajaxToolkit:ForeColorSelector />
                        <ajaxToolkit:FontNameSelector />
                        <ajaxToolkit:FontSizeSelector />
                        <ajaxToolkit:Indent />
                        <ajaxToolkit:Outdent />
                        <ajaxToolkit:InsertHorizontalRule />
                        <ajaxToolkit:HorizontalSeparator />
                        <ajaxToolkit:InsertImage />
                    </Toolbar>
                </ajaxToolkit:HtmlEditorExtender>
            </div>
            <div class="FormRow">

            </div>
        </div>
    </div>
</asp:Content>

And just in case, here's my web.config file:

<?xml version="1.0" encoding="utf-8"?>
<!--
  For more information on how to configure your ASP.NET application, please visit
  http://go.microsoft.com/fwlink/?LinkId=169433
  -->
<configuration>
  <configSections>
    <!-- For more information on Entity Framework configuration, visit http://go.microsoft.com/fwlink/?LinkID=237468 -->
    <section name="entityFramework" type="System.Data.Entity.Internal.ConfigFile.EntityFrameworkSection, EntityFramework, Version=6.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089" requirePermission="false" />
    <sectionGroup name="system.web">
      <section name="sanitizer" requirePermission="false" type="AjaxControlToolkit.Sanitizer.ProviderSanitizerSection, AjaxControlToolkit"/>
    </sectionGroup>
  </configSections>
  <connectionStrings>
    Connection Strings Here
  </connectionStrings>
  <system.web>
    <sanitizer defaultProvider="HtmlAgilityPackSanitizerProvider">
      <providers>
        <add name="HtmlAgilityPackSanitizerProvider" type="AjaxControlToolkit.Sanitizer.HtmlAgilityPackSanitizerProvider"></add>
      </providers>
    </sanitizer>
    <customErrors mode="Off" />
    <compilation debug="true" targetFramework="4.5" />
    <httpRuntime targetFramework="4.5" />
    <pages>
      <namespaces>
        <add namespace="System.Web.Optimization" />
        <add namespace="Microsoft.AspNet.Identity" />
      </namespaces>
      <controls>
        <add assembly="Microsoft.AspNet.Web.Optimization.WebForms" namespace="Microsoft.AspNet.Web.Optimization.WebForms" tagPrefix="webopt" />
        <add tagPrefix="ajaxToolkit" assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" /></controls>
    </pages>
    <membership>
      <providers>
        <!--
          ASP.NET Membership is disabled in this template. Please visit the following link http://go.microsoft.com/fwlink/?LinkId=301889 to learn about the ASP.NET Membership support in this template
        -->
        <clear />
      </providers>
    </membership>
    <profile>
      <providers>
        <!--
          ASP.NET Membership Profile is disabled in this template. Please visit the following link http://go.microsoft.com/fwlink/?LinkId=301889 to learn about the ASP.NET Membership support in this template
        -->
        <clear />
      </providers>
    </profile>
    <roleManager>
      <!--
            ASP.NET Membership Role is disabled in this template. Please visit the following link http://go.microsoft.com/fwlink/?LinkId=301889 to learn about the ASP.NET Membership support in this template
        -->
      <providers>
        <clear />
      </providers>
    </roleManager>
    <!--
            If you are deploying to a cloud environment that has multiple web server instances,
            you should change session state mode from "InProc" to "Custom". In addition,
            change the connection string named "DefaultConnection" to connect to an instance
            of SQL Server (including SQL Azure and SQL  Compact) instead of to SQL Server Express.
      -->
    <sessionState mode="InProc" customProvider="DefaultSessionProvider">
      <providers>
        <add name="DefaultSessionProvider" type="System.Web.Providers.DefaultSessionStateProvider, System.Web.Providers, Version=1.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" connectionStringName="DefaultConnection" />
      </providers>
    </sessionState>
  </system.web>
  <system.webServer>
    <modules runAllManagedModulesForAllRequests="true" />
  </system.webServer>
  <entityFramework>
    <defaultConnectionFactory type="System.Data.Entity.Infrastructure.LocalDbConnectionFactory, EntityFramework">
      <parameters>
        <parameter value="v11.0" />
      </parameters>
    </defaultConnectionFactory>
    <providers>
      <provider invariantName="System.Data.SqlClient" type="System.Data.Entity.SqlServer.SqlProviderServices, EntityFramework.SqlServer" />
    </providers>
  </entityFramework>
</configuration>

This is what I get:

Answer 1

Are you having this problem in your development environment or on your server (or both)?

The images come from a file called "WebResource.axd" - something you won't see in your project but gets automatically generated by the AjaxControlToolkit library. Without seeing your code or an example of the problem, my guess is that your library is probably not set up correctly in your project.

An easy way to set it up is to use the Library Package Manager (Nuget) to install the library into your web site. That will not only setup the references, but also configure your web.config. FYI, I just did the following to test:

1) Created a new empty ASP.NET project in Visual Studio 2) Added a new webform to the project 3) Copied the sample HTML Editor markup from the page you provided and pasted it into my new form 4) Added a ToolkitScriptManager and TextBox to the page, just under the form and before the HTML Editor:

<ajaxToolkit:ToolkitScriptManager ID="tsm" runat="server"></ajaxToolkit:ToolkitScriptManager>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>

5) Added the following property to the markup of the HTML Editor (I don't advise you do this - I only did this for the sake of testing quickly):

EnableSanitization="false"

I would try this yourself, and if it works, compare your two projects for differences. If it does not, update this post with a publicly facing link to your site (if possible) or your markup for the HTML editor.