Tinymce (Rich Text Editor)

Effect preview: http://www.tinymce.com/tryit/full.php

 

[Conversion] How to Use tinymce (Rich Text Editor) in ASP. NET

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

Tinymce's use in ASP. NET is actually quite simple, download tinymce from the official website), and then copy the jscripts directory to your website directory.

Suppose you need to use the editor somewhere on your ASPX page, add

<Asp: textbox id = "brand" textmode = "multiline" runat = "server"/>

Add the following content to 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 to see an editor, and you can use brand. text to get the value (You may see an error prompt, then you only need. add validaterequest = "false" to the <% @ page at the beginning of Aspx)

Of course, if you have multiple textareas on your page, you may only want to replace one with an editor, then the above mode line is changed:

Mode: "exact", elements: "corresponding ID"

For other usage instructions, go to the official website.

----------------------------------------------------------------
Chinese garbled characters:

After tinymce's Language Pack is set, it is always abnormal when used in Asp.net, and the content of the Language Pack cannot be read.
After careful research, it turns out that the default httpresponse output of Asp.net 2.0 is UTF-8, not Chinese gb2312, or gb18030, Hz, so the settings are correct, however, an error occurs during page execution and the configuration of the Language Pack cannot be correctly read.
We can add the setting statement to load the page class to solve this problem.

  Response.ContentEncoding = Encoding.GetEncoding("gb2312")

After re-compilation, You can normally read the content in the Chinese language resource package.

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

Related resource collection:

Tinymce Chinese manual Co., http://www.inpeck.com/TinyMceManual/

Several useful plug-ins in tinymce: http://joom.org.ru/home/article/14-tinymce-plugin.html

Online Editor tinymce 3 Simplified Chinese Language Pack: http://www.metalstar.net /? D = 86

Tinymce small Chinese fonts solution http://www.humker.com/2008/03/07/tinymce-chinese-font-size

Made of custom controls: http://www.jonllen.com/jonllen/aspnet/tinymce.aspx

No matter which version of tinymce is used, the default Chinese font is too small. After editing and saving it, the default font becomes quite large.

Solution: In JS \ themes \ Advanced \ CSS \ editor_content.css

Body, TD, pre {
Font-family: verdana, Arial, Helvetica, sans-serif;
Font-size: 12px;
}

Change 10px to 12px.

 

Integrating tinymce editor with ASP. NET

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

• Download source-550.88 KB

Introduction

In one of my projects, there was 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 guest SS tinymce Editor (http://tinymce.moxiecode.com /). but, I had some issues in integrating the same with ASP. NET applications. the following write up provides one of the ways to integrate with tinymce.

How

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

Step 1: Download the latest version (Tinymce_3_3_7.zip) From the following location,Http://tinymce.moxiecode.com/download.php. Unzip the downloaded. ZipFile in one of your local folders.

Step 2: Create an ASP. NET web application and copyTinymceFolder to the Web application. The Solution Explorer wowould look something like this.

Note: You can removeExamplesFolder underTinymceFolder.

Step 3: Add a referenceTiny_mce.jsFile to the page in which you wowould like to integrate the tinymce editor.

IncludeTiny_mce.jsFile at the top of 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 are quite customizable, please check the examples section 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: ‘example2‘ }, { title: ‘Table styles‘ }, { title: ‘Table row 1‘, selector: ‘tr‘, classes: ‘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="elm1" name="elm1" rows="15" cols="80" style="width: 80%" runat="server"></textarea>

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

Additional features

In case you wowould Want To Have pre rendered text with some non editable text, use the CSS classmceNonEditableFor the text you wowould Want To Make It non editable.

Collapse | copy code

this.elm1.Value = "<p>This is a test document. Some <span class=‘mceNonEditable‘ style=\"color: #ff0000;\">Portion</span> of this document can‘t be changed.</p>\r\n<p>The area with red <span class=‘mceNonEditable‘ style=\"color: #ff0000;\">background </span>can‘t be <span class=‘mceNonEditable‘ style=\"color: #ff0000;\">removed</span>. You can only <span class=‘mceNonEditable‘ style=\"color: #ff0000;\">change </span>the area with black.</p>\r\n<p>&nbsp;</p>"; 

Wherethis.elm1 Is a textarea control.

Summary

I had difficulties in getting it to work, hence thought this shoshould be useful for people wanting to integrate the tinymce editor with their ASP. NET applications.

From http://www.codeproject.com/Articles/88142/Integrating-TinyMCE-Editor-with-ASP-NET