tinymce 图片上传插件

最新推荐文章于 2024-07-15 10:36:50 发布

woaitech

最新推荐文章于 2024-07-15 10:36:50 发布

阅读量1.1k

点赞数 1

分类专栏： js html 文章标签： tinymce 图片上传

本文链接：https://blog.csdn.net/woaitech/article/details/45919537

版权

html 同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

2 篇文章 0 订阅

订阅专栏

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))
	
});

效果图