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

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

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

一、下载KindEditor

这里我们将使用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的文档，自己动手玩玩：KindEditor文档。

本文地址：

注：相关网站建设技巧阅读请移步到建站教程频道。

二 : 百度发布富文本编辑器Ueditor 1.1.7

近日，百度富文本编辑器Ueditor正式对外发布1.1.7版（http://ueditor.baidu.com）。对比之前版本可以发现，新版本不仅新增了表情本地化模式、字数统计等功能，还对现有功能进一步优化和升级，使之更符合第三方网站的实际需求。在产品的稳定性和持续性支持方面，百度也做了大量工作，新版本的稳定性也有了显著提高，官方网站也新添了教程和使用演示。

Ueditor作为百度web前端研发部开发的一款所见即所得的富文本编辑器，上线后广受开发者好评，并反馈了不少功能建议。这些建议促进了1.1.7版本新功能的成型。如增加表情本地化模式，可在config中配置是否开启本地化，让用户表现更为丰富；支持flash的多图片上传，在 word粘贴本地图片时添加了引导上传功能，方便了用户操作；也增加了对图片的排版操作、字数统计、图片操作浮层的开关配置，还支持网络图片和本地图片的等比缩放，以及源码模式的下的代码高亮。新功能带来了更为丰富的使用体验。

在推出新功能的同时， 1.1.7版在功能优化和BUG修复上也有不少进展，例如：优化文本模式粘贴的效果、word粘贴的效果、首行缩进效果、路径配置及源码模式下的代码格式；给下拉菜单添加默认的文字说明，增加插入代码支持的语言，改进了插入代码的展示效果等。新版本解决了ie6和ie7下工具栏浮动时cpu占用过高的问题，修正了ie下点击图片会出现js错误、编辑器的高度不随着内容缩短、粘贴有时会出现粘贴失败等细节上的BUG。

据悉，百度Ueditor采用开源的BSD协议，具有轻量，可定制，注重用户体验等特点。它能极大降低网站的开发成本，尤其在代码部署和定制化开发方面提供了更好的解决方案。目前，易车网论坛、有你汽车网、无忧度假、点点网、EPSON优墨积分社区等一大批第三方网站已将Ueditor作为网站富文本编辑的标准配置。

无忧度假网站开发人员表示，“百度Ueditor相比市场中同类富文本编辑器，代码更精简，具有加载迅速快的轻量级特质，在细节设计上也堪称完美，并且做到了包括Mozilla、MSIE、FireFox、 Maxthon、Safari 和Chrome在内的绝大多数浏览器的良好支持。”很多网站开发者表示，之前用的Fckeditor对FireFox兼容性不太好，Uediter则相反，体验很棒，尤其是在php方向的做得很不错。

百度web前端研发部通过贴吧、微博、Q群等多种渠道，增强与开发者间的交流和沟通，帮助广大开发者更快地了解掌握Ueditor。同时及时收集反馈建议，对Ueditor编辑器的功能持续做优化和完善。相关负责人表示，Ueditor编辑器推出以来，进行了数次更新和升级，已进入成熟和稳定阶段。开源Ueditor是百度与业界分享技术实践，推动产业技术进步的实践，希望Ueditor能成为最适合中国网站开发需求的编辑器。

三 : 百度推出开源富文本Web编辑器：Ueditor

编辑器作为与用户体验息息相关的一个环节，编辑器的优劣将直接影响到用户的应用体验。然而由于国内缺乏先进的富文本编辑器，致使很多开发者在选择 Web编辑器时往往无所适从，或用户体验效果不理想。

此次百度推出的富文本 Ueditor 开源编辑器能降低互联网企业进行网站开发的成本，提高网站的开发速度，尤其在代码部署和定制化开发方面提供解决方案。

Ueditor 概述

Ueditor 是由百度 Web前端研发部开发的所见即所得富文本 Web编辑器，具有轻量，可定制，注重用户体验等特点，开源基于BSD协议，允许自由使用和使用代码。

Ueditor 编辑器UI示例

Ueditor 特点

1.轻量级

代码精简，加载迅速。

2.定制化

全新的分层理念，满足多元化的需求。采用三层架构：

a. 核心层： 为命令层提供底层API，如range/selection/domUtils类。

b. 命令插件层： 基于核心层开发command命令，命令之间相互独立。

c. 界面层： 为命令层提供用户使用界面。满足不同层次用户的需求。

3.浏览器兼容

兼容 Mozilla， MSIE， FireFox， Maxthon，Safari 和 Chrome，实现浏览器无差别化。

4.注重细节

统一不同浏览器下表格选取方式。提供黑/白名单的过滤机制。更好的word支持，实现粘贴转换机制。

5.稳定性

经过专业的QA团队测试，通过上千个测试用例，包括自动化用例和手动用例，目前仍然在不断完善中。

原文文链接：http://www.chenguangblog.com/archives/baidu-ueditor （转载请注明）

本文标题：富文本编辑器-WordPress投稿功能添加富文本编辑器
本文地址： http://www.61k.com/1144838.html