WordPress支持图片上传投稿集成xheditor编辑器实现介绍



WordPress支持图片上传投稿集成xheditor编辑器实现介绍,本文主要讲讲Wordpress投稿编辑框集成xheditor编辑器,并且支持图片上传。

xheditor简介

xhEditor是一个基于jQuery开发的简单迷你并且高效的可视化HTML编辑器,基于网络访问并且兼容IE 6.0+,Firefox 3.0+,Opera 9.6+,Chrome 1.0+,Safari 3.22+。

更多的介绍,请移步xheditor官方

好了下面开始折腾,先来个效果图:

 

集成xhEditor

注意:本文提到的所有文件,一定要保存为UTF-8 不含BOM的格式,否则后果自负!!

1、请先查看之前的《WordPress添加投稿功能》,建立好你的投稿页面,再接着往下看。

2、到xheditor官方下载最新版的xhEditor编辑器,解压后,将xheditor_emot、xheditor_plugins、xheditor_skin这3个文件夹和xheditor-1.1.14-zh-cn.min.js复制到现在用的主题文件夹内,重点是在同一个目录。

比如倡萌在现在使用的Hocean主题内建了一个xheditor文件夹,然后将上面说的文件放到这个xheditor文件夹。

3、在主题的header.php文件加载jQuery库和上面的那个js文件,注意修改为自己的路径


1
2
<script type=”text/javascript” src=”http://lib.sinaapp.com/js/jquery/1.4.2/jquery.min.js”></script>
<script type=”text/javascript” src=”<?php bloginfo(‘template_directory’); ?>/xheditor/xheditor-1.1.14-zh-cn.min.js”></script>
注:如果你的主题已经加载了jQuery库,就不要重复添加。

这里还有个小技巧,仅在投稿页面才加载xheditor的js文件,比如,投稿页面的别名是tougao,那可以使用下面的代码

1
2
3
<?php wp_reset_query(); if ( is_page(‘tougao’) ) { ?>
<script type=”text/javascript” src=”<?php bloginfo(‘template_directory’); ?>/xheditor/xheditor-1.1.14-zh-cn.min.js”></script>
<?php } ?>
4、打开你的投稿页面代码,找到

1
<textarea rows=”15″ cols=”55″ id=”tougao_content” name=”tougao_content”></textarea>
改为

1
<textarea rows=”15″ cols=”55″ id=”tougao_content” name=”tougao_content” class=”xheditor-mfull {height:’380′,urlType:’abs’,upImgUrl:’upload.php?immediate=1′,upImgExt:’jpg,jpeg,gif,png’}”></textarea>
到这里,应该就可以看到编辑器了,但是还不能正常使用图片上传功能,接下往下折腾。

4、在你下载的xhEditor的 demos 文件夹下找到 upload.php ,打开,按照你的要求修改下面的参数

1
2
3
4
5
6
7
8
$inputName=’filedata’;//表单文件域name
$attachDir=’upload’;//上传文件保存路径,结尾不要带/
$dirType=1;//1:按天存入目录 2:按月存入目录 3:按扩展名存目录 建议使用按天存
$maxAttachSize=2097152;//最大上传大小,默认是2M
$upExt=’txt,rar,zip,jpg,jpeg,gif,png,swf,wmv,avi,wma,mp3,mid’;//上传扩展名
$msgType=2;//返回上传参数的格式:1,只返回url,2,返回参数数组
$immediate=isset($_GET['immediate'])?$_GET['immediate']:0;//立即上传模式,仅为演示用
ini_set(‘date.timezone’,'Asia/Shanghai’);//时区
倡萌建议将第二行的路径修改为wordpress默认的上传目录:

1
$attachDir=’wp-content/uploads’;
当然了,你也可以按照自己的需要更改,但是要注意一点,该目录必须存在,并可写入!!

其他的参数,自己看着办,不懂就不要动。

最重要的一步:将这个upload.php 文件上传到你wordpress的根目录,到此应该就可以正常上传图片了!

如果你想看看实际的效果,请移步倡萌的投稿页面