I'm trying to use CKEditor within a .Net Formview UpdateItem Template. Here is a code snippet:
<asp:FormView ID="FormView1" runat="server" DataKeyNames="main_ID" DataSourceID="MainDataSource" DefaultMode="Edit">
<EditItemTemplate>
<textarea name="qiiTextBox" runat="server" ID="qiiTextBox" rows="5" cols="80"></textarea>
<script type="text/javascript">
CKEDITOR.replace('qiiTextBox');
</script>
<asp:HiddenField ID="HiddenField1" runat="server" Value='<%#Bind("page4_error") %>'/>
<asp:LinkButton ID="UpdateButton" runat="server" CausesValidation="True" CommandName="Update" Text="Update" />
<asp:LinkButton ID="UpdateCancelButton" runat="server" CausesValidation="False" CommandName="Cancel" Text="Cancel" />
</EditItemTemplate>
</FormView>
The above gives a javascript error:
uncaught exception:[CKEDITOR.editor.replace] The element with id or name "qiiTextBox" was not found.
I also tried replacing FormView1.qiiTextBox which gives the same error.
The page renders with the textarea, but no editor.
Has anyone got CKEditor working inside a FormView? Help, please!
<asp:FormView ID="FormView1" runat="server" DataKeyNames="main_ID" DataSourceID="MainDataSource" DefaultMode="Edit">
<EditItemTemplate>
<textarea name="qiiTextBox" runat="server" ID="qiiTextBox" rows="5" cols="80"></textarea>
<script type="text/javascript">
CKEDITOR.replace('qiiTextBox');
</script>
<asp:HiddenField ID="HiddenField1" runat="server" Value='<%#Bind("page4_error") %>'/>
<asp:LinkButton ID="UpdateButton" runat="server" CausesValidation="True" CommandName="Update" Text="Update" />
<asp:LinkButton ID="UpdateCancelButton" runat="server" CausesValidation="False" CommandName="Cancel" Text="Cancel" />
</EditItemTemplate>
</FormView>
The above gives a javascript error:
uncaught exception:[CKEDITOR.editor.replace] The element with id or name "qiiTextBox" was not found.
I also tried replacing FormView1.qiiTextBox which gives the same error.
The page renders with the textarea, but no editor.
Has anyone got CKEditor working inside a FormView? Help, please!
Re: CKEditor replace fails with .Net FormView - SOLVED
It also works with an asp.TextBox instead of a html textarea, as long as you have the right name, and it can be bound to a database. I had to put 'ValidateRequest="false"' in my page directive to prevent .Net from throwing a potentially dangerous input text exception. It now works fine. The code is:
<asp:FormView ID="FormView1" runat="server" DataKeyNames="main_ID" DataSourceID="MainDataSource" DefaultMode="Edit">
<EditItemTemplate>
<asp:TextBox name="qiiTextBox" id="qiiTextBox" rows="5" runat="server" TextMode="MultiLine" Columns="80" Text='<%# Bind("qiii") %>' />
<script type="text/javascript">
CKEDITOR.replace('ctl00$ContentPlaceHolder1$FormView1$qiiTextBox');
</script>
<br />
<asp:LinkButton id="UpdateButton" runat="server" CommandName="Update" Text="Update" />
</EditItemTemplate>
</asp:FormView>
<asp:SqlDataSource ...etc
Re: CKEditor replace fails with .Net FormView - FINAL SOLUTION
Here is the codebehind:
protected void Page_Load(object sender, EventArgs e)
{
TextBox qiiEditor = (TextBox) FormView1.FindControl("qiiTextBox");
Literal qiiJS = (Literal) FormView1.FindControl("qiiTextBoxJavascript");
InsertEditorJS(qiiEditor, qiiJS);
}
protected void InsertEditorJS(TextBox TextBoxCtl, Literal LiteralCtl)
{
LiteralCtl.Text = "<script type='Text/javascript'>";
LiteralCtl.Text += "CKEDITOR.replace('";
LiteralCtl.Text += TextBoxCtl.ClientID;
LiteralCtl.Text += "');</script>";
}
Here is the FormView Code:
<asp:FormView ID="FormView1" runat="server" DataKeyNames="main_ID" DataSourceID="MainDataSource" DefaultMode="Edit">
<EditItemTemplate>
<asp:TextBox name="qiiTextBox" id="qiiTextBox" rows="5" runat="server" TextMode="MultiLine" Columns="80" Text='<%# Bind("qiii") %>' />
<asp:literal runat="server" ID="qiiTextBoxJavascript" />
<br />
<asp:LinkButton id="UpdateButton" runat="server" CommandName="Update" Text="Update" />
</EditItemTemplate>
</aspFormView>
If you see a better way to do this, please comment!