65.9K
CodeProject is changing. Read more.
Home

TinyMCE for ASP.NET

starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.54/5 (7 votes)

Jan 19, 2014

CPOL
viewsIcon

43601

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:

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

 <httpRuntime requestValidationMode="2.0" /> 

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

validateRequest="false"

Now you are ready to enjoy.