教你在TinyMCE编辑器中利用上传类插入图片

admin 发表于 [Javascript] 分类,标签: TinyMCE 网页编辑器
0
恩,这个很经典也很实用呵呵 TinyMCE的强大自然无需多说,我们做的也很容易。 找到tiny_mce\plugins\advimage\image.htm,然后在:
<tr>
        <td class="column1"><label id="titlelabel" for="title">{#advimage_dlg.title}</label></td>
        <td colspan="2"><input id="title" name="title" type="text" value="" /></td>
       </tr>
下面插入一行:
<tr>
<td class="column1"><label id="titlelabel" for="title">上传</label></td>
<td colspan="2"><iframe src="../../upload.php" height="30" width="330" frameborder="0"></iframe></td> </tr>
头部添加JS:
<script language="JavaScript">
<!--
function setValue(str) {
document.getElementById("src").value = str;
ImageDialog.showPreviewImage(document.getElementById('src').value);
}
//-->
</script>
注意这里需要根据您自己的 需要调整,写完整的url因为框架页的内容与上传表单页面直接的路径关系很罗嗦,这样就方便了。 然后将tiny_mce\plugins\advimage\css下的样式表中第三行改为{目的是不要把表单给撑破}:
.alignPreview {border:1px solid #000; width:140px; height:100px; overflow:hidden; padding:5px;}
好了,这个是上传的过程:
function upfile()
{
  if($this->spArgs('action')=="upfile"){
      $upFlie=new uploadFile();//spClass('uploadFile');
   $upFlie->upload_file($_FILES['upfile']);
      echo  '<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />';
   echo "<body leftmargin=0 topmargin=0> 成功!<a href=index.php?c=main&a=upfile>继续上传</a></body>"; //$upFlie->uploaded;
   echo"<script>parent.setValue('".$upFlie->uploaded."')</script>";   //这一句很关键!
  } else
  {
   //加载上传表单
echo '
<html>
<body leftmargin="0" topmargin="0">
<form method="post" action="" enctype="multipart/form-data">
    <input type="file" name="upfile" /><input type="hidden" name="action" value="upfile" />
    <input type="submit" name="submit_upload" value="上传" />
</form>
</body>
</html>';
  }
}

发表我的评论