TinyMCE的使用（包括漢化及本地圖片上傳功能）

時間 2019-11-24

標籤 tinymce 使用包括本地圖片上傳功能简体版

原文原文鏈接

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

下載下來是英文版，要漢化也很簡單。首先去網上隨便下載個漢化包，而後把漢化包解壓後的langs文件夾裏css

的zh_CN.js拷到你下載的TinyMCE的langs文件夾中就行。最後在 tinymce.init中加上html

」language: "zh_CN"，"（後面會貼出代碼）java

本地圖片上傳我用到了Jquery中的uploadify和UI,因此須要引用jquery.uploadify.min.js和jquery-ui.jsjquery

Jquery中uploadify有基於flash和基於HTML兩個版本，後者是要$5。。。這個，，我仍是用的基於flash的。web

那麼還須要添加swfobject.js引用。這些引用的下載就不貼了，網上不少不少。post

基本介紹完了，下面直接看代碼：ui

<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>

說明：url

  $("#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("上傳失敗");
               }
           });