TinyMCE Forum / TinyMCE in ASP.NET

gius · 2007-08-09 21:15:29

I couldn't find any implementation of TinyMCE for ASP.NET so I have spent a few minutes and written one of my own. I know it might not (and probably is not) be the best solution but I hope it could start a useful discussion over this problem.

To use TinyMCE in your ASP.NET website:
1.Install TinyMCE (copy the tinymce folder to your website root folder)
2.Create a C# Class file with this content:

Code:

namespace MyWebSite
{
    public class TextEditor : TextBox
    {
        protected override void OnPreRender(EventArgs e)
        {
            string tinyMceIncludeKey = "TinyMCEInclude";
            string tinyMceIncludeScript = "<script type=\"text/javascript\" src=\"/tinymce/jscripts/tiny_mce/tiny_mce.js\"></script>";

            if (!Page.ClientScript.IsStartupScriptRegistered(tinyMceIncludeKey))
            {
                Page.ClientScript.RegisterStartupScript(this.GetType(), tinyMceIncludeKey, tinyMceIncludeScript);
            }

            if (!Page.ClientScript.IsStartupScriptRegistered(GetInitKey()))
            {
                Page.ClientScript.RegisterStartupScript(this.GetType(), GetInitKey(), GetInitScript());
            }

            if (!CssClass.Contains(GetEditorClass())) //probably this is not the best way how to add the css class but I do not know any beter way
            {
                if (CssClass.Length > 0)
                {
                    CssClass += " ";
                }
                CssClass += GetEditorClass();
            }
            base.OnPreRender(e);
        }

        private string GetInitKey()
        {
            string simpleKey = "TinyMCESimple";
            string fullKey = "TinyMCEFull";

            switch (Mode)
            {
                case TextEditorMode.Simple:
                    return simpleKey;
                case TextEditorMode.Full:
                    return fullKey;
                default:
                    goto case TextEditorMode.Simple;
            }
        }

        private string GetEditorClass()
        {
            return GetEditorClass(Mode);
        }

        private string GetEditorClass(TextEditorMode mode)
        {
            string simpleClass = "SimpleTextEditor";
            string fullClass = "FullTextEditor";
            
            switch (mode)
            {
                case TextEditorMode.Simple:
                    return simpleClass;
                case TextEditorMode.Full:
                    return fullClass;
                default:
                    goto case TextEditorMode.Simple;
            }
        }

        private string GetInitScript()
        {
            string simpleScript = 
                "<script language=\"javascript\" type=\"text/javascript\">tinyMCE.init({{mode : \"textareas\",theme : \"simple\",editor_selector : \"{0}\"}});</script>";
            string fullScript = 
                "<script language=\"javascript\" type=\"text/javascript\">tinyMCE.init({{mode : \"textareas\",theme : \"advanced\",editor_selector : \"{0}\"}});</script>";

            switch (Mode)
            {
                case TextEditorMode.Simple:
                    return string.Format(simpleScript, GetEditorClass(TextEditorMode.Simple));
                case TextEditorMode.Full:
                    return string.Format(fullScript, GetEditorClass(TextEditorMode.Full));
                default:
                    goto case TextEditorMode.Simple;
            }
        }

        public override TextBoxMode TextMode
        {
            get
            {
                return TextBoxMode.MultiLine;
            }
        }

        public TextEditorMode Mode
        {
            get
            {
                Object obj = ViewState["Mode"];
                if (obj == null)
                {
                    return TextEditorMode.Simple;
                }
                return (TextEditorMode)obj;
            }
            set
            {
                ViewState["Mode"] = value;
            }
        }

        public enum TextEditorMode
        {
            Simple,
            Full
        }
    }
}

3.To use the TextEditor in your page, register the control in the page:

Code:

<%@ Register TagPrefix="cc" Namespace="MyWebSite" %>

and use this tag:

Code:

<cc:TextEditor runat="server" ID="txt1" Mode="Full" />
or
<cc:TextEditor runat="server" ID="txt2" Width="600px" Mode="simple">Hello World!</cc:TextEditor>

Take it as a starter kit, you can add more TextEditorModes or edit current configuration.

Please, let me know if you use or improve this code or about your opinion.

Last edited by gius (2007-08-14 12:06:18)

choreson · 2007-08-15 18:30:05

Gius:

This is pretty cool! I am using it in my application. Really neat. Thank you very much for sharing this wonderful trick!

Last edited by choreson (2007-08-15 18:30:30)

Kostkac · 2008-06-03 10:34:26

Hello,

I have big problem. I would like to encapsulate TinyMCE just like this hint, but i have this error:

Unknown server tag 'cc:TextEditor'.

But when I try to create TextEditor in code behind, it’s ok - but it’s not comfortable. I can add control to place holder by Placeholder.Controls.Add(TextEditor)

Any ideas?

Last edited by Kostkac (2008-06-03 10:42:53)

pnr · 2009-04-07 20:54:43

I am alsow getting the error: Unknown server tag 'cc:TextEditor'.

Have anybody found a souloution?

RE3Rotor · 2009-08-19 02:52:31

Did you add the registration code?

Code:

<%@ Register TagPrefix="cc" Namespace="MyWebSite" %>

RE3Rotor · 2009-08-19 03:04:37

This worked for me. Thank you so much.

rsp · 2009-08-25 19:16:41

Im working with masterpages and have the reg-code (<%@ Register TagPrefix="cc" Namespace="MyWebSite" %>) on both my page.aspx where I want to use tinymce and tried on the masterpage.

My class-file i named tiny.cs where errors occure.

Get the error: (line:10) The name 'Page' does not exist in the current context.
(line:20)And same error on CssClass.

(line 28) Also get a error on: 'object' does not contain a defanition for on 'PreRender'

Any help appriciated!

owiZo · 2009-09-09 15:11:39

pnr wrote:
I am alsow getting the error: Unknown server tag 'cc:TextEditor'.

Have anybody found a souloution?

For those who couldnt handle this,
create a new Web Service solution (in my case i created one on VS2008),
create a new C# Class file,
paste the code above,
publish it,
find the generated DLL
copy to your website folder,
add reference,
add tag:
<%@ Register TagPrefix="cc" Namespace="MyWebSite" Assembly="YourDLLFileName" %>
and you're good to go...

hope this helps.

Last edited by owiZo (2009-09-09 15:14:46)

BobG · 2010-04-29 06:21:18

This is a great tutorial. It saved me a lot of time and was really straight forward to get TinyMCE integrated with ASP.NET.

induswebi · 2010-07-24 14:37:35

Hello

I would like to reload the content of the editor after an operation, is it there a Refresh instruction for the editor itself? I would reluctantly load the complete site. I did not really find something in the documentation.

Chrazy · 2010-07-25 01:15:18

You need to do this on your own using AJAX and the method setContent from Tiny's API.

Ruffio · 2010-08-19 08:57:46

Every time I try I get:

Line: 50
Error: 'tinyMCE' is undefined

And if I debug I have:
<script type="text/javascript" src="/tinymce/jscripts/tiny_mce/tiny_mce.js"></script><script language="javascript" type="text/javascript">tinyMCE.init({mode : "textareas",theme : "simple",editor_selector : "SimpleTextEditor"});<

tinyMCE.init is where it stops.

Can someone please give me a hint? I have tried typing in the complete path in src above but nothing help :-(

#1 2007-08-09 21:15:29

TinyMCE in ASP.NET

Code:

Code:

Code:

#2 2007-08-15 18:30:05

Re: TinyMCE in ASP.NET

#3 2008-06-03 10:34:26

Re: TinyMCE in ASP.NET

#4 2009-04-07 20:54:43

Re: TinyMCE in ASP.NET

#5 2009-08-19 02:52:31

Re: TinyMCE in ASP.NET

Code:

#6 2009-08-19 03:04:37

Re: TinyMCE in ASP.NET

#7 2009-08-25 19:16:41

Re: TinyMCE in ASP.NET

#8 2009-09-09 15:11:39

Re: TinyMCE in ASP.NET

pnr wrote:

#9 2010-04-29 06:21:18

Re: TinyMCE in ASP.NET

#10 2010-07-24 14:37:35

Re: TinyMCE in ASP.NET

#11 2010-07-25 01:15:18

Re: TinyMCE in ASP.NET

#12 2010-08-19 08:57:46

Re: TinyMCE in ASP.NET

Board footer