TinyMCE汉化及本地上传图片功能实例详解


Posted in Javascript onMay 31, 2016

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

下载下来是英文版,要汉化也很简单。

首先去网上随便下载个汉化包,然后把汉化包解压后的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引用。这些引用的下载就不贴了,网上很多很多。

基本介绍完了,下面直接看代码:

<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汉化及本地上传图片功能实例详解,希望对大家有所帮助,如果大家想了解更多内容敬请关注三水点靠木网站。

Javascript 相关文章推荐
js prototype截取字符串函数
Apr 01 Javascript
判断客户端浏览器是否安装了Flash插件的多种方法
Aug 11 Javascript
jquery全选checkBox功能实现代码(取消全选功能)
Dec 10 Javascript
jquery遍历筛选数组的几种方法和遍历解析json对象
Dec 13 Javascript
Jquery倒计时源码分享
May 16 Javascript
jQuery+json实现的简易Ajax调用实例
Dec 14 Javascript
AngularJS出现$http异步后台无法获取请求参数问题的解决方法
Nov 03 Javascript
js中的触发事件对象event.srcElement与event.target详解
Mar 15 Javascript
在vue项目中使用sass的配置方法
Mar 20 Javascript
Vue中使用clipboard实现复制功能
Sep 05 Javascript
Vue和React有哪些区别
Sep 12 Javascript
如何使JavaScript休眠或等待
Apr 27 Javascript
JS定时器使用,定时定点,固定时刻,循环执行详解
May 31 #Javascript
BootStrap创建响应式导航条实例代码
May 31 #Javascript
浅谈js中的延迟执行和定时执行
May 31 #Javascript
温习Javascript基础语法之词法结构
May 31 #Javascript
jQuery文字横向滚动效果的实现代码
May 31 #Javascript
Javascript实现跑马灯效果的简单实例
May 31 #Javascript
javascript实现简易计算器的代码
May 31 #Javascript
You might like
php 数组二分法查找函数代码
2010/02/16 PHP
dojo学习第一天 Tab选项卡 实现
2011/08/28 Javascript
JQuery实现倒计时按钮的实现代码
2012/03/23 Javascript
关于js注册事件的常用方法
2013/04/03 Javascript
基于Unit PNG Fix.js有时候在ie6下不正常的解决办法
2013/06/26 Javascript
jQuery父级以及同级元素查找介绍
2013/09/04 Javascript
js下拉菜单语言选项简单实现
2013/09/23 Javascript
jQuery实现360°全景拖动展示
2015/03/18 Javascript
jquery.fastLiveFilter.js实现输入自动过滤的方法
2015/08/11 Javascript
jquery关于事件冒泡和事件委托的技巧及阻止与允许事件冒泡的三种实现方法
2015/11/27 Javascript
Bootstrap每天必学之工具提示(Tooltip)插件
2016/04/26 Javascript
Node.js插件安装图文教程
2016/05/06 Javascript
JS获得一个对象的所有属性和方法实例
2017/02/21 Javascript
微信小程序开发之toast等弹框提示使用教程
2017/06/08 Javascript
vue实现树形菜单效果
2018/03/19 Javascript
javascript少儿编程关于返回值的函数内容
2018/05/27 Javascript
微信小程序实现签到功能
2018/10/31 Javascript
ES6 Class中实现私有属性的一些方法总结
2019/07/08 Javascript
原生js实现ajax请求和JSONP跨域请求操作示例
2020/03/14 Javascript
小程序实现简单语音聊天的示例代码
2020/07/24 Javascript
JavaScript实现京东快递单号查询
2020/11/30 Javascript
python之wxPython菜单使用详解
2014/09/28 Python
python自动12306抢票软件实现代码
2018/02/24 Python
浅析Python四种数据类型
2018/09/26 Python
python实现公司年会抽奖程序
2019/01/22 Python
Python猴子补丁知识点总结
2020/01/05 Python
pandas数据选取:df[] df.loc[] df.iloc[] df.ix[] df.at[] df.iat[]
2020/04/24 Python
python-地图可视化组件folium的操作
2020/12/14 Python
韩国著名的在线综合购物网站:Akmall
2016/08/07 全球购物
The North Face北面荷兰官网:美国著名户外品牌
2019/10/16 全球购物
《青海高原一株柳》教学反思
2014/04/25 职场文书
律师授权委托书范本
2014/10/07 职场文书
离婚财产分隔协议书
2014/10/23 职场文书
德能勤绩廉个人总结
2015/02/14 职场文书
优秀范文:读《红岩》有感3篇
2019/10/14 职场文书
mysql定时自动备份数据库的方法步骤
2021/07/07 MySQL