1. 吴文辉博客首页
  2. WordPress

WordPress投稿功能添加编辑器

wwh • • WordPress • 阅读 6248

今天要讲的是如何给这个投稿功能添加一个丰富文本编辑器（也包括了图片上传功能），原来的代码只能实现一个简单的纯文本输入框，对于投稿者的输入体验不太好。

一、下载KindEditor

这里我们将使用KindEditor来作为我们的编辑器，点此下载KindEditor。下载后解压，将文件夹重命名为kindeditor，放到你当前主题文件夹下。

二、新建 tougao.php

在主题目录下新建一个页面模版，可以命名为 tougao.php，文件格式采用UTF-8无BOM格式编码。这点很重要！将以下代码插入 tougao.php 。

  1. <?php   
  2. if( isset($_POST[‘tougao_form’]) && $_POST[‘tougao_form’] == ‘send’){   
  3.     if( isset($_COOKIE[“tougao”]) && ( time() – $_COOKIE[“tougao”] ) < 120 ){   
  4.         wp_die(‘您投稿也太勤快了吧，先歇会儿！’);   
  5.     }   
  6.     //表单变量初始化   
  7.     $name = isset( $_POST[‘tougao_authorname’] ) ? $_POST[‘tougao_authorname’] : ”;   
  8.     $email = isset( $_POST[‘tougao_authoremail’] ) ? $_POST[‘tougao_authoremail’] : ”;   
  9.     $blog = isset( $_POST[‘tougao_authorblog’] ) ? $_POST[‘tougao_authorblog’] : ”;   
  10.     $title = isset( $_POST[‘tougao_title’] ) ? $_POST[‘tougao_title’] : ”;   
  11.     $tags = isset( $_POST[‘tougao_tags’] ) ? $_POST[‘tougao_tags’] : ”;   
  12.     $category = isset( $_POST[‘cat’] ) ? (int)$_POST[‘cat’] : 0;   
  13.     $content = isset( $_POST[‘tougao_content’] ) ? $_POST[‘tougao_content’] : ”;   
  14.     //表单项数据验证   
  15.     if ( emptyempty($name) || strlen($name) > 20 ){   
  16.         wp_die(‘昵称必须填写，且不得超过20个长度’);   
  17.     }   
  18.     if ( emptyempty($email) || strlen($email) > 60 || !preg_match(“/^([a-z0-9\+_\-]+)(\.[a-z0-9\+_\-]+)*@([a-z0-9\-]+\.)+[a-z]{2,6}$/ix”, $email)){   
  19.         wp_die(‘邮箱必须填写，且不得超过60个长度，必须符合 Email 格式’);   
  20.     }   
  21.     if ( emptyempty($title) || strlen($title) > 100 ){   
  22.         wp_die(‘文章标题必须填写，且不得超过100个长度’);   
  23.     }   
  24.     if ( emptyempty($content) || strlen($content) < 100){   
  25.         wp_die(‘内容必须填写，且不得少于100个长度’);   
  26.     }   
  27.     $tougao = array(‘post_title’ => $title,’post_content’ => $content,’post_status’ => ‘pending’,’tags_input’ => $tags,’post_category’ => array($category));   
  28.   
  29.     $status = wp_insert_post( $tougao );//将文章插入数据库   
  30.     if ($status != 0){   
  31.         global $wpdb;   
  32.         $myposts = $wpdb->get_results(“SELECT ID FROM $wpdb->posts WHERE post_status = ‘pending’ AND post_type = ‘post’ ORDER BY post_date DESC”);   
  33.         add_post_meta($myposts[0]->ID, ‘tcp_postauthor’, $name);    //插入投稿人昵称的自定义域   
  34.         if( !emptyempty($blog))   
  35.             add_post_meta($myposts[0]->ID, ‘tcp_posturl’, $blog);    //插入投稿人网址的自定义域   
  36.         setcookie(“tougao”, time(), time()+180);   
  37.         wp_die(‘投稿成功！’,’投稿成功！’);   
  38.     }else{   
  39.         wp_die(‘投稿失败！’,’投稿失败！’);   
  40.     }   
  41. }   
  42. get_header();   
  43. ?>   
  44. <body>   
  45.     <script type=“text/javascript” src=“<?php bloginfo(‘template_url’); ?>/kindeditor/kindeditor-min.js”></script>   
  46.     <script type=“text/javascript” src=“<?php bloginfo(‘template_url’); ?>/kindeditor/lang/zh_CN.js”></script>   
  47.     <script type=“text/javascript”>   
  48.         $(document).ready(function(){   
  49.             var editor;   
  50.             KindEditor.ready(function(K) {   
  51.                 editor = K.create(‘textarea[name=“tougao_content”]’, {   
  52.                     allowFileManager : false,   
  53.                     allowImageUpload : false   
  54.                 });   
  55.             });   
  56.         });   
  57.     </script>   
  58.     <?php if (have_posts()) : ?><?php while (have_posts()) : the_post(); ?>   
  59.     <?php include(‘top.php’); ?>      
  60.     <div id=“wrapper” class=“clearfix”>   
  61.         <div id=“navigation”>   
  62.             <div class=“navigation”>   
  63.                 <strong>   
  64.                 <a title=“返回首页” href=“<?php bloginfo(‘home’); ?>”>home</a>   
  65.                 </strong>   
  66.                 <a title=“<?php the_title(); ?>”><?php the_title(); ?></a>   
  67.             </div>   
  68.             <?php include(“includes/notice.php”);  ?>   
  69.         </div>   
  70.         <div class=“tougao divmargin”>   
  71.             <div class=“entry” style=“background-color: #FFF8D9;border: 1px solid #FEBE8F;border-radius: 2px;color: #FF6600;padding:5px;margin:10px 10px 0px 10px;font-size:13px;”>   
  72.                 <?php the_content(‘More &raquo;’); ?>   
  73.             </div>   
  74.             <div class=“entry”>   
  75.                 <form method=“post” action=“<?php echo $_SERVER[“REQUEST_URI“]; ?>”>   
  76.                     <div id=“basicinfo”>   
  77.                         <p>   
  78.                             <label>昵称:</label>   
  79.                             <input type=“text” value=“” name=“tougao_authorname” />   
  80.                             <small>*</small>   
  81.                         </p>   
  82.                         <p>   
  83.                             <label>E-Mail:</label>   
  84.                             <input type=“text” value=“” name=“tougao_authoremail” />   
  85.                             <small>*</small>   
  86.                         </p>   
  87.                         <p>   
  88.                             <label>您的网站:</label>   
  89.                             <input type=“text” value=“” name=“tougao_authorblog” />   
  90.                         </p>   
  91.                         <p>   
  92.                             <label>文章标题:</label>   
  93.                             <input type=“text” value=“” name=“tougao_title” />   
  94.                             <small>*</small>   
  95.                         </p>   
  96.                         <p>   
  97.                             <label>文章分类:</label>   
  98.                             <?php wp_dropdown_categories(‘show_count=1&hierarchical=1’); ?>   
  99.                             <small>*</small>   
  100.                         </p>   
  101.                         <p>   
  102.                             <label>关键字:</label>   
  103.                             <input type=“text” value=“” name=“tougao_tags” />   
  104.                             <small>*</small>   
  105.                         </p>   
  106.                     </div>   
  107.                     <div>   
  108.                         <label>文章内容:(必须)</label>   
  109.                     </div>   
  110.                     <div class=“post-area”>   
  111.                         <textarea rows=“15” cols=“55” id=“tougao_content” name=“tougao_content”></textarea>   
  112.                     </div>   
  113.                     <p>   
  114.                         <input type=“hidden” value=“send” name=“tougao_form” />   
  115.                         <input id=“submit” name=“submit” type=“submit” value=“提交文章” />   
  116.                         <input id=“reset” name=“submit” type=“reset” value=“重填” />   
  117.                     </p>   
  118.                 </form>   
  119.             </div>   
  120.         </div>   
  121.     </div>   
  122.     <?php endwhile; else: ?>   
  123.     <?php endif; ?>   
  124.     <?php get_footer(); ?>  

 

三、效果图

保存后，在后台新建页面选择模板下拉列表中就可以看到这个页面了，新建一个投稿页面，然后发布即可。注意记得要把KindEditor编辑器文件夹放到主题目录下。

20130517085021

原创文章，作者：wwh，如若转载，请注明出处：https://www.wuwenhui.cn/2632.html

赞 (0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
wwhwwh
0 0
上一篇 2013-05-16
下一篇 2013-05-23

相关推荐

发表回复

登录后才能评论

联系我们

在线咨询：点击这里给我发消息

站长邮箱：admin@wuwenhui.cn
工作时间：周一至周五，8:30-17:30，节假日休息

微信
本站支持QQ一键注册登录，所有资源下载均在文章底部~