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引用。这些引用的下载就不贴了，网上很多很多。
基本介绍完了，下面直接看代码：
<styletype="text/css">
.mceuploadify{
display:block;
}
</style>
<linkrel="stylesheet"href="@Url.Content("~/uploadify/uploadify.css")"/>
<scripttype="text/javascript"src="@Url.Content("~/Content/js/history.js")"></script>
<scripttype="text/javascript"src="@Url.Content("~/tinymce_4.3.12/tinymce/js/tinymce/tinymce.min.js")"></script>
<scripttype="text/javascript"src="@Url.Content("~/Scripts/jquery-1.4.4.min.js")"></script>
<scripttype="text/javascript"src="@Url.Content("~/Scripts/jquery-ui.js")"></script>
<scripttype="text/javascript"src="@Url.Content("~/uploadify/jquery.uploadify.min.js")"></script>
<scripttype="text/javascript"src="@Url.Content("~/uploadify/swfobject.js")"></script>
<scripttype="text/javascript">
$(document).ready(function(){
vartinymceEditor;
tinymce.init({
selector:"textarea#Content",
auto_focus:"Content",
language:"zh_CN",
theme:"modern",
plugins:[
"advlistautolinklistslinkimagecharmappreview",
"searchreplacevisualblocksfullscreen",
"insertdatetimemediatablecontextmenupaste",
"emoticonstextcolor"
],
toolbar1:"undoredo|styleselect|fontselect|fontsizeselect|bolditalicunderlinestrikethrough|alignleftaligncenteralignrightalignjustify|bullistnumlistoutdentindent",
toolbar2:"fullscreenpreview|forecolorbackcoloremoticons|table|linkimagemedia|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;ComicSansMS=comicsansms,sans-serif;CourierNew=couriernew,courier;Tahoma=tahoma,arial,helvetica,sans-serif;TimesNewRoman=timesnewroman,times;Verdana=verdana,geneva;Webdings=webdings;Wingdings=wingdings,zapfdingbats",
fontsize_formats:"8pt10pt12pt14pt18pt24pt36pt"
});
$("#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){
varimg="<imgsrc='../../../UploadImg/"+data+"'>";
tinymceEditor.insertContent(img);
setTimeout(function(){
$("#uploadofedit").dialog('close');
},1000);
},
'onUploadError':function(){
setTimeout(function(){
$("#uploadofedit").dialog('close');
},1000);
alert("上传失败");
}
});
});
</script>
<div>
<formmethod="post"action="/Home/">
<textareaid="content"name="content"style="width:100%;height:600px;"></textarea>
<inputtype="submit"value="提交"/>
</form>
</div>
<divid='uploadofedit'style="display:none;">
<inputtype='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){
varimg="<imgsrc='../../../UploadImg/"+data+"'>";
tinymceEditor.insertContent(img);
setTimeout(function(){
$("#uploadofedit").dialog('close');
},1000);
},
'onUploadError':function(){
setTimeout(function(){
$("#uploadofedit").dialog('close');
},1000);
alert("上传失败");
}
});
这段代码中的参数，如‘swf','uploader','fileTypeExts‘这几个重要的参数
得根据自己下载的jquery.uploadify.js的版本来确定。具体可以去看官方的说明文档。
以上所述是小编给大家介绍的TinyMCE汉化及本地上传图片功能实例详解，希望对大家有所帮助，如果大家想了解更多内容敬请关注毛票票网站。