TinyMCE (Rich Text editor)

Go How to use the TinyMCE (Rich Text Editor) in ASP.

official website demo and sample code: https://www.tinymce.com/docs/demo/image-tools/

Transferred from: http://www.cnblogs.com/hahacjh/archive/2010/07/24/1784268.html

TinyMCE in ASP. NET is very simple to use, download from the official website TinyMCE), and then copy the Jscripts directory inside your site Directory

If you need to use an editor somewhere in your aspx page, join

<asp:textbox id= "brand" textmode= "MultiLine" runat= "Server"/>

And also add in the header:

<script src= ". /js/tiny_mce/tiny_mce_src.js "type=" Text/javascript "></script>
<script language= "javascript" type= "Text/javascript" >
TinyMCE. Init ({
Mode: "Textareas",
Theme: "Simple"
});
</script>

Run the page, you can see an editor appear, and you can pass brand on the server. Text to get the value (you might see an error prompt, just add the validaterequest= "false" to the first <%@ page of the. aspx)

Of course, if you have more than one textareas on your page, you may want to use an editor instead, and the above mode line should read:

Mode: "Exact", elements: "Corresponding ID"

Other usage is required and can be viewed on the official website.

----------------------------------------------------------------
Chinese garbled problem:

After setting up the TinyMCE language pack, it is always not normal to use in ASP.
After careful study, it turns out that the encoding for the default HttpResponse output of the ASP. NET 2.0 is Utf-8, not Chinese gb2312, or GB18030, Hz so the settings are correct, but errors occur when the page executes. A problem with the configuration of the language pack could not be read correctly.
We can add it to the load process of the page class if the SET statement resolves the problem

response.contentencoding = encoding.getencoding ("gb2312")

After you recompile, you can read the contents of the Chinese Language resource pack normally.

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

Related Resource collection:

TinyMCE Chinese font too small solution  

Making a custom control: http://www.jonllen.com/jonllen/aspnet/tinymce.aspx

TINYMCE no matter which version, the Chinese default font is too small, edit the save later to take out also inexplicably changed very much.

Solution: In the JS\THEMES\ADVANCED\CSS\EDITOR_CONTENT.CSS

Body, TD, Pre {
Font-family:verdana, Arial, Helvetica, Sans-serif;
font-size:12px;
}

10px changed to 12px.

Integrating TinyMCE Editor with ASP.

Transferred from: http://www.cnblogs.com/zhouxiao/archive/2012/06/25/2560633.html

• Download source-550.88 KB

Introduction

In one of my projects, there is a requirement to embed a WYSIWYG editor. Some of the features that were looked into were:

• Easy to configure
• Open Source
• In some cases, user can edit only portion of the pre-rendered text in the editor.

After searching a lot, I came across TinyMCE editor (http://tinymce.moxiecode.com/). But, I had some issues in integrating the same with ASP. The following write up provides one of the ways to integrate with TinyMCE.

How to

The following section provides the steps to implement it in ASP.

Step 1: Download The latest version (Tinymce_3_3_7.zip) from the following location,HTTP://TINYMCE . moxiecode.com/download.php. Unzip the downloaded . zip file in one of the your local folders.

Step 2: Create an ASP. NET Web application and copy the TinyMCE folder to the Web application. The Solution Explorer would look something.

Note: You can remove the examples folder under tinymce folder.

Step 3: Add A reference of tiny_mce.js file to the page in which you would like to integrate the TinyMCE Editor.

Include tiny_mce.js file at the top of the your file.

Collapse | Copy Code

<script type="text/javascript" src="tinymce/jscripts/tiny_mce/tiny_mce.js" ></  Script       

Add the following lines of code which initialize all the textarea controls on the WYSIWYG editor type. They is quite customizable, please check the examples sections in their Web site.

Collapse | Copy Code

<script type="Text/javascript "> Tinymce.init ({//General Options Mode:"Textareas ", Theme:"Advanced ", Plugins:"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,wordcount,advlist,autosave ", Setup:Function (ed) {Ed.onKeyPress.add (Function (ed, evt) {}); },//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,|,cite,abbr,acronym,del,ins,attribs,|,visualchars, Nonbreaking,template,pagebreak,restoredraft ", Theme_advanced_toolbar_location:"Top ", Theme_advanced_toolbar_align:"Left ", Theme_advanced_statusbar_location:"Bottom ", theme_advanced_resizing:True//Example content css (should be your site CSS) content_css:"Css/content.css ",//Drop lists for link/image/media/template dialogs Template_external_list_url:"Lists/template_list.js ", External_link_list_url:"Lists/link_list.js ", External_image_list_url:"Lists/image_list.js ", Media_external_list_url:"Lists/media_list.js ",//Style formats Style_formats: [{title:‘Bold text ', inline:‘B '}, {title:‘Red text ', inline:‘Span ', styles: {color:‘#ff0000 '}}, {title:‘Red header ', Block:‘H1 ', styles: {color:‘#ff0000 '}}, {title:‘Example 1 ', inline:‘Span ', classes:‘Example1 '}, {title:‘Example 2 ', inline:span", Classes:  '  ' table Styles '}, {title:  ' table row 1 ', selector:  ' tablerow1 '}], // Replace values for the template plugin template_replace_values: {username:  "some User", StaffID:  "991234"}); </script>   

Step 4: Add A text area control on to the page.

Collapse | Copy Code

 <textarea id< Span class= "Code-keyword" >= "elm1" name = "elm1" rows=" 15 "cols=" Span class= "Code-keyword" >80 "style=" width:80% "runat=" server ">< /textarea>   

Step 5: Execute the page J and you should able to see the editor embedded in your ASP.

Additional Features

Would want to has pre rendered text with some non editable text, use the CSS class for the mceNonEditable text you woul D want to make it non editable.

Collapse | Copy Code

Where is this.elm1  a textarea control.

Summary

I had difficulties in getting it-work, hence thought this should is useful for people wanting to integrate the TinyMCE Editor with their ASP. Applications.

Transfer from Http://www.codeproject.com/Articles/88142/Integrating-TinyMCE-Editor-with-ASP-NET

TinyMCE (Rich Text editor)