TinyMCE及本地上传图⽚功能实例详解
下载下来是英⽂版，要也很简单。
⾸先去⽹上随便下载个包，然后把包解压后的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="@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"
]
,
windows2000系统下载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,
mysql安装配置教程32位//换⾏符会被转换成 br 元素
convert_newlines_to_brs: false,
//在换⾏处 TinyMCE 会⽤ BR 元素⽽不是插⼊段落
force_br_newlines: false,
//当返回或进⼊ Mozilla/Firefox 时，这个选项可以打开/关闭段落的建⽴dos命令格式化u盘
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 n 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');
mysql insert or update}, 1000);
},
'onUploadError': function () {
setTimeout(function () {
$("#uploadofedit").dialog('close');
}, 1000);
alert("上传失败");
}
});
});
</script>
<div>
<form method="post" action="/Home/">
<textarea id="content" name="content" ></textarea>
<input type="submit" value="提交" />
</form>
</div>
<div id='uploadofedit' >
<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);jquery下载文件请求
setTimeout(function () {
$("#uploadofedit").dialog('close');
}, 1000);
},
'onUploadError': function () {
setTimeout(function () {
$("#uploadofedit").dialog('close');
}, 1000);
alert("上传失败");
}
});
这段代码中的参数，如‘swf','uploader','fileTypeExts‘这⼏个重要的参数
得根据⾃⼰下载的jquery.uploadify.js的版本来确定。具体可以去看官⽅的说明⽂档。
以上所述是⼩编给⼤家介绍的TinyMCE及本地上传图⽚功能实例详解，希望对⼤家有所帮助，如果⼤家想了解更多内容敬请关注⽹站。
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论