All geek questions in one place

Download the contents of the database to CKEditor, modify it and save

I am trying to program a page where the contents of the database will be loaded into CKEditor, then the contents can be modified and saved again. The page is divided into different areas, and if the user double-clicks on the area that the editor should display. The following code loads the content and Doubleclick, but I can not find any solution to save it in 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>

Js file

  //<![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 it loads from the database and saves back work. But DoubleClick for getting the editor no longer works. Also I can no longer save if I add a link to a Javascript file. (I used the same as below. Does anyone have 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" /> &nbsp;<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>
+4
source share

No one has answered this question yet.

See related questions:

Source: https://habr.com/ru/post/1389686/

More articles:


All Articles