TinyMCE漢化及本地上傳圖片功能實(shí)例詳解
TinyMCE我就不多介紹了,這是下載地址:https://www.tinymce.com/download/
下載下來是英文版,要漢化也很簡(jiǎn)單。
首先去網(wǎng)上隨便下載個(gè)漢化包,然后把漢化包解壓后的langs文件夾里的zh_CN.js拷到你下載的TinyMCE的langs文件夾中就行。最后在 tinymce.init中加上”language: "zh_CN","(后面會(huì)貼出代碼)
本地圖片上傳我用到了Jquery中的uploadify和UI,所以需要引用jquery.uploadify.min.js和jquery-ui.js
Jquery中uploadify有基于flash和基于HTML兩個(gè)版本,后者是要$5。。。這個(gè),,我還是用的基于flash的。
那么還需要添加swfobject.js引用。這些引用的下載就不貼了,網(wǎng)上很多很多。
基本介紹完了,下面直接看代碼:
<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 會(huì)將所有的 font 元素轉(zhuǎn)換成 span 元素 convert_fonts_to_spans: true, //換行符會(huì)被轉(zhuǎn)換成 br 元素 convert_newlines_to_brs: false, //在換行處 TinyMCE 會(huì)用 BR 元素而不是插入段落 force_br_newlines: false, //當(dāng)返回或進(jìn)入 Mozilla/Firefox 時(shí),這個(gè)選項(xiàng)可以打開/關(guān)閉段落的建立 force_p_newlines: false, //這個(gè)選項(xiàng)控制是否將換行符從輸出的 HTML 中去除。選項(xiàng)默認(rèn)打開,因?yàn)樵S多服務(wù)端系統(tǒng)將換行轉(zhuǎn)換成 <br />,因?yàn)槲谋臼窃跓o格式的 textarea 中輸入的。使用這個(gè)選項(xiàng)可以讓所有內(nèi)容在同一行。 remove_linebreaks: false, //不能把這個(gè)設(shè)置去掉,不然圖片路徑會(huì)出錯(cuò) relative_urls: false, //不允許拖動(dòng)大小 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("上傳失敗"); } });
這段代碼中的參數(shù),如‘swf','uploader','fileTypeExts‘這幾個(gè)重要的參數(shù)
得根據(jù)自己下載的jquery.uploadify.js的版本來確定。具體可以去看官方的說明文檔。
以上所述是小編給大家介紹的TinyMCE漢化及本地上傳圖片功能實(shí)例詳解,希望對(duì)大家有所幫助,如果大家想了解更多內(nèi)容敬請(qǐng)關(guān)注腳本之家網(wǎng)站。
相關(guān)文章
javascript錯(cuò)誤的認(rèn)識(shí)不用關(guān)心內(nèi)存管理
因?yàn)槔厥盏拇嬖?,讓javascript等高級(jí)語言開發(fā)者產(chǎn)生了一個(gè)錯(cuò)誤的認(rèn)識(shí),以為可以不用關(guān)心內(nèi)存管理,需要的朋友可以了解下2012-12-12最常見的左側(cè)分類菜單欄jQuery實(shí)現(xiàn)代碼
這篇文章主要為大家詳細(xì)介紹了最常見的左側(cè)分類菜單欄jQuery實(shí)現(xiàn)代碼,仿京東、淘寶等各大類網(wǎng)站效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-11-11Jquery實(shí)現(xiàn)動(dòng)態(tài)切換圖片的方法
這篇文章主要介紹了Jquery實(shí)現(xiàn)動(dòng)態(tài)切換圖片的方法,涉及jQuery頁(yè)面元素操作及鏈?zhǔn)讲僮鞯南嚓P(guān)技巧,需要的朋友可以參考下2015-05-05jQuery實(shí)現(xiàn)帶遮罩層效果的blockUI彈出層示例【附demo源碼下載】
這篇文章主要介紹了jQuery實(shí)現(xiàn)帶遮罩層效果的blockUI彈出層,可實(shí)現(xiàn)帶有彈出遮罩層效果的彈出對(duì)話框功能,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2016-09-09javascript 自定義回調(diào)函數(shù)示例代碼
使用函數(shù)做參數(shù)就有下面的好處:當(dāng)你a(b)的時(shí)候函數(shù)b就成了回調(diào)函數(shù),而你還可以a(c)這個(gè)時(shí)候,函數(shù)c就成了回調(diào)函數(shù)2014-09-09