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

日期： 标签：WordPress教程
如需帮忙改代码，或者WordPress二次开发、PHP网站建设等需求，可联系我购买付费服务：  点此联系我
文章目录

     在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代码小修改

代码二第43行代码：

$content =  isset( $_POST['tougao_content'] ) ? trim(htmlspecialchars($_POST['tougao_content'], ENT_QUOTES)) : '';

改成：

$content =  isset( $_POST['tougao_content'] ) ? trim($_POST['tougao_content']) : '';
$content = str_ireplace('?>', '?>', $content);
$content = str_ireplace('<?', '<?', $content);
$content = str_ireplace('<script', '<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文档

-- 完 --

本文采用 「CC BY-NC-SA 4.0」创作共享协议，转载请标注以下信息：
原文出处：露兜即刻 https://www.ludou.org/tougao-text-editor.html
露兜
作者：露兜 » kaapass@outlook.com  QQ 825533758

业余编程爱好者。

74 条留言

点此留言
1 2 464
  1. coco coco

    投稿成功后 点击返回提交页面 显示找不到提交页面 怎么回事？

    回复
    • Ludou

      @coco 检查一下网址是否对，然后刷新一下。

      回复
  2. coco coco

    三克油 我用的ip 地址 目前域名在备案 备好案 我在试试

    回复
  3. lm6

    请问下添加KindEditor编辑器后怎么设置编辑器的宽，测试了几次都不行？

    回复
    • Ludou

      @lm6 resizeType : 1,
      改成
      resizeType : 1,
      width : '700px',
      height : '700px',

      回复
      • lm6

        @Ludou 十分感谢老师o(≧v≦)o~~

        回复
      • lm6

        @Ludou 老师你好，刚才我去测试了下，发现这样改也没效果，编辑器大小不变。

        回复
      • win2next win2next

        @Ludou 我也测试了，无效

        回复
  4. win2next win2next

    后来我通过在tougao-page.php里增加minWidth，以及在kindeditor.js里面修改minWidth（默认为650px）在Chrome浏览器实现了改变。但是在IE下还是没有变化。很奇怪网址 http://www.win2next.com/writtenbyme

    tougao-page.php里的修改。
    KindEditor.ready(function(K) {
    editor = K.create('#tougao_content', {
    resizeType : 1,
    minWidth:580,

    回复
    • Ludou

      @win2next 这个插件在浏览器兼容方面可能做得不太好。你可以选择其他的富文本编辑器。

      回复
      • win2next win2next

        @Ludou 现在已经好了。我估计当天晚上没有看到效果的原因有可能是由于我开了super-cache，所以php的作用等第二天缓存更新后才体现；而chrome里可以及时看到效果的原因，应该是由于我super-cache里设定了对管理员不用super-cache。所以kindreader没关系，但那个kindeditor.js里面修改minWidth是必须的。
        http://www.win2next.com/writtenbyme

        回复
  5. 高高

    能不能换成wordpress后台自带的富文本编辑器呢？怎么实现？

    回复
    • Ludou

      @高高 WordPress的默认编辑器是TinyMCE，要使用可以参考这篇文章：
      http://onetarek.com/wordpress/tutorial-how-to-use-tinymce-wyswig-editor-in-wordpress-plugin-theme-admin-page/

      回复
      • 高高

        @Ludou 非常感谢，已经完美实现，添加wp_editor( $content, $editor_id, $settings );是关键

        回复
      • mijiu

        @Ludou 为什么我调用wp_editor时，编辑器功能没有，只有一个文本框，感觉缺少js文件，需要收到加载js文件吗？

        回复
  6. Vans爱好者 Vans爱好者

    想问问这个是否能够支持上传图片呢？

    回复
  7. 怎样网 怎样网

    我按照这个试了貌似不行啊~~

    回复
  8. 风火 风火

    不错！

    回复
  9. qiux qiux

    请问 您的代码框怎么实现的？

    回复
    • 露兜

      @qiux https://www.ludou.org/codecolorer.html

      回复
  10. 慢白 慢白

    请问，投稿提交需要填写的验证码看不到图片，是设置的问题吗？

    回复
  11. Vinci Vinci

    赠人玫瑰，手留余香。
    谢谢！

    回复
  12. 一介小民 一介小民

    出现空白，无效

    回复
  13. Vince人 Vince人

    你好博主，你的原文：

    我们下载的kindeditor目录下有个examples文件夹，这里是部分演示，双击打开index.html可以看到所有演示。

    可是我下载了好几个版本，都没有找到这个examples文件夹，请问该下载那个呢？

    回复
1 2

发表留言