TinyMCE的使用（包括汉化及本地图片上传功能）

TinyMCE我就不多介绍了，这是下载地址：https://www.tinymce.com/download/

下载下来是英文版，要汉化也很简单。首先去网上随便下载个汉化包，然后把汉化包解压后的langs文件夹里

的zh_CN.js拷到你下载的TinyMCE的langs文件夹中就行。最后在 tinymce.init中加上

”language: "zh_CN"，"（后面会贴出代码）

本地图片上传我用到了Jquery中的uploadify和UI,所以需要引用jquery.uploadify.min.js和jquery-ui.js

Jquery中uploadify有基于flash和基于HTML两个版本，后者是要$5。。。这个，，我还是用的基于flash的。

那么还需要添加swfobject.js引用。这些引用的下载就不贴了，网上很多很多。

基本介绍完了，下面直接看代码：

<style type="text/css">   .mceuploadify{     display:block;   }  </style><link rel="stylesheet" href="@Url.Content("~/uploadify/uploadify.css")"/><script type="text/javascript" src='/images/loading.gif' data-original="@Url.Content("~/Content/js/history.js")"></script><script type="text/javascript" src='/images/loading.gif' data-original="@Url.Content("~/tinymce_4.3.12/tinymce/js/tinymce/tinymce.min.js")"></script><script type="text/javascript" src='/images/loading.gif' data-original="@Url.Content("~/Scripts/jquery-1.4.4.min.js")"></script><script type="text/javascript" src='/images/loading.gif' data-original="@Url.Content("~/Scripts/jquery-ui.js")"></script><script type="text/javascript" src='/images/loading.gif' data-original="@Url.Content("~/uploadify/jquery.uploadify.min.js")"></script><script type="text/javascript" src='/images/loading.gif' data-original="@Url.Content("~/uploadify/swfobject.js")"></script>  <script type="text/javascript">    $(document).ready(function () {      var tinymceEditor;      tinymce.init({        selector: "textarea#Content",        auto_focus: "Content",        language: "zh_CN",        theme: "modern",        plugins: [          "advlist autolink lists link image charmap preview",          "searchreplace visualblocks fullscreen",          "insertdatetime media table contextmenu paste",          "emoticons textcolor"        ],        toolbar1: "undo redo | styleselect | fontselect | fontsizeselect | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent",        toolbar2: "fullscreen preview | forecolor backcolor emoticons | table | link image media | mybutton",        setup: function (editor) {          editor.addButton('mybutton', {            text: '上传图片',            icon: false,            onclick: function () {              tinymceEditor = editor;              $("#uploadofedit").dialog({                modal: false,                resizable: false,                width: 400,                height: 200,                dialogClass: "mceuploadify"              });            }          });        },        //TinyMCE 会将所有的 font 元素转换成 span 元素        convert_fonts_to_spans: true,        //换行符会被转换成 br 元素        convert_newlines_to_brs: false,        //在换行处 TinyMCE 会用 BR 元素而不是插入段落        force_br_newlines: false,        //当返回或进入 Mozilla/Firefox 时，这个选项可以打开/关闭段落的建立        force_p_newlines: false,        //这个选项控制是否将换行符从输出的 HTML 中去除。选项默认打开，因为许多服务端系统将换行转换成 <br />，因为文本是在无格式的 textarea 中输入的。使用这个选项可以让所有内容在同一行。        remove_linebreaks: false,        //不能把这个设置去掉，不然图片路径会出错        relative_urls: false,        //不允许拖动大小        resize: false,        font_formats: "宋体=宋体;黑体=黑体;仿宋=仿宋;楷体=楷体;隶书=隶书;幼圆=幼圆;Arial=arial,helvetica,sans-serif;Comic Sans MS=comic sans ms,sans-serif;Courier New=courier new,courier;Tahoma=tahoma,arial,helvetica,sans-serif;Times New Roman=times new roman,times;Verdana=verdana,geneva;Webdings=webdings;Wingdings=wingdings,zapf dingbats",        fontsize_formats: "8pt 10pt 12pt 14pt 18pt 24pt 36pt"      });      $("#tinymceuploadify").uploadify({        'swf': '/uploadify/uploadify.swf',        'buttonText': '上传本地图片',        'uploader': '/Home/Upload',        'auto': true,        'fileTypeExts': '*.gif; *.jpg; *.png',        'method': 'post',        'multi': false,        'onUploadSuccess': function (event, data, flag) {          var img = "<img src='/images/loading.gif' data-original='../../../UploadImg/" + data + "'>";          tinymceEditor.insertContent(img);          setTimeout(function () {            $("#uploadofedit").dialog('close');          }, 1000);        },        'onUploadError': function () {          setTimeout(function () {            $("#uploadofedit").dialog('close');          }, 1000);          alert("上传失败");        }      });    });  </script> 

<div><form method="post" action="/Home/"><textarea id="content" name="content" style="width: 100%; height: 600px;"></textarea><input type="submit" value="提交" /></form></div><div id='uploadofedit' style="display: none;"><input type='file' name='tinymceuploadify' id='tinymceuploadify' /><label>只能上传单张10M以下的 png、jpg、gif 格式的图片</label></div>

原标题：TinyMCE的使用（包括汉化及本地图片上传功能）

关键词：上传