立即登录 注册新帐号

http://www.chutianz.com - 楚天站长站

会员投稿 匿名投稿 投稿指南 RSS订阅 楚天站长站推荐:
搜索: 您的位置主页 > 网站运营 > 建站经验 > 阅读资讯:WordPress投稿功能添加富文本编辑器

WordPress投稿功能添加富文本编辑器

2012-09-27 11:25:18 来源:ludou.org 【 】 点击:我要投稿 发表评论

在N年前,我写了一片教程:,这篇教程目前的点击率已经快接近9000了,算是笔者博客最火的一篇文章了。这篇教程从发布到现在,不知道改过多少遍了,也不断收到读者各方面的需求,我也在留言中给他们一一回复了,所以文章中找不到你想要的东西,可以看看留言。

鉴于留言中我已经给很多读者指导怎么修改代码,如果现在再去修改文章中的代码,势必会导致代码所在行数的变化,等于毁了我之前给读者的所有回复。最近一段时间,我将再写几篇文章,告诉你怎么增强这个投稿功能。今天要讲的是如何给这个投稿功能添加一个富文本编辑器(也包括了图片上传功能),原来的代码只能实现一个简单的纯文本输入框,对于投稿者的输入体验不太好。

一、下载KindEditor

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

二、修改HTML页面

打开WordPress添加投稿功能,下面我们将对这篇文章中的代码进行修改。

将代码一中第41行的</form>改成:

</form>
<script charset="utf-8" src="<?php bloginfo('template_url'); ?>/kindeditor/kindeditor-min.js"></script>
<script charset="utf-8" src="<?php bloginfo('template_url'); ?>/kindeditor/lang/zh_CN.js"></script>
<script>
/* 编辑器初始化代码 start */
    var editor;
    KindEditor.ready(function(K) {
        editor = K.create('#tougao_content', {
        resizeType : 1,
        allowPreviewEmoticons : false,
        allowImageUpload : true, /* 开启图片上传功能,不需要就将true改成false */
        items : [
            'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold', 'italic', 'underline',
            'removeformat', '|', 'justifyleft', 'justifycenter', 'justifyright', 'insertorderedlist',
            'insertunorderedlist', '|', 'emoticons', 'image', 'link']
        });
    });
/* 编辑器初始化代码 end */
</script>

三、php代码小修改

代码二第37行代码改成:

$content =  isset( $_POST['tougao_content'] ) ? trim($_POST['tougao_content']) : '';
$content = str_ireplace('?>', '?&gt;', $content);
$content = str_ireplace('<?', '&lt;?', $content);
$content = str_ireplace('<script', '&lt;script', $content);
$content = str_ireplace('<a ', '<a rel="external nofollow" ', $content);

四、自定义编辑器功能

经过以上三步的修改,目前你的编辑器就可以正常使用了。但是对不同人来说,他们的需求可能不太一样,有人可能会觉得上面的编辑器太过简单。那么怎样自定义编辑器的功能呢?这里我就不讲编程了,简单点就找编辑器自带的样例来说就行了。

我们下载的kindeditor目录下有个examples文件夹,这里是部分演示,双击打开index.html可以看到所有演示。你是否看中某个演示呢?那就用文本编辑器打开它的html文件,查看里面的代码。这些html文件的代码中都可以看到类似代码:

<script charset="utf-8" src="../kindeditor-min.js"></script>
<script charset="utf-8" src="../lang/zh_CN.js"></script>
<script>
    ... 编辑器初始化代码
</script>

编辑器初始化代码那部分代码替换第三步中的编辑器初始化代码,然后将 'textarea[name="content"]' ,改成 '#tougao_content'即可。

好了,添加个编辑器就是这么简单。如果你会编程,或者懂看文档,动手能力强,可以看看KindEditor的文档,自己动手玩玩:。

本文地址:

感谢 的投稿 本文仅代表作者观点,与楚天站长站立场无关。

分享到:

数据统计中!!

tags:站长之家, WordPress投稿, 富文

 责任编辑:毛新红
  • 上一篇:网站更换主机且不影响网站排名
  • 下一篇:一个小改动让网站使用率提升240%
  • 相关文章列表                                                                                     收藏 - 挑错 - 推荐 - 打印
      跨域iframe高度自适应(兼容IE/FF/OP/C
      查询网站外链又有新方法
      邮件营销的打开率从4%到46%我只做了3件
      中小企业如何通过网站带来客户和订单
      SEOER如何认识更多的站长朋友
      专访推草网曹操:分享友情链接平台运营
      电商企业库存管理的三大疑难杂症
      分享经验:利用百科提升自己网站权重排
    评论总数: 条 [ 查看全部 ] 网友评论
    楚天站长站最新文章
    • · 网站设计:什么样的首页设计才有好卖相?
    • · 案例分析 兴趣图谱和社交图谱的那点事
    • · 从“苏宁吞并红孩儿”感言电商网站的拯救之
    • · 网站用户体验:永远不要低估用户提出的改进
    • · 白鸦谈导购(一):我们为什么需要导购
    • · 企业社会整合营销要懂得潜伏 网站推广把握
    • · 网赚 混迹网络的你是赚了还是亏了
    • · WordPress投稿功能添加富文本编辑器
    • · 一个小改动让网站使用率提升240%
    • · Google Analytics站内搜索分析思路与方法(
    • · 站长如何选择实用的域名
    • · 网站更换主机且不影响网站排名
    • · 12306网站抢票成功经验分享
    • · 三个知名儿童品牌玩转内容营销的案例
    • · Godaddy域名DNS被墙免费解决办法
    推荐资讯
    • · 整洁之道 如何让代码更明确、简单、有力
    • · Spring双数据库配置
    • · 有感于坚持做有价值的事情
    • · 关键词 网站推广中不可或缺的利器
    • · 网站精益用户体验(UX):摆脱只注重结果的
    • · 唱吧与腾讯微博:7天回流500万的经典案例
    • · 百度的云平台——BAE搭建WordPress教程
    • · 专访一泉钱币交易网叶大钢:特色 让网站
    • · 浅谈用户体验背后的8个用户本能
    • · 通过GA自定义报告简化PPC工作流程
    • · 凸显站长身份 专属站长的免费域名邮箱
    • · 交互探讨:以用户场景和产品需求导向的设