1

Topic: TinyMCE in ASP.NET

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:

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:

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

and use this tag:

<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)

2

Re: TinyMCE in ASP.NET

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)

3

Re: TinyMCE in ASP.NET

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)

4

Re: TinyMCE in ASP.NET

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

Have anybody found a souloution?

5

Re: TinyMCE in ASP.NET

Did you add the registration code?

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

6

Re: TinyMCE in ASP.NET

This worked for me. Thank you so much.

7

Re: TinyMCE in ASP.NET

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!

8

Re: TinyMCE in ASP.NET

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)

9

Re: TinyMCE in ASP.NET

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

10

Re: TinyMCE in ASP.NET

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.

11

Re: TinyMCE in ASP.NET

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

12

Re: TinyMCE in ASP.NET

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 :-(

13

Re: TinyMCE in ASP.NET

Hi.. Im having the "Unknown server tag 'cc:TextEditor'"... I do everything said in the last posts but nothing happen...

I have a class named tiny_mce.cs, in a class lib called CableClassLib...

This is part of my tags register...

<%@ Page Title="" Language="C#" MasterPageFile="~/Administration/Admin.master" AutoEventWireup="true" CodeFile="ManageContent.aspx.cs" Inherits="Administration_ManageContent" %>
<%@ Register Assembly="CableClassLib" Namespace="CableClassLib" TagPrefix="cc" %>

This is my code...

<cc:TextEditor runat="server" ID="txtContentDetails" Mode="Full" />

somebody knows what is the error?

14

Re: TinyMCE in ASP.NET

Chrazy wrote:

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

Thanks for this - saved me several hours of banging my head against the wall tongue

15

Re: TinyMCE in ASP.NET

jimraven79 wrote:

saved me several hours of banging my head against the wall tongue

Poor wall... tongue

Greetings from Germany,

Felix Riesterer.
-- I am neither Moxiecode nor Ephox! --

16

Re: TinyMCE in ASP.NET

Thank you very much. It's working, I get this http://s39.radikal.ru/i085/1012/39/827a6567b585.png
but I want get this http://s55.radikal.ru/i147/1012/c8/31e4ff306f96.png.
How can I get it?

I tried to add this features:

plugins : "safari,spellchecker,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,imagemanager,filemanager",

    // Theme options
    theme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,styleselect,formatselect,fontselect,fontsizeselect",
    theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",
    theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",
    theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,spellchecker,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,blockquote,pagebreak,|,insertfile,insertimage",
    theme_advanced_toolbar_location : "top",
    theme_advanced_toolbar_align : "left",
    theme_advanced_statusbar_location : "bottom",
    theme_advanced_resizing : true,

but nothing changes.
Somebody help!!!!

Last edited by mustf4 (2010-12-08 12:39:32)

17

Re: TinyMCE in ASP.NET

What does your init look like?

18

Re: TinyMCE in ASP.NET

A suggestion:  I just found out about NuGet, a Visual Studio plugin for auto-importing open-source packages.  I was surprised to find that there was no NuGet package for TinyMCE.  I think you should make this control into one.

It might be a good way for users to get this control ready to use in their project.  Could be helpful considering the difficulties some people seem to be having getting the control to work. 

Just a suggestion.  Nice work.

19

Re: TinyMCE in ASP.NET

Does anybody gets above C# class working with TinyMCE version 3.4.2?

20

Re: TinyMCE in ASP.NET

Got it working. Made a little mistake..

21

Re: TinyMCE in ASP.NET

Here is some example code on how to integrate with asp.net. It is similar to any other language and simple to do: http://webdeveloperpost.com/Articles/How-To-Use-TinyMCE-Editor-with-ASP-NET-Website.aspx

22

Re: TinyMCE in ASP.NET

@tobyteel totally behind you about the Nuget stuff.

23

Re: TinyMCE in ASP.NET

Nice code... Works well on my website...


------------

24

Re: TinyMCE in ASP.NET

Hi,

I have used this code in version 3.4.6 but it does not seem to work correctly.

Does any body have the code that will work for the latest version of tinymce?

Thanks in Advance

25

Re: TinyMCE in ASP.NET

I was surprised to find that there was no NuGet package for TinyMCE.  I think you should make this control into one.