How to get started with Cute Editor

Last post 11-09-2008, 12:48 AM by Kenneth. 10 replies.
Sort Posts: Previous Next
  •  10-04-2008, 9:33 PM 44556

    How to get started with Cute Editor

    Hi, I was hoping to find a tutorial that I could follow along. I also did a Internet Search for example code using CuteEditor but found nothing.
    The website that I am working on is written using Visual Studio 2008 in C#.
    I have a MasterPage.master. I have several webpages that have a ContentPlaceHolder.
     
    For example: I have a page called News.aspx. How do I go about telling CuteEditor to bring the content of the News ContentPlaceHolder into the screen to be allowed to be changed and then place that change back into the webpage (option #1). Or do I do that by using a database and every time that the page gets loaded the database reads the current content and pictures and places them into the page(option #2).
     
    I am hoping that option #1 from above is achievable.
     
    Thanks, to whoever is kind enough to get be started in the right direction.
    john
  •  10-05-2008, 6:58 AM 44574 in reply to 44556

    Re: How to get started with Cute Editor

    Hi jfeeney,
     
    you can try following code
     

    <%@ Page Language="C#" %>

    <%@ Register TagPrefix="CE" Namespace="CuteEditor" Assembly="CuteEditor" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <script runat="server">
       
        public bool HasEditPermissions
        {
            get
            {
                return true;
            }
        }
       
        private string GetSavedValue()
        {
            object obj = Application["myvalue"];
            if (obj != null)
                return obj.ToString();
            return "Click here to edit the news !";
        }
        void SaveValue(string val)
        {
            Application["myvalue"] = val;
        }

        protected override void OnLoad(EventArgs e)
        {
            base.OnLoad(e);

            if (!IsPostBack)
            {
                string val=GetSavedValue();
                MyContent.Text = GetSavedValue();
                if (HasEditPermissions)
                {
                    Editor1.Text = val;
                }
                else
                {
                    Editor1.Visible = false;
                }
            }
        }

        protected void Editor1_PostBackCommand(object sender, CommandEventArgs e)
        {
            if (e.CommandName == "Save")
            {
                if (HasEditPermissions)
                {
                    SaveValue(Editor1.Text);
                    MyContent.Text = Editor1.Text;
                }
            }
        }
    </script>

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>Untitled Page</title>
    </head>
    <body>
        <form id="form1" runat="server">
            <div id="divedit" style="display: none; position: absolute; left: 0px; top: 0px;
                width: 100%; height: 100%; text-align: center; background-color: White; padding-top: 100px;">
                <div>
                    Click save button to save the news...</div>
                <CE:Editor ID="Editor1" runat="server" OnPostBackCommand="Editor1_PostBackCommand">
                </CE:Editor>
            </div>
            <div style="border: solid 1px gray; padding: 12px; margin: 12px;" onclick="showEditor()">
                <asp:Literal ID="MyContent" runat="server"></asp:Literal>
            </div>
        </form>

        <script>
       
        var haspermossion=<%=HasEditPermissions?"true":"false" %>;
       
        function showEditor()
        {
            if(haspermossion)
            {
                document.getElementById("divedit").style.display="";
            }
        }
        </script>

    </body>
    </html>

     
    Regards
     
    Ken
  •  10-05-2008, 12:26 PM 44579 in reply to 44574

    Re: How to get started with Cute Editor

    Kenneth, thanks for the code sample.
     
    Is there a website that has put together a "CMS how-to using Cute Editor"?
     
    If a person read the entire Cute Editor developer manual (cover-to-cover) will you learn how to put together a CMS system?
  •  11-01-2008, 10:02 PM 45294 in reply to 44574

    Re: How to get started with Cute Editor

    Hi Ken,
    Do you have this code in VB?
    Bob
  •  11-03-2008, 1:40 AM 45312 in reply to 45294

    Re: How to get started with Cute Editor

    Hi Bod,
     
    Here is the code in VB:
     

    <%@ Page Language="VB" %>

    <%@ Register TagPrefix="CE" Namespace="CuteEditor" Assembly="CuteEditor" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <script runat="server">
        Private Function GetSavedValue() As String
            Dim obj As Object = Application("myvalue")
            If obj IsNot Nothing Then
                Return obj.ToString()
            End If
            Return "Click here to edit the news !"
        End Function
        Private Sub SaveValue(ByVal val As String)
            Application("myvalue") = val
        End Sub

        Protected Overloads Overrides Sub OnLoad(ByVal e As EventArgs)
            MyBase.OnLoad(e)
       
            If Not IsPostBack Then
                Dim val As String = GetSavedValue()
                MyContent.Text = GetSavedValue()
           
               
               
                Editor1.Text = val
            End If
        End Sub

        Protected Sub Editor1_PostBackCommand(ByVal sender As Object, ByVal e As CommandEventArgs)
            If e.CommandName = "Save" Then
           
                SaveValue(Editor1.Text)
               
                MyContent.Text = Editor1.Text
            End If
        End Sub


    </script>

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>Untitled Page</title>
    </head>
    <body>
        <form id="form1" runat="server">
            <div id="divedit" style="display: none; position: absolute; left: 0px; top: 0px;
                width: 100%; height: 100%; text-align: center; background-color: White; padding-top: 100px;">
                <div>
                    Click save button to save the news...</div>
                <CE:Editor ID="Editor1" runat="server" OnPostBackCommand="Editor1_PostBackCommand">
                </CE:Editor>
            </div>
            <div style="border: solid 1px gray; padding: 12px; margin: 12px;" onclick="showEditor()">
                <asp:Literal ID="MyContent" runat="server"></asp:Literal>
            </div>
        </form>

        <script>
        var haspermossion=true;
        function showEditor()
        {
            if(haspermossion)
            {
                document.getElementById("divedit").style.display="";
            }
        }
        </script>

    </body>
    </html>
     
    Regards,
     
    Ken
  •  11-03-2008, 10:45 PM 45347 in reply to 45312

    Re: How to get started with Cute Editor

    Thanks Ken, much appreciated.
    As I'm a real rookie at all this stuff, I've another question for you. Can I have only one page on a site that can be set up like this? I've tried altering the code for different instances of the editor, i.e. <CE:Editor ID="Editor1"..... and <CE:Editor ID="Editor2" and then changing the vb code accordingly, but that doesn't seem to work. 
    Thanks
    Bob
  •  11-04-2008, 2:01 AM 45354 in reply to 45347

    Re: How to get started with Cute Editor

    Hi Bob,
     
    Please post your code here,I will do a more detailed test.
     
     
    Regards,
     
    Ken
  •  11-04-2008, 10:50 PM 45393 in reply to 45354

    Re: How to get started with Cute Editor

    Hi Ken,
    The code is pretty much exaclty as you posted except I changed "editor1" to "editor2" for the 2nd page as follows:

    <%@ Page Language="VB" %>

    <%@ Register TagPrefix="CE" Namespace="CuteEditor" Assembly="CuteEditor" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <script runat="server">
        Private Function GetSavedValue() As String
            Dim obj As Object = Application("myvalue")
            If obj IsNot Nothing Then
                Return obj.ToString()
            End If
            Return "Click here to edit the page"
        End Function
        Private Sub SaveValue(ByVal val As String)
            Application("myvalue") = val
        End Sub

        Protected Overloads Overrides Sub OnLoad(ByVal e As EventArgs)
            MyBase.OnLoad(e)
       
            If Not IsPostBack Then
                Dim val As String = GetSavedValue()
                MyContent.Text = GetSavedValue()
           
               
               
                Editor1.Text = val
            End If
        End Sub

        Protected Sub Editor1_PostBackCommand(ByVal sender As Object, ByVal e As CommandEventArgs)
            If e.CommandName = "Save" Then
           
                SaveValue(Editor1.Text)
               
                MyContent.Text = Editor1.Text
            End If
        End Sub


    </script>

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
        <title>Cute Page 1</title>
    </head>
    <body>
        <form id="form1" runat="server">
            <div id="divedit" style="display: none; position: absolute; left: 0px; top: 0px;
                width: 100%; height: 100%; text-align: center; background-color: White; padding-top: 100px;">
                <div>
                    Click save button to save the news...</div>
                <CE:Editor ID="Editor1" runat="server" OnPostBackCommand="Editor1_PostBackCommand">
                </CE:Editor>
            </div>
            <div style="border: solid 1px gray; padding: 12px; margin: 12px;" onclick="showEditor()">
                <asp:Literal ID="MyContent" runat="server"></asp:Literal>
            </div>
        </form>

        <script>
        var haspermossion=true;
        function showEditor()
        {
            if(haspermossion)
            {
                document.getElementById("divedit").style.display="";
            }
        }
        </script>
    </body>
    </html>

    The second page...

    <%@ Page Language="VB" %>

    <%@ Register TagPrefix="CE" Namespace="CuteEditor" Assembly="CuteEditor" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <script runat="server">
        Private Function GetSavedValue() As String
            Dim obj As Object = Application("myvalue")
            If obj IsNot Nothing Then
                Return obj.ToString()
            End If
            Return "Click here to edit the page"
        End Function
        Private Sub SaveValue(ByVal val As String)
            Application("myvalue") = val
        End Sub

        Protected Overloads Overrides Sub OnLoad(ByVal e As EventArgs)
            MyBase.OnLoad(e)
       
            If Not IsPostBack Then
                Dim val As String = GetSavedValue()
                MyContent.Text = GetSavedValue()
           
               
               
                editor2.Text = val
            End If
        End Sub

        Protected Sub editor2_PostBackCommand(ByVal sender As Object, ByVal e As CommandEventArgs)
            If e.CommandName = "Save" Then
           
                SaveValue(editor2.Text)
               
                MyContent.Text = editor2.Text
            End If
        End Sub


    </script>

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
        <title>CutePage 2</title>
    </head>
    <body>
        <form id="form1" runat="server">
            <div id="divedit" style="display: none; position: absolute; left: 0px; top: 0px;
                width: 100%; height: 100%; text-align: center; background-color: White; padding-top: 100px;">
                <div>
                    Click save button to save the news...</div>
                <CE:Editor ID="editor2" runat="server" OnPostBackCommand="editor2_PostBackCommand">
                </CE:Editor>
            </div>
            <div style="border: solid 1px gray; padding: 12px; margin: 12px;" onclick="showEditor()">
                <asp:Literal ID="MyContent" runat="server"></asp:Literal>
            </div>
        </form>

        <script>
        var haspermossion=true;
        function showEditor()
        {
            if(haspermossion)
            {
                document.getElementById("divedit").style.display="";
            }
        }
        </script>
    </body>
    </html>

    When I change one page, the other page changes accordingly.
    Thanks for checking this out.
    Bob
  •  11-05-2008, 12:21 AM 45398 in reply to 45393

    Re: How to get started with Cute Editor

    Hi forexbob,
     
     
    in the second page, do not use "myvalue", use another name.
     
     
     
    Regards,
     
    Ken
  •  11-08-2008, 10:35 AM 45536 in reply to 45398

    Re: How to get started with Cute Editor

    Hi Kenneth,
     
    Thanks. That fixed that up. But the pages reset themselves all the time. I tried to figure out the timing, i.e. closing the page, closing the browser, closing all the browsers, but even after that the page remained as edited. However, when I come back to it the next day it's reverted back to default.
    Ideas?
    Thanks
    Bob
  •  11-09-2008, 12:48 AM 45537 in reply to 45536

    Re: How to get started with Cute Editor

    Hi forexbob,
     
    It's just an example showing how to use Cute Editor.
     
    You need to integrate Cute Editor with your own projects.
     
    Regards,
     
    Ken
View as RSS news feed in XML