New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Full HTML Page Edit

  • Show/Hide Border
  • Table Properties
  • Delete Table
  • Row
    • Insert Row Above
    • Insert Row Below
    • Delete Row
  • Column
    • Insert Column to the Left
    • Insert Column to the Right
    • Delete Column
  • Cell
    • Merge Cells Horizontally
    • Merge Cells Vertically
    • Split Cell Horizontally
    • Split Cell Vertically
    • Delete Cell
  • Cell Properties
  • Table Properties
  • Properties...
  • Image Map Editor
  • Properties...
  • OpenLink
  • Remove Link
  • Insert Select
  • Cut
  • Copy
  • Paste
  • Paste from Word
  • Paste Plain Text
  • Paste As Html
  • Paste Html

RadEditor offers the ability to create and edit full HTML and the Page Properties dialog significantly facilitates the process of creation and formatting of complete html content:



Once the Page Properties dialog is opened and closed by pressing the OK button, then the following full html content will be inserted in the editor:
<html>
    <head>
        <title></title>
        <style>
        </style>
        <meta name="Description"/>
        <meta name="Keywords"/>
    </head>
    <body>
    </body>
</html>

Full HTML page cannot be edited when the Editor is set to Editable DIV Content Area because the <html> element cannot be nested inside a <div> element.

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
<%@ Page Theme="Default" Language="C#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs"Inherits="Telerik.Web.Examples.Editor.CompleteHTMLSupport.DefaultCS"  %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
<link href="../Common/styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <div class="demo-container size-wide">
        <telerik:RadEditor RenderMode="Lightweight" runat="server" ID="RadEditor1" Width="800px">
            <Tools>
                <telerik:EditorToolGroup>
                    <telerik:EditorTool Name="PageProperties" Text="Page Properties"></telerik:EditorTool>
                </telerik:EditorToolGroup>
                <telerik:EditorToolGroup>
                    <telerik:EditorTool Name="Bold"></telerik:EditorTool>
                    <telerik:EditorTool Name="Italic"></telerik:EditorTool>
                    <telerik:EditorTool Name="Underline"></telerik:EditorTool>
                    <telerik:EditorTool Name="Cut"></telerik:EditorTool>
                    <telerik:EditorTool Name="Copy"></telerik:EditorTool>
                    <telerik:EditorTool Name="Paste"></telerik:EditorTool>
                    <telerik:EditorTool Name="FontName"></telerik:EditorTool>
                    <telerik:EditorTool Name="RealFontSize"></telerik:EditorTool>
                </telerik:EditorToolGroup>
                <telerik:EditorToolGroup>
                    <telerik:EditorTool Name="InsertTable"></telerik:EditorTool>
                    <telerik:EditorTool Name="InsertImage"></telerik:EditorTool>
                    <telerik:EditorTool Name="LinkManager"></telerik:EditorTool>
                    <telerik:EditorTool Name="Unlink"></telerik:EditorTool>
                    <telerik:EditorTool Name="InsertOrderedList"></telerik:EditorTool>
                    <telerik:EditorTool Name="InsertUnorderedList"></telerik:EditorTool>
                </telerik:EditorToolGroup>
            </Tools>
            <ImageManager ViewPaths="~/Editor/images/UserDir/Marketing,~/Editor/images/UserDir/PublicRelations"></ImageManager>
            <Content>

            <html>
                <head>
                    <title>Full HTML page</title>
                    <style type="text/css">
                        body {
                            color: #555;
                        }
                    </style>
                    <meta content="This is a full HTML page having html, head and body tags" name="Description" />
                    <meta content="full html page, template file." name="Keywords" />
                </head>
                <body style="margin: 1px;">
                            <span style="font-size: 12px; font-family: arial;">RadEditor is frequently used in CMS systems where the content is exported to a database without <strong>&lt;html&gt;</strong>,<strong> &lt;head&gt; </strong>and <strong>&lt;body&gt;</strong> tags. Once saved the content could be imported inside some html container element and displayed on the public site.<br /><br />
                            In some scenarios, however, it is needed to obtain the content along with the <strong>&lt;html&gt;</strong>,<strong> &lt;head&gt;</strong>,<strong> &lt;title&gt;</strong>,<strong> &lt;body&gt;</strong> and <strong>&lt;meta&gt;</strong> tags, for example when creating html template files or e-mails.<br /> RadEditor offers the ability to create and edit full HTML and the Page Properties dialog<img alt="" src="PageProperties.gif" /> can significantly facilitate the process of creation and formatting of such complete html content:<br />
                            </span>
                    <br />
                    <div style="border: #7f9db9 1px solid; font-family: courier new; background-color: white;">
                    <table style="border-top-width: 0px; border-left-width: 0px; margin: 2px 0px; width: 99%; border-bottom: #eee 0px solid; border-collapse: collapse; background-color: #fff; border-right-width: 0px;" cellspacing="0" cellpadding="0">
                        <colgroup><col style="padding-left: 10px; font-size: 11px; border-bottom: #f7f7f7 1px solid; font-family: courier new; white-space: nowrap;"></colgroup>
                        <tbody>
                            <tr>
                                <td><span style="font-size: 11px;"></span><span style="color: blue;">&lt;</span><span style="font-size: 11px;">html</span><span style="color: blue;">&gt;</span><span style="font-size: 11px;"> </span></td>
                            </tr>
                            <tr>
                                <td style="background-color: #f7f7f7;">&nbsp;&nbsp;&nbsp;<span style="color: blue;">&lt;</span><span style="font-size: 11px;">head</span><span style="color: blue;">&gt;</span><span style="font-size: 11px;"> </span></td>
                            </tr>
                            <tr>
                                <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: blue;">&lt;</span><span style="font-size: 11px;">title</span><span style="color: blue;">&gt;</span><span style="font-size: 11px;">Full HTML page</span><span style="color: blue;">&lt;/</span><span style="font-size: 11px;">title</span><span style="color: blue;">&gt;</span><span style="font-size: 11px;"> </span></td>
                            </tr>
                            <tr>
                                <td style="background-color: #f7f7f7;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: blue;">&lt;</span><span style="font-size: 11px;">meta </span><span style="color: red;">content</span><span style="font-size: 11px;">=</span><span style="color: blue;">"This is a full HTML page having html, head and body tags"</span><span style="font-size: 11px;"> </span><span style="color: red;">name</span><span style="font-size: 11px;">=</span><span style="color: blue;">"Description"</span><span style="font-size: 11px;"> </span><span style="color: blue;">/&gt;</span><span style="font-size: 11px;"> </span></td>
                            </tr>
                            <tr>
                                <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: blue;">&lt;</span><span style="font-size: 11px;">meta </span><span style="color: red;">content</span><span style="font-size: 11px;">=</span><span style="color: blue;">"full html page, template file."</span><span style="font-size: 11px;"> </span><span style="color: red;">name</span><span style="font-size: 11px;">=</span><span style="color: blue;">"Keywords"</span><span style="font-size: 11px;"> </span><span style="color: blue;">/&gt;</span><span style="font-size: 11px;"> </span></td>
                            </tr>
                            <tr>
                                <td style="background-color: #f7f7f7;">&nbsp;&nbsp;&nbsp;<span style="color: blue;">&lt;/</span><span style="font-size: 11px;">head</span><span style="color: blue;">&gt;</span><span style="font-size: 11px;"> </span></td>
                            </tr>
                            <tr>
                                <td>&nbsp;&nbsp;&nbsp;<span style="color: blue;">&lt;</span><span style="font-size: 11px;">body </span><span style="color: red;">style</span><span style="font-size: 11px;">=</span><span style="color: blue;">"margin: 1px;"</span><span style="font-size: 11px;">&gt;  </span></td>
                            </tr>
                            <tr>
                                <td style="background-color: #f7f7f7;">test content  </td>
                            </tr>
                            <tr>
                                <td>&nbsp;&nbsp;&nbsp;<span style="color: blue;">&lt;/</span><span style="font-size: 11px;">body</span><span style="color: blue;">&gt;</span><span style="font-size: 11px;"> </span></td>
                            </tr>
                            <tr>
                                <td style="background-color: #f7f7f7;"><span style="color: blue;">&lt;/</span><span style="font-size: 11px;">html</span><span style="color: blue;">&gt;</span><span style="font-size: 11px;"> </span></td>
                            </tr>
                        </tbody>
                    </table>
                    </div>
                </body>
            </html>
            </Content>
        </telerik:RadEditor>
    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance