TinyMCE汉化及本地上传图片功能实例详解

<style type="text/css">.mceuploadify{display:block;} </style><link rel="stylesheet" href="@Url.Content("~/uploadify/uploadify.css")"/><script type="text/javascript" src="@Url.Content("~/Content/js/history.js")"></script><script type="text/javascript" src="@Url.Content("~/tinymce_4.3.12/tinymce/js/tinymce/tinymce.min.js")"></script><script type="text/javascript" src="@Url.Content("~/Scripts/jquery-1.4.4.min.js")"></script><script type="text/javascript" src="@Url.Content("~/Scripts/jquery-ui.js")"></script><script type="text/javascript" src="@Url.Content("~/uploadify/jquery.uploadify.min.js")"></script><script type="text/javascript" src="@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='../../../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>

$("#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='../../../UploadImg/" + data + "'>";tinymceEditor.insertContent(img);setTimeout(function () {$("#uploadofedit").dialog('close');}, 1000);},'onUploadError': function () {setTimeout(function () {$("#uploadofedit").dialog('close');}, 1000);alert("上传失败");}});