[Solved] span backgroundcolor added to my content - how can I prevent?

[Nathan J Pledger]

Hi,

This is my first use of the Prometheous Editor, and in my first use I have found that when I post my content, the editor adds background colour styles to everything.

My editor tag is:

<telerik:RadEditor ID="radEditor" runat="server"
                    Width="100%"
                    Height="350"
                    AutoResizeHeight="true"
                    AllowScripts="false"
                    EditModes="All"
                    OnClientLoad="radEditor_OnClientLoad"
                    EnableAjaxSkinRendering="true"
                    EnableEmbeddedBaseStylesheet="true"
                     EnableResize="false"
                     NewLineBr="false"
                     Skin="Default"
                     StripFormattingOptions="Font"
                     ToolbarMode="ShowOnFocus"

                    >



                </telerik:RadEditor>

I've even tried using the background-color style of the skin (which funnily enough is #eee) using JS:

function radEditor_OnClientLoad(editor, args)
{
  var style = editor.get_contentArea().style;
  style.backgroundColor = "#fff";
}

(Either way it still looks better as I can override the skin settings)

Everytime, my content comes out like:

<p><span style="background-color: #eeeeee">Blah blah blah </span></p>
<p><span style="background-color: #eeeeee">Blah blah blah</span></p>
<p><span style="background-color: #eeeeee"></span></p>

I have tried manually setting the background colour using the toolbar control, which changes but then changes back to #eee. I have tried emptying the textbox and pasting in "clean" XHTML, but the spans are added after posting anyway. Ideally I should have NO background colour styles, as I have visual styles where the content is presented to respect.

[Tervel]

Hi Nathan,

By default RadEditor will not add such formatting to your content. I am at a loss how to reproduce your problem. I tested with your RadEditor declaration and I was not able to reproduce the problem.

I also experimented with adding some global CSS on the page to see if it will cause the issue to manifest itself:
 <style>
p, span, body
{
   background-color:#eeeeee;
}
</style>

It did not make any difference.

It must be something in your page in addition to the RadEditor declaration that causes this behavior to happen. It is also possible if your original first line of content was pasted from somewhere else - e.g. MS Word.

Are you able to reproduce the problem in more than one browser (e.g. not just in IE, but FF as well)?
Can you send us a simple runnable project that reproduces the problem as well as steps to reproduce it?

On a side note, to remove such undesired content you can attach to the editor's onsubmit event and go through the DOM, e.g. something like this:

function OnClientLoad(editor)
{
    editor.add_submit(function()
    {
        var span = editor.get_document().getElementsByTagName("SPAN");
        for (var i=0; i< spans.length;i++)
        {
            spans[i].style.backgroundColor = "";
        }
    });
}

Sincerely yours,
Tervel
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Nathan J Pledger]

Hi Tervel,

Thanks for your reply, and sorry for not getting back sooner. Is a bit of a weekend project for me at the moment.

I can see why you were stimped. As was I. Turns out some "posts" were affected, but other were not. I've cleared them down in the DB and now it seems to work as anticipated.

(And I never paste from Word, that would be silly! MSHTML sucks!)

Thanks also for the useful JavaScript, I'll find a use for that I'm sure.