這篇文章主要介紹了TinyMCE漢化及本地上傳圖片功能實(shí)例詳解的相關(guān)資料,由于我們下載下拉的是英文版，需要先漢化，比較簡單，需要的朋友可以參考下

TinyMCE我就不多介紹了，這是下載地址：https://www.tinymce.com/download/

下載下來是英文版，要漢化也很簡單。

首先去網(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ì)大家有所幫助