Hi All,
Dear All,
I am using HtmlEditorExtender for my assignment.
I have managed to display html file in textbox of HtmlEditorExtender.
But when I click preview button or Design button I loose all HTML formatting and plain Text appears in
the HtmlEditorExtender TextBox.How i can Keep Html Formating all time after clicking any button of
HtmlEditorExtender.
Below Is my Code.
my aspx
=======
<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage3.master" AutoEventWireup="true"
CodeFile="ExtenderClassifieds.aspx.cs" Inherits="ExtenderClassifieds" %>
<%@ Register TagPrefix="asp" Namespace="AjaxControlToolkit" Assembly="AjaxControlToolkit" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
<link href="StyleSheet.css" rel="stylesheet" />
<script src="jquery-ui-1.9.2/jquery-1.8.3.js"></script>
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="jquery-ui-1.9.2/jquery-latest.min.js"></script>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#Button2").click(function () {
$(".ajax__html_editor_extender_buttoncontainer").hide();
});
$("#Button3").click(function () {
$(".ajax__html_editor_extender_buttoncontainer").show();
});
})
</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript">
Sys.Application.add_load(function () {
var htmlEditorBox = $('.ajax__html_editor_extender_texteditor');
var myvarvalue = document.getElementById('<%=TextBox1.ClientID%>');
htmlEditorBox.keyup(function () {
myvarvalue.innerHTML = this.textContent;
alert(this.textContent);
alert(myvarvalue.value);
});
});
</script>
<table width="100%">
<tr>
<td>
<ajaxToolkit:ToolkitScriptManager ID="ToolkitScriptManager1"
runat="server"></ajaxToolkit:ToolkitScriptManager>
<ajaxToolkit:HtmlEditorExtender ID="HtmlEditorExtender1" runat="server"
EnableSanitization ="false" TargetControlID="TextBox1" DisplaySourceTab="true" >
<Toolbar>
<ajaxToolkit:Bold />
<ajaxToolkit:Italic />
<ajaxToolkit:Underline />
<ajaxToolkit:BackgroundColorSelector />
<ajaxToolkit:ForeColorSelector />
<ajaxToolkit:FontNameSelector />
<ajaxToolkit:FontSizeSelector />
<ajaxToolkit:InsertImage />
</Toolbar>
</ajaxToolkit:HtmlEditorExtender>
</td>
</tr>
</table>
<table>
<tr>
<td> <asp:TextBox ID="TextBox1" runat="server" height="400px" width="300px"
TextMode ="MultiLine" ></asp:TextBox></td>
</tr>
</table>
<table>
<tr>
<td><input id="Button2" type="button" value="Preview" />
<input id="Button3" type="button" value="Design" /></td>
</tr>
</table>
</asp:Content>
=======================================
my aspx.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.IO;
using System.Web.UI.HtmlControls;
public partial class ExtenderClassifieds : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
string TemplateFile = Server.MapPath("Classifieds\\Bwrbox1.html");
TextReader tr = new StreamReader(TemplateFile);
TextBox1.Text = tr.ReadToEnd();
}
}
==============================================
my advertisement HTML name=Bwrbox1.html
<body>
<style type="text/css">
.box1 {
width: 120px;
border: 1px solid #C30;
float: left;
margin-right: 30px;
}
.head {
width: 120px;
background: #FF0;
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
text-align: center;
}
.txt {
width: 120px;
padding: 0px;
text-align: justify;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
background: #C60;
color: #FFF;
}
.box2 {
width: 120px;
border: 1px solid #eee;
float: left;
margin-right: 30px;
}
.headd {
width: 120px;
background: #000;
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
text-align: center;
color: #fff;
}
.txtt {
width: 120px;
padding: 0px;
text-align: justify;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
background: #fff;
color: #000;
}
</style>
<table>
<tr>
<td>
<div class="box2" >
<div class="headd">Sample Text Goes Here</div>
<div class="txtt">Select an Ad template from below (colour or b/w) OR upoad your own
PDF Design (click above).Select an Ad template from below (colour or b/w) OR upoad your own PDF Design
(click above).Select an Ad template from below (colour or b/w) OR upoadSelect an Ad template from below
(colour or b/w) OR upoad </div>
<div class="headd">Sample Text Goes Here</div>
</div>
</td>
</tr>
</table>
</body>
Please Help.
Regards,
Jayesh(From India,Mumbai)