TinyMCE汉化及本地上传图片功能实例详解
编程学习 2021-07-04 19:59www.dzhlxh.cn编程入门
这篇文章主要介绍了TinyMCE汉化及本地上传图片功能实例详解的相关资料,由于我们下载下拉的是英文版,需要先汉化,比较简单,需要的朋友可以参考下
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引用。这些引用的下载就不贴了,网上很多很多。
基本介绍完了,狼蚁网站SEO优化直接看代码:
<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("上传失败"); } });
这段代码中的参数,如‘swf','uploader','fileTypeExts‘这几个重要的参数
得根据自己下载的jquery.uploadify.js的版本来确定。具体可以去看官方的说明文档。
以上所述是长沙网络推广给大家介绍的TinyMCE汉化及本地上传图片功能实例详解,希望对大家有所帮助,如果大家想了解更多内容敬请关注狼蚁SEO网站。