在CKEditor中加载数据库内容，更改并保存

时间：2012-01-06 16:55:40

标签： ckeditor

我尝试编写一个页面，将数据库的内容加载到CKEditor中，然后可以更改内容并再次保存。页面分为不同的区域，如果用户双击区域，则应显示编辑器。使用以下代码，加载内容和Doubleclick工作，但我找不到任何解决方案将其保存回数据库：

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

    //<![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;       
    }
}

所以我尝试只使用一个FormView，现在从数据库加载并保存回来的工作。但Doubleclick让编辑器不再起作用了。如果我将链接添加到Javascript文件，我也无法保存。 （我使用了与下面相同的一个。 有人有解决方案吗？ 

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

0 个答案:

没有答案
相关问题
最新问题