WordPress投稿功能添加编辑器

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

一、下载KindEditor

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

二、新建 tougao.php

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

<?php
if( isset($_POST[‘tougao_form’]) && $_POST[‘tougao_form’] == ‘send’){
if( isset($_COOKIE[“tougao”]) && ( time() – $_COOKIE[“tougao”] ) < 120 ){
wp_die(‘您投稿也太勤快了吧，先歇会儿！’);
}
//表单变量初始化
$name = isset( $_POST[‘tougao_authorname’] ) ? $_POST[‘tougao_authorname’] : ”;
$email = isset( $_POST[‘tougao_authoremail’] ) ? $_POST[‘tougao_authoremail’] : ”;
$blog = isset( $_POST[‘tougao_authorblog’] ) ? $_POST[‘tougao_authorblog’] : ”;
$title = isset( $_POST[‘tougao_title’] ) ? $_POST[‘tougao_title’] : ”;
$tags = isset( $_POST[‘tougao_tags’] ) ? $_POST[‘tougao_tags’] : ”;
$category = isset( $_POST[‘cat’] ) ? (int)$_POST[‘cat’] : 0;
$content = isset( $_POST[‘tougao_content’] ) ? $_POST[‘tougao_content’] : ”;
//表单项数据验证
if ( emptyempty($name) || strlen($name) > 20 ){
wp_die(‘昵称必须填写，且不得超过20个长度’);
}
if ( emptyempty($email) || strlen($email) > 60 || !preg_match(“/^([a-z0-9\+_\-]+)(\.[a-z0-9\+_\-]+)*@([a-z0-9\-]+\.)+[a-z]{2,6}$/ix”, $email)){
wp_die(‘邮箱必须填写，且不得超过60个长度，必须符合 Email 格式’);
}
if ( emptyempty($title) || strlen($title) > 100 ){
wp_die(‘文章标题必须填写，且不得超过100个长度’);
}
if ( emptyempty($content) || strlen($content) < 100){
wp_die(‘内容必须填写，且不得少于100个长度’);
}
$tougao = array(‘post_title’ => $title,’post_content’ => $content,’post_status’ => ‘pending’,’tags_input’ => $tags,’post_category’ => array($category));
$status = wp_insert_post( $tougao );//将文章插入数据库
if ($status != 0){
global $wpdb;
$myposts = $wpdb->get_results(“SELECT ID FROM $wpdb->posts WHERE post_status = ‘pending’ AND post_type = ‘post’ ORDER BY post_date DESC”);
add_post_meta($myposts[0]->ID, ‘tcp_postauthor’, $name); //插入投稿人昵称的自定义域
if( !emptyempty($blog))
add_post_meta($myposts[0]->ID, ‘tcp_posturl’, $blog); //插入投稿人网址的自定义域
setcookie(“tougao”, time(), time()+180);
wp_die(‘投稿成功！’,’投稿成功！’);
}else{
wp_die(‘投稿失败！’,’投稿失败！’);
}
}
get_header();
?>
<body>
<script type=“text/javascript” src=“<?php bloginfo(‘template_url’); ?>/kindeditor/kindeditor-min.js”></script>
<script type=“text/javascript” src=“<?php bloginfo(‘template_url’); ?>/kindeditor/lang/zh_CN.js”></script>
<script type=“text/javascript”>
$(document).ready(function(){
var editor;
KindEditor.ready(function(K) {
editor = K.create(‘textarea[name=“tougao_content”]’, {
allowFileManager : false,
allowImageUpload : false
});
});
});
</script>
<?php if (have_posts()) : ?><?php while (have_posts()) : the_post(); ?>
<?php include(‘top.php’); ?>
<div id=“wrapper” class=“clearfix”>
<div id=“navigation”>
<div class=“navigation”>
<strong>
<a title=“返回首页” href=“<?php bloginfo(‘home’); ?>”>home</a>
</strong>
<a title=“<?php the_title(); ?>”><?php the_title(); ?></a>
</div>
<?php include(“includes/notice.php”); ?>
</div>
<div class=“tougao divmargin”>
<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;”>
<?php the_content(‘More »’); ?>
</div>
<div class=“entry”>
<form method=“post” action=“<?php echo $_SERVER[“REQUEST_URI“]; ?>”>
<div id=“basicinfo”>
<p>
<label>昵称:</label>
<input type=“text” value=“” name=“tougao_authorname” />
<small>*</small>
</p>
<p>
<label>E-Mail:</label>
<input type=“text” value=“” name=“tougao_authoremail” />
<small>*</small>
</p>
<p>
<label>您的网站:</label>
<input type=“text” value=“” name=“tougao_authorblog” />
</p>
<p>
<label>文章标题:</label>
<input type=“text” value=“” name=“tougao_title” />
<small>*</small>
</p>
<p>
<label>文章分类:</label>
<?php wp_dropdown_categories(‘show_count=1&hierarchical=1’); ?>
<small>*</small>
</p>
<p>
<label>关键字:</label>
<input type=“text” value=“” name=“tougao_tags” />
<small>*</small>
</p>
</div>
<div>
<label>文章内容:(必须)</label>
</div>
<div class=“post-area”>
<textarea rows=“15” cols=“55” id=“tougao_content” name=“tougao_content”></textarea>
</div>
<p>
<input type=“hidden” value=“send” name=“tougao_form” />
<input id=“submit” name=“submit” type=“submit” value=“提交文章” />
<input id=“reset” name=“submit” type=“reset” value=“重填” />
</p>
</form>
</div>
</div>
</div>
<?php endwhile; else: ?>
<?php endif; ?>
<?php get_footer(); ?>

三、效果图

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

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

WordPress投稿功能添加编辑器

发表回复

联系我们

WordPress投稿功能添加编辑器

相关推荐

wordpress注册时邮件即发送密码也显示

修改CodeRender(Unmi)样式颜色

发表回复

联系我们