Search code examples
javascriptc#htmltelerikradeditor

RadEditor keeps removing <!doctype> tag when switching from HTML to Design, how do I stop this

I am using RadEditor in my project, however when I insert on the top of HTML editing area and then switch the view to Design and go back. The tag is removed. I want to stop the RadEditor doing this without modifying too much of existing filters.

You can try this out in the following link

http://demos.telerik.com/aspnet-ajax/editor/examples/contentfilters/defaultcs.aspx

Solution

  • The issue is that you use the DIV mode and not the iFrame mode. If you want to use the DIV mode the issue is that there is already a doctype, head, footer, etc in that page. Which can not exists twice in a page and the browser will remove it from your page.

    You can use eather the iFrame mode or the solution below.

    The solution I use is to replace that tag by a custom tag of mine which I replace when I go from design mode to edit mode and when I save it to the database I also replace my custom tags to the normal tags. For example:

    The code below is an example I use in my project (does not contain the doctype yet):

    // Add the custom filter to the editor
function OnClientLoad(editor, args) {
    editor.get_filtersManager().add(new MyFilter());
}

// Replace the tags HTML does not expect twice
var tags = ["html", "body", "head", "title", "form", "textarea"];

MyFilter = function () {
    MyFilter.initializeBase(this);
    this.set_isDom(false);
    this.set_enabled(true);
    this.set_name("RadEditor filter");
    this.set_description("RadEditor filter description");
}

MyFilter.prototype =
{
    getHtmlContent: function (content) {
        var newContent = content;

        for (var i = 0; i < tags.length; i++) {
            var tag = tags[i];
            newContent = newContent.replace(new RegExp("<j" + tag, "gi"), "<" + tag);
            newContent = newContent.replace(new RegExp("<" + "/j" + tag + "", "gi"), "<" + "/" + tag + "");
        }

        return newContent;
    },
    getDesignContent: function (content) {
        var newContent = content;
        for (var i = 0; i < tags.length; i++) {
            var tag = tags[i];
            newContent = newContent.replace(new RegExp("<" + tag, "gi"), "<j" + tag);
            newContent = newContent.replace(new RegExp("<" + "/" + tag + "", "gi"), "<" + "/j" + tag + "");
        }
        return newContent;
    }
}
MyFilter.registerClass('MyFilter', Telerik.Web.UI.Editor.Filter);

    And get the HTML from the editor also replace the new tag:

    function GetEditorHtmlCall() {
    var html = $find("RadEditor1").get_html(true);

    for (var i = 0; i < tags.length; i++) {
        var tag = tags[i];
        html = html.replace(new RegExp("<" + tag, "gi"), "<j" + tag);
        html = html.replace(new RegExp("<" + "/" + tag + "", "gi"), "<" + "/j" + tag + "");
    }

    return html;
}

    The code above will replace the example below. In design mode you have a jhtml tag and in html mode you have your html tag. When you save it you convert the jhtml tag back to html so it's nice in the database:

    <html></html> to <jhtml></jhtml>

    Hope this gives you the solution you are looking for.