在MVC3中使用文档编辑器TinyMCE

TinyMCE是一个强大的在线文档编辑器，并且有丰富的插件扩展。以下是在Asp.Net MVC3中使用TinyMCE的步骤。

1，首先在官方网站http://www.tinymce.com/ 下载最新的压缩包， 我下载的是基于JQuery的库。解压后有2个文件夹，jscripts里面的内容是需要包含在项目里面的，sample里面是例子。

2，新建一个MVC工程，建立一个Model，例子如下，需要使用TinyMCE的字段，类型设为ntext，MaxLength，加入UIHintAttribute，参数为我们建立的编辑器Template名。

using System.ComponentModel.DataAnnotations;
using System.ComponentModel.DataAnnotations.Schema;

namespace MVC4Sample.Models
{
    [Table("Article")]
    public class Article
    {
        [Key]
        [DatabaseGeneratedAttribute(DatabaseGeneratedOption.Identity)]
        public int Id { get; set; }


        public string Title { get; set; }

        [Column(TypeName = "ntext")]
        [MaxLength]
        [UIHint("tinymce_jquery_full")]
        public string Content { get; set; }
    }
}

3，新建一个Controller和View，不需要在Article的controller和view中做什么修改。

4，在View\Shared中新建一个文件夹EditorTemplates，放入代码中提到的tinymce_jquery_full.cshtml。需要注意的是，MVC4的_Layout.cshtml中，JS会延迟加载，而我们需要提前加载需要的JS，主要是Jquery库。

@*
Don't forget to reference the JQuery Library here, inside your view or layout.
<script src="@Url.Content("~/Scripts/jquery-x.x.x.min.js")" type="text/javascript"></script>
*@

<script src="@Url.Content("~/Scripts/tiny_mce/jquery.tinymce.js")" type="text/javascript"></script>

<script type="text/javascript">

    (function(){ 

      $(function() { 
      
          $('#@ViewData.TemplateInfo.GetFullHtmlFieldName(string.Empty)').tinymce({

            // Location of TinyMCE script
            script_url: '@Url.Content("~/Scripts/tiny_mce/tiny_mce.js")',
            theme: "advanced",
            
            height: "500",
            width: "790",
            verify_html : false,
            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",
            
            // 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,codehighlighting,netadvimage, insertimage",
            theme_advanced_toolbar_location : "top",
            theme_advanced_toolbar_align : "left",
            theme_advanced_statusbar_location : "bottom",
            theme_advanced_resizing : false,
            
            // Example content CSS (should be your site CSS)
            content_css : "@Url.Content("~/Scripts/tiny_mce/css/content.css")",
            convert_urls : false,
            
            // 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"

        });

      });

    })();

</script>

@Html.TextArea(string.Empty, /* Name suffix */
    ViewData.TemplateInfo.FormattedModelValue /* Initial value */
)

 

运行即可看到结果。