码迷,mamicode.com
首页 > Web开发 > 详细

TinyMCE的使用(包括汉化及本地图片上传功能)

时间:2016-05-31 12:27:29      阅读:818      评论:0      收藏:0      [点我收藏+]

标签:

TinyMCE我就不多介绍了,这是下载地址:https://www.tinymce.com/download/

下载下来是英文版,要汉化也很简单。首先去网上随便下载个汉化包,然后把汉化包解压后的langs文件夹里

的zh_CN.js拷到你下载的TinyMCE的langs文件夹中就行。最后在 tinymce.init中加上

”language: "zh_CN","(后面会贴出代码)

 

本地图片上传我用到了Jquery中的uploadify和UI,所以需要引用jquery.uploadify.min.jsjquery-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"
               ],
               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的版本来确定。具体可以去看官方的说明文档。

后台我就不介绍了

参考博客:http://www.cnblogs.com/guzhehang/p/3629029.html?utm_source=tuicool&utm_medium=referral#commentform

这篇博客后台也写了。就是前台有些没介绍清楚,我的这篇就算是对他的补充吧。

 

TinyMCE的使用(包括汉化及本地图片上传功能)

标签:

原文地址:http://www.cnblogs.com/zuochengsi-9/p/5545181.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!