TinyMCE（富文本編輯器）

效果預覽：http://www.tinymce.com/tryit/full.php

 

[轉]TinyMCE（富文本編輯器）在Asp.Net中的使用方法

轉自：http://www.cnblogs.com/hahacjh/archive/2010/07/24/1784268.html

TinyMCE 在Asp.Net中的使用方法其實挺簡單的，從官方網站下載TinyMCE),而後將裏面的jscripts目錄拷到你的網站目錄

假設你的aspx頁面中某一個地方須要用到編輯器，則加入

<asp:TextBox ID=」brand」 TextMode=」MultiLine」 runat=」server」 />

並同時在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>

 

運行頁面，便可以看到一個編輯器出現了，而且你在服務端能夠經過brand.Text來獲取值(你可能會看到一個出錯的提示，這時只須要將.aspx最開始的<%@ Page 里加入ValidateRequest=」false」,便可)

固然，若是你頁面中有多個textareas,你可能只但願某一個用編輯器代替，則上面的mode一行改成:

mode : "exact", elements : 「對應的ID」

須要其它的用法，能夠到官方網站查看

----------------------------------------------------------------
中文亂碼問題：

在設置好TinyMCE的語言包後，在ASP.net中使用的時候卻老是不正常，沒法爭取讀取到語言包內容。
仔細研究後發現,原來是由於ASP.net 2.0默認的HTTPResponse輸出的編碼是utf-8,而非中文gb2312,或是gb18030、HZ因此就會出現設置正確，可是在頁面執行的時候卻出現錯誤，不能正確讀取語言包的配置的問題。
咱們能夠在Page類的加載過程Load中加入若是設置語句就能夠解決這個問題

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

從新編譯執行後，就能夠正常讀取到中文語言資源包中的內容了。

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

相關資源收集:

TinyMCE 中文手冊 http://www.inpeck.com/TinyMceManual/ 

tinymce中幾個比較有用的插件: http://joom.org.ru/home/article/14-tinymce-plugin.html 

在線編輯器 TinyMCE 3 的簡體中文語言包: http://www.metalstar.net/?d=86 

tinymce中文字體太小解決方法  http://www.humker.com/2008/03/07/tinymce-chinese-font-size 

作成自定義控件：http://www.jonllen.com/jonllen/aspnet/tinymce.aspx

tinymce無論哪一個版本，中文的默認字體都是過小了，編輯了保存之後再拿出來還莫名其妙的變的很大。

解決方案：js\themes\advanced\css\editor_content.css中的 

body, td, pre {
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: 12px;
}

 

10px改成12px就能夠了。

 

Integrating TinyMCE Editor with ASP.NET

轉自：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 across 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 To

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 .zip file in one of 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 like this.

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

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

<textarea id="elm1" name="elm1" rows="15" cols="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.NET page.

Additional Features

In case you would want to have pre rendered text with some non editable text, use the CSS class mceNonEditablefor the text you would 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>"; 

Where this.elm1 is a textarea control.

Summary

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

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