Load Content of Database in CKEditor, change it and save it

Questions about how to use the online - editors and suggestions how to improve them
Post Reply
Sophie28
Posts: 2
Joined: Fri Jan 06, 2012 4:42 pm

Load Content of Database in CKEditor, change it and save it

Post by Sophie28 » Fri Jan 06, 2012 4:46 pm

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:

Code: Select all

    <%@ 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>

Code: Select all

    //<![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?

Code: Select all

    <%@ 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>

cmb
Posts: 13341
Joined: Tue Jun 21, 2011 11:04 am
Location: Mü-Sa, RLP, DE
Contact:

Re: Load Content of Database in CKEditor, change it and save it

Post by cmb » Fri Jan 06, 2012 5:13 pm

Hello Sophie,
Sophie28 wrote:Does anyone has a solution for this?
For sure in another forum, but probably not here, as this forum deals with CMSimple, which is programmed in PHP, not ASP.NET and stores it's data in flat files instead of an SQL database.

Christoph
Christoph M. Becker – Plugins for CMSimple_XH

Sophie28
Posts: 2
Joined: Fri Jan 06, 2012 4:42 pm

Re: Load Content of Database in CKEditor, change it and save it

Post by Sophie28 » Fri Jan 06, 2012 5:17 pm

Ah, ok. I'm sorry. Thanks for your answer

Post Reply