Customizing the Appearance of HtmlEditorExtender

Having an ajax HtmlEditorExtender featured on my webpage has been quite a challenge. I followed the instructions provided here:

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

The issue arises from the lack of default styling in the extender, resulting in plain buttons sans images or any visual appeal. While searching for the elusive "Editor.css" page mentioned at this link: http://www.asp.net/ajaxlibrary/act_HTMLEditor.ashx, it appears to be non-existent. The feature works fine on my development server but falls flat on my production server (just renders as a plain textbox). Any insights on how to tackle this?

Below is a snippet of my aspx code:

<%@ 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>

In addition, my web.config file for reference:

<?xml version="1.0" encoding="utf-8"?>
...
insert your configuration settings here
...
</configuration>

That pretty much sums up the current situation. Hoping for some assistance!

Answer â„–1

Are you experiencing this issue in your development environment, on your server, or both?

The images are sourced from a file named "WebResource.axd," which is automatically generated by the AjaxControlToolkit library and may not be visible in your project. It's likely that the library isn't configured correctly in your project without seeing your code or an example of the problem.

An effortless way to configure it is by using the Library Package Manager (Nuget) to install the library into your website. This will not only set up the references but also adjust your web.config. For testing purposes, I followed these steps:

1) Initialized 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 provided page and pasted it onto my new form 4) Inserted a ToolkitScriptManager and TextBox 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) Included the following property in the HTML Editor markup (I don't recommend doing this - it was solely for quick testing):

EnableSanitization="false"

I suggest trying this procedure yourself. If it works, compare your projects for any discrepancies. If it doesn't work, update this post with either a public link to your site (if possible) or the HTML editor markup.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to recreate this base with shadow, highlight effects, and a color that's not flat?

Click here to view the image I have successfully recreated part of it: a bottom with rounded corners, solid border, and solid colored background. However, I am struggling with achieving certain effects such as the highlighted top portion - where the backg ...

Element does not cross both explicit and implicit columns

When working in a grid container with only 1 column and 1 row, if there is an implicit column in the first row, how can an element in the second row (as shown by the green column in the example) span across both the explicit and implicit columns? I appreci ...

HTML links have been disabled

I have been making updates to the charity website I manage, heroinitiative.org. You can view the revamp progress here: (please note that this is not live code, it is simply for my boss to see the progress and does not need to be kept secret, hence why I a ...

Seamless scrolling experience achieved after implementing a header that appears when scrolling up

My goal is to create a header with the following functionalities: Initially displays with a transparent background Upon scrolling down the page by 25px, it will dynamically add the header--maroon class to the header, which alters the background color and ...

Global.asax.cs does not support HttpContext usage

I'm currently troubleshooting an issue with my code in the global.asax.cs file. protected void Application_Start(object sender, EventArgs e) { string logFile = HttpContext.Current.Request.PhysicalApplicationPath + "log4net.config"; } Everything ...

Interactive preview of PDFs with pdf.js adaptation

How can I update my PDF preview when resizing the window? Currently, the canvas resizes but the PDF preview remains the same size. I am struggling to find a solution for this. var myState = { pdf: null, currentPage: 1, zoom ...

Disabling Highchart datalabels when the window is resized

While attempting to implement a pie chart using Highcharts, I have encountered an issue with the datalabels getting cropped on very low resolutions. I tried adding a windows.resize within the formatter function but it did not work. Below is the current c ...

Update background to full screen and include text when hovering over DIV

Currently, I am utilizing Bootstrap and have a layout with 6 columns containing icons/text within. I desire to implement a hover effect where each column triggers a background change in transition for the entire section. In addition, text and button elemen ...

The top border of the body element is contained within the viewport and does not

Looking to add a purple line across the top of my website without using an image. I've opted for the border-top property on the body element. However, when resizing the browser window, the purple line only remains in the viewport area, resulting in a ...

Steps to enable overflow: 'scroll' for components generated dynamically

When developing a React application, I encounter an issue with creating new components dynamically inside a container. The problem arises when the height of the container gets exceeded by the newly added items, and I aim to make the container scrollable in ...

.cshtml fusion turns sour

My attempt to create a loop that displays small boxes led me to the following code snippet with unexpected results: (code) : <div class="row"> <div class="col-lg-3 col-xs-6"> <!-- small box --> <!-- please change the addr ...

Tips for Implementing jQuery UI Dialog as a Confirmation Dialog for Form Submissions in ASP .NET

I am currently exploring the possibilities of utilizing jQuery UI or a different dialog plugin to replace the default Confirm dialog. While there are numerous similar inquiries and responses on StackOverflow, such as: jquery dialog: confirm the click on a ...

Unable to generate specified type in C# web service

After uploading my Web Service to the hosting platform (somee.com), I encountered an error when trying to run it. The code works perfectly on my local machine, so I am confused as to why it doesn't work on the host. Can anyone provide guidance on how ...

Querying in SQL using LINQ

I need assistance converting a SQL Query into LINQ format for C# .NET 3.5 select distinct location, country from Customer where Customer_Code ='1001'; The SQL Query is working fine, but I am encountering an error when trying to use the LINQ q ...

The smooth scrolling effect I had programmed suddenly came to a halt

I have a simple jQuery script that allows for smooth navigation through a website using animated scrolling. jQuery(".main_menu li a").click(function() { var href = jQuery(this).attr('href'); if(jQuery(this).html() == 'Home') ...

Is there a way to conceal one column in a row and display only the second column from a medium screen to a small screen using Bootstrap 5?

I am currently working on creating a row with two columns, one being the left_bar column and the other a large image. My goal is to display only the large image (column 2) when the screen size changes from medium to small breakpoints, hiding the left_bar c ...

The appropriate use of spacing after text in the context of HTML and

Why is it that when I add padding or margin, no extra space is created after the text? Here is the output: https://i.sstatic.net/1MwjE.png I have tried adding padding and margin after the Stay Tuned text, but it seems to be not working. Any insights on ...

Leveraging the CSS-Element-Queries Library for emulating the functionality of CSS media queries

Recently, I used a nifty CSS-Element-Queries tool to perform basic element manipulations that trigger whenever the window is resized. In simple terms, my goal was to dynamically adjust an element's attribute based on the current width of the window â ...

Validation error detected in the textbox fields

I have incorporated Bootstrap into my application. For a specific functionality, I am dynamically creating dropdown and textbox controls based on a count and implementing validation. However, the validation seems to be malfunctioning only for the textbox ...

I aim to display a well-optimized mobile view by utilizing Bootstrap CSS

I need my website to be mobile responsive and I want the mobile view to have specific changes. Simply adding cd-xs-12 or even cd-sm-12 is not achieving the desired outcome. https://i.sstatic.net/0GU2h.jpg This is the current code I have: ...