您的位置：首页 > 其它

tinymce 图片上传插件

2015-05-22 17:18 246 查看

Tinymce 版本:tinymce_4.1.9

AjaxFileUpload 下载地址 https://github.com/davgothic/AjaxFileUpload

1.首先在tinymce的 plugins目录新建目录advimage

2.创建image.html和plugin.min.js文件

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>我爱1和0-选择图片</title>
</head>
<body>
<form method="post" action="" enctype="multipart/form-data">
<label>选择图片: <input type="file" name="file" id="demo1" /></label>
<div id="uploads">
</div>
</form>
<script type="text/javascript" src="../../../jquery.js"></script>
<script type="text/javascript" src="../../../jquery.ajaxfileupload.js"></script>
<script type="text/javascript">
var fsTinymce = window.opener.window.fsTinymce;
$(document).ready(function() {
$("#demo1").AjaxFileUpload({
action: fsTinymce.documentBaseUrl + "imagesave.php",
onSubmit: function(filename) {
$("#uploads").html("");
},
onComplete: function(filename, response) {
console.log(response);
var ret = response;
if(ret.code == 0)
{
var html = fsTinymce.dom.createHTML('img', {
src: fsTinymce.documentBaseUrl + ret.message,
alt: ''
}
);
fsTinymce.editorManager.activeEditor.execCommand('mceInsertContent', false, html, {
skip_undo: 1
});
}
else
{
alert(ret.message);
}
window.opener = null;
window.open('','_self');
window.close();
}
});
});
</script>
</body>
</html>
其中action: fsTinymce.documentBaseUrl + "imagesave.php",
设置为图片保存url
plugin.min.js文件

tinymce.PluginManager.add("advimage", function(a) {

function d(e) {

//返回按钮点击函数
return function() {
window.fsTinymce = a;
var OpenWindow = window.open("js/tinymce/plugins/advimage/image.html","_blank",
"toolbar=no, menubar=yes, scrollbars=yes,resizable=yes, location=no, status=no, width=400, height=100");

}
}

function e() {
}

a.addButton("advimage", {
icon: "image",
tooltip: "upload image",
onclick: d(e),
stateSelector: "img:not([data-mce-object],[data-mce-placeholder])"
}), a.addMenuItem("advimage", {
icon: "image",
text: "upload image",
onclick: d(e),
context: "insert",
prependToContext: !0
}), a.addCommand("advimage", d(e))

});

效果图

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： tinymce 图片上传

相关文章推荐

新的分享

章节导航