Hello!
I try to program a page, where the content of the database will be loaded into the CKEditor then the content can be changed and saved again. The page is devided into different <div> areas and if the user doubleclicks on an area the Editor should appear. With the following Code, Loading the Content and Doubleclick works, but I can't find any solution to save it back to the database:
So I tried to use only one FormView, now loading from database and save back works. But the Doubleclick to get the Editor doesn't work anymore. Also I can't save anymore if I add the link to the Javascript file. (I used the same one as below.
Does anyone has a solution for this?
I try to program a page, where the content of the database will be loaded into the CKEditor then the content can be changed and saved again. The page is devided into different <div> areas and if the user doubleclicks on an area the Editor should appear. With the following Code, Loading the Content and Doubleclick works, but I can't find any solution to save it back to the database:
<%@ Page Title="" Language="C#" MasterPageFile="~/Templates/MasterPageBasic.master"
AutoEventWireup="true" CodeFile="EditTemplate.aspx.cs" Inherits="Templates_EditTemplate" %>
<%@ Register Assembly="CKEditor.NET" Namespace="CKEditor.NET" TagPrefix="CKEditor" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
<link href="Styles/EditTemplate.css" rel="stylesheet" type="text/css" />
<script src="Scripts/EditTemplate.js" type="text/javascript" />
</asp:Content>
<asp:Content ID="ContentPlaceHolder2" ContentPlaceHolderID="ContentPlaceHolder" runat="Server">
<div id="header1" class="editable">
<asp:FormView ID="FormViewHeader" runat="server" DataSourceID="SqlDataSourceHeader"
DefaultMode="Edit">
<EditItemTemplate>
<asp:TextBox ID="HeaderTextBox" runat="server" Text='<%# Bind("Header") %>' />
</EditItemTemplate>
</asp:FormView>
<asp:SqlDataSource ID="SqlDataSourceHeader" runat="server" ConnectionString="<%$ ConnectionStrings:CMSConnectionString %>"
SelectCommand="SELECT [Header] FROM [PageContent]"></asp:SqlDataSource>
</div>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<a href="javascript:;" target="_top" onclick="MM_nbGroup('down','group1','navbar','',1)"
onmouseover="MM_nbGroup('over','navbar','','',1)" onmouseout="MM_nbGroup('out')">
<img src="Images/Clean-Navigation-Bar-by-willyepp.png" alt="" name="navbar" border="0"
id="Articles" onload="" /></a>
</td>
</tr>
</table>
<div id="sidebarLeft" class="editable">
<asp:FormView ID="FormViewSidebarLeft" runat="server" DataSourceID="SqlDataSourceSidebarLeft"
DefaultMode="Edit">
<EditItemTemplate>
<asp:TextBox ID="SidebarLeftTextBox" runat="server" Text='<%# Bind("SidebarLeft") %>' />
</EditItemTemplate>
</asp:FormView>
<asp:SqlDataSource ID="SqlDataSourceSidebarLeft" runat="server" ConnectionString="<%$ ConnectionStrings:CMSConnectionString %>"
SelectCommand="SELECT [SidebarLeft] FROM [PageContent]"></asp:SqlDataSource>
</div>
<div id="sidebarRight" class="editable">
<asp:FormView ID="FormViewSidebarRight" runat="server" DataSourceID="SqlDataSourceSidebarRight"
DefaultMode="Edit">
<EditItemTemplate>
<asp:TextBox ID="SidebarRightTextBox" runat="server" Text='<%# Bind("SidebarRight") %>' />
</EditItemTemplate>
</asp:FormView>
<asp:SqlDataSource ID="SqlDataSourceSidebarRight" runat="server" ConnectionString="<%$ ConnectionStrings:CMSConnectionString %>"
SelectCommand="SELECT [SidebarRight] FROM [PageContent]"></asp:SqlDataSource>
</div>
<div id="content" class="editable">
<asp:FormView ID="FormViewContent" runat="server" DataSourceID="SqlDataSourceContent"
DefaultMode="Edit">
<EditItemTemplate>
<asp:TextBox ID="ContentTextBox" runat="server" Text='<%# Bind("Content") %>' />
</EditItemTemplate>
</asp:FormView>
<asp:SqlDataSource ID="SqlDataSourceContent" runat="server" ConnectionString="<%$ ConnectionStrings:CMSConnectionString %>"
SelectCommand="SELECT [Content] FROM [PageContent]"></asp:SqlDataSource>
</div>
<div id="footer" class="editable">
<asp:FormView ID="FormViewFooter" runat="server" DataSourceID="SqlDataSourceFooter"
DefaultMode="Edit">
<EditItemTemplate>
<CKEditor:CKEditorControl ID="CKEditorFooter" Text='<%# Bind("Footer") %>' runat="server"
CustomConfigurationsPath="../ckeditor/config.js" ToolbarSet="Footer" EditorAreaCSS="/css/editor.css"
Width="947px" Height="100px">
</CKEditor:CKEditorControl>
</EditItemTemplate>
</asp:FormView>
<asp:SqlDataSource ID="SqlDataSourceFooter" runat="server" ConnectionString="<%$ ConnectionStrings:CMSConnectionString %>"
SelectCommand="SELECT [Footer] FROM [PageContent]"></asp:SqlDataSource>
</div>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="ContentPlaceHolder2" runat="Server">
</asp:Content>
<asp:Content ID="Content4" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
</asp:Content>
//<![CDATA[
// Uncomment the following code to test the "Timeout Loading Method".
// CKEDITOR.loadFullCoreTimeout = 5;
window.onload = function () {
// Listen to the double click event.
if (window.addEventListener)
document.body.addEventListener('dblclick', onDoubleClick, false);
else if (window.attachEvent)
document.body.attachEvent('ondblclick', onDoubleClick);
};
function onDoubleClick(ev) {
// Get the element which fired the event. This is not necessarily the
// element to which the event has been attached.
var element = ev.target || ev.srcElement;
// Find out the div that holds this element.
var name;
do {
element = element.parentNode;
}
while (element && (name = element.nodeName.toLowerCase()) && (name != 'div' || element.className.indexOf('editable') == -1) && name != 'body')
if (name == 'div' && element.className.indexOf('editable') != -1)
replaceDiv(element, element.id);
}
var cke_header1;
var cke_sidebarLeft;
var cke_sidebarRight;
var cke_content;
function replaceDiv(div, id) {
//First check if an editor is already open, if so close it
if (cke_header1)
cke_header1.destroy();
if (cke_sidebarLeft)
cke_sidebarLeft.destroy();
if (cke_sidebarRight)
cke_sidebarRight.destroy();
if (cke_content)
cke_content.destroy();
switch (id) {
case "header1":
cke_header1 = CKEDITOR.replace(div, {
height: "200", width: "950",
language: 'en',
uiColor: '#350e1e',
toolbar: 'MyToolbar'
});
break;
case "sidebarLeft":
cke_sidebarLeft = CKEDITOR.replace(div, {
height: "690", width: "180",
language: 'en',
uiColor: '#350e1e',
toolbar: 'MyToolbar'
});
break;
case "sidebarRight":
cke_sidebarRight = CKEDITOR.replace(div, {
height: "690", width: "180",
language: 'en',
uiColor: '#350e1e',
toolbar: 'MyToolbar'
});
break;
case "content":
cke_content = CKEDITOR.replace(div, {
height: "690", width: "500",
language: 'en',
uiColor: '#350e1e',
toolbar: 'MyToolbar'
});
break;
}
}So I tried to use only one FormView, now loading from database and save back works. But the Doubleclick to get the Editor doesn't work anymore. Also I can't save anymore if I add the link to the Javascript file. (I used the same one as below.
Does anyone has a solution for this?
<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true"
CodeFile="Default2.aspx.cs" Inherits="Default2" %>
<%@ Register Assembly="CKEditor.NET" Namespace="CKEditor.NET" TagPrefix="CKEditor" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
<link href="Templates/Styles/EditTemplate.css" rel="stylesheet" type="text/css" />
<script src="Scripts/EditTemplate.js" type="text/javascript" />
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder" runat="Server">
<asp:FormView ID="FormViewPage" runat="server" DataSourceID="SqlDataSourcePage" DefaultMode="Edit">
<EditItemTemplate>
<div id="header1" class="editable">
<asp:TextBox ID="HeaderTextBox" runat="server" Text='<%# Bind("Header") %>' />
</div>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<a href="javascript:;" target="_top" onclick="MM_nbGroup('down','group1','navbar','',1)"
onmouseover="MM_nbGroup('over','navbar','','',1)" onmouseout="MM_nbGroup('out')">
<img src="Templates/Images/Clean-Navigation-Bar-by-willyepp.png" alt="" name="navbar" border="0"
id="Articles" onload="" /></a>
</td>
</tr>
</table>
<div id="content" class="editable">
<asp:TextBox ID="ContentTextBox" runat="server" Text='<%# Bind("Content") %>' />
</div>
<div id="sidebarLeft" class="editable">
<asp:TextBox ID="SidebarLeftTextBox" runat="server" Text='<%# Bind("SidebarLeft") %>' />
</div>
<div id="sidebarRight" class="editable">
<asp:TextBox ID="SidebarRightTextBox" runat="server" Text='<%# Bind("SidebarRight") %>' Visible="True" />
</div>
<div id="footer" class="editable">
<asp:TextBox ID="FooterTextBox" runat="server" Text='<%# Bind("Footer") %>' />
</div>
<asp:LinkButton ID="UpdateButton" runat="server" CausesValidation="True" CommandName="Update"
Text="Aktualisieren" />
<asp:LinkButton ID="UpdateCancelButton" runat="server" CausesValidation="False"
CommandName="Cancel" Text="Abbrechen" />
</EditItemTemplate>
</asp:FormView>
<asp:SqlDataSource ID="SqlDataSourcePage" runat="server" ConnectionString="<%$ ConnectionStrings:CMSConnectionString %>"
SelectCommand="SELECT [Header], [Content], [SidebarLeft], [SidebarRight], [Footer] FROM [PageContent]"
UpdateCommand="UPDATE PageContent SET Header = @Header, [Content] = @Content, SidebarLeft = @SidebarLeft, SidebarRight = @SidebarRight, Footer = @Footer">
<UpdateParameters>
<asp:Parameter Name="Header" />
<asp:Parameter Name="Content" />
<asp:Parameter Name="SidebarLeft" />
<asp:Parameter Name="SidebarRight" />
<asp:Parameter Name="Footer" />
</UpdateParameters>
</asp:SqlDataSource>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="ContentPlaceHolder2" runat="Server">
</asp:Content>
<asp:Content ID="Content4" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
</asp:Content>