Click here to Skip to main content
15,889,462 members
Articles / Web Development / HTML
Tip/Trick

TinyMCE for ASP.NET

Rate me:
Please Sign up or sign in to vote.
4.54/5 (7 votes)
19 Jan 2014CPOL 42.9K   10   3
Fast, easy with/without local js, allow ins HTML code by saving

Introduction

TinyMCE 4.x add to ASP.net has some different code, unlike the samples on the site will tell you.

I let you explore some easy and fast working tips by showing an example.

Using the Code

Download from http://www.tinymce.com/download/download.php or cloud link on the same page (and in the code).

Place the code below in the Head tag under the Title tag:

JavaScript
 <%-- reference site http://www.tinymce.com/wiki.php --%>
    <script src="//tinymce.cachefly.net/4.0/tinymce.min.js"></script>
    <script type="text/javascript">
        tinymce.init({
            selector: ".mcetiny",
            theme: "modern",
            plugins: [
             "advlist autolink lists link image charmap print preview hr anchor pagebreak",
             "searchreplace wordcount visualblocks visualchars code fullscreen",
             "insertdatetime media nonbreaking save table contextmenu directionality",
             "emoticons template paste textcolor"
            ],
            toolbar1: "insertfile undo redo | styleselect | bold italic | 
            alignleft aligncenter alignright alignjustify | 
            bullist numlist outdent indent | link image",
            toolbar2: "print preview media | forecolor backcolor emoticons",
            image_advtab: true,
            templates: [
                { title: 'Test template 1', content: 'Test 1' },
                { title: 'Test template 2', content: 'Test 2' }
            ]
        });
</script> 

If you'll use the downloaded .js script locally, replace the tag on the ↑second line↑.

Place ↓this inside the form tag:

ASP.NET
<asp:TextBox ID="tbxTinymce" CssClass="mcetiny" runat="server"></asp:TextBox>

Info: Connection between the javascriptcode and textbox is the common CssClass name (mcetiny).

Extra info: plugins are the menu Tabs, toolbar are the button bars.

Ready.... or do you want to save HTML/XML code.

Additional

Saving HTML/XML, etc. code.

This requests some extra work, but is also easy...
To get rid of the error:
(A potentially dangerous Request.Form value was detected from the client)

In web.config into section system.web place:

XML
<httpRuntime requestValidationMode="2.0" />

At the top of the page into the page tag, add:

ASP.NET
validateRequest="false"

Now you are ready to enjoy.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Software Developer
Netherlands Netherlands
20 years IT, Sinds 2010 development.
C#, asp.net, Blazor, MVC, html, css, VB.net, SQL, javascript, jquery, xml, linq.

Comments and Discussions

 
GeneralAwesome Work Pin
harisivan026-Mar-15 20:35
harisivan026-Mar-15 20:35 
GeneralAWESOME SOLUTION Pin
Athar Anis11-Jan-15 6:12
Athar Anis11-Jan-15 6:12 
Questionquestion about tinymce Pin
Member 108164541-Aug-14 11:27
Member 108164541-Aug-14 11:27 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.