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. 倡萌 倡萌

    老大终于发威了 期待后续更多精彩

    回复
  2. 守望者

    真是相见恨晚，才发现你的博客。很多文章都很实用，谢谢博主分享！我会常来的！

    回复
    • Ludou

      @守望者 非常感谢你的提醒，本站投稿页的编辑器已更新至最新版，ie9测试正常。

      回复
  3. Ludou fans

    怎么样修改登录后 后台右上角的“显示选项”“帮助”里面的内容？在functions.php文件里改的话就不用每次升级去改其他文件了

    回复
  4. 蓬勃主机 蓬勃主机

    学到了些东西，谢博主的分享

    回复
  5. Ludou fans

    仔细看了 Ludou 大神回复我的留言中的2篇文章，好像不对哦。
    就是登陆后 不是右上角有个“显示选项”“帮助”2个选项吗？怎么样隐藏或者删除、修改里面的内容或是直接删除该模块啊？

    回复
  6. 玩命的熊猫

    突然间想到的一个问题 很突兀的就想到了来这问一下是否可以。

    首页只显示 用户组为“作者”发布的文章，

    而在另一个新建的模板页面中只显示用户组为 “投稿者”的最新文章。这样可以实现吗？

    回复
    • Ludou

      @玩命的熊猫 这个只能用手写SQL来的方式的读数据库来实现了。具体参考：
      http://wordpress.stackexchange.com/questions/56071/how-to-query-post-by-user-role

      回复
  7. 向日葵媒体设计

    学习了，我自己也要用了哈哈哈

    回复
  8. 影评网 影评网

    哇，露兜。正好需要这个。

    回复
  9. lauyuhang

    感谢分享。
    不过，编辑器的宽度似乎的js控制的，怎么调整这个宽度呢?
    新手不懂啊..

    如果想把投稿做成弹出式窗口,而不是一个page那又要怎么弄?

    回复
  10. 千与琥珀 千与琥珀

    这个可以有……
    嗯，wp本身不是带有编辑器吗？为什么不调用它呢

    回复
  11. wonderboy.cn wonderboy.cn

    你好，请问你文章中的出现程序代码是用的什么编辑器？

    回复
  12. wonderboy.cn wonderboy.cn

    你这款叫什么名字

    回复
  13. wowowo

    博主，

    你的我要投稿，https://www.ludou.org/ask-a-question

    这样样式很好看，我非常的喜欢，

    但我是个菜鸟，搞不定代码，

    能不能教一下，怎么个调整啊，

    1、投稿功能与添加富媒体功能，完全是按你的文章来调整的，

    非常感谢！

    回复
    • Ludou

      @wowowo 这个没办法用几句话讲完，这涉及到css，不同主题不一样，我给你相同的代码未必能获得相同的效果。

      回复
  14. 鼬

    Ludou,想请教你我只想用wordpresswp本身的编辑器该用什么代码调用？

    回复
    • Ludou

      @鼬 你上网搜索吧：wordpress 投稿 tinyeditor

      回复
  15. 流金漩涡

    我有个站点用了这个投稿代码，但是在前台测试的时候总是提示投稿太快。后台查看了下也是没投稿成功的，请问会是什么问题呢

    回复
    • Ludou

      @流金漩涡 因为你的刚刚写了一篇文章，下文中第二段代码第26行的时间间隔 120 改小
      https://www.ludou.org/wordpress-add-contribute-page.html

      回复
      • 流金漩涡

        @Ludou 我改成0还是一样，郁闷了，不知道什么原因了

        回复
        • Ludou

          @流金漩涡 那你把23-29行代码删除吧

          回复
          • 流金漩涡

            @Ludou 感谢，删除后便可以投稿了。非常感谢ludou

  16. kalashnikof

    你好，发现一个问题，用富文本投入后，在后台审核进，tinyeditor编辑器显示全是HTML源码内容。请问怎么办？

    回复
    • Ludou

      @kalashnikof 注意第三点：https://www.ludou.org/tougao-text-editor.html#title-2
      另外，切换到可视化编辑状态。

      回复
      • 网赚博客 网赚博客

        @Ludou 按照你的第三点改了
        把$blog = isset( $_POST['tougao_authorblog'] ) ? trim(htmlspecialchars($_POST['tougao_authorblog'], ENT_QUOTES)) : '';
        改成了
        $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);
        可是一进后台，无论是可视化编辑还是HTML编辑，在投稿页面的格式都直接显示HTML源码

        回复
        • Ludou

          @网赚博客 抱歉，代码已经修改，是修改第40行代码：
          $content = isset( $_POST['tougao_content'] ) ? trim(htmlspecialchars($_POST['tougao_content'], ENT_QUOTES)) : '';

          回复
          • 网赚博客 网赚博客

            @Ludou 好了，修改成功，多谢

  17. hea

    使用这个富文本编辑器时，使用HTML模式添加FLASH的时候，后台查看是空白的，

    这是可视化：<embed src="http://player.youku.com/player.php/sid/XNDkzOTE2OTcy/v.swf" allowFullScreen="true" quality="high" width="480" height="400" align="middle" allowScriptAccess="always" type="application/x-shockwave-flash"></embed>

    HTML模式变成这样子了：&lt;embed src="http://player.youku.com/player.php/sid/XNDkzOTE2OTcy/v.swf" allowFullScreen="true" quality="high" width="480" height="400" align="middle" allowScriptAccess="always" type="application/x-shockwave-flash"&gt;&lt;/embed&gt;

    刚刚相反了。。。

    回复
  18. 主题团购 主题团购

    内容必须填写，且长度不得超过3000字，不得少于100字 文章投稿的时候出现这个问题了，怎么解决问题啊？

    回复
    • Ludou

      @主题团购 这不是问题，是为了安全考虑做得限制，如果不需要，请将下面教程第2段代码 55 – 58行删掉
      https://www.ludou.org/wordpress-add-contribute-page.html

      回复
  19. 亚尔

    投稿内容能否改为一个内容填表？
    我的意思是 用户投稿内容就是自己的个人简历
    我想做个人才招聘网站 用投稿功能发布个人信息

    回复
  20. 爱软E 爱软E

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

    这段 要替换那段代码啊？路都？？

    回复
  21. Jimbo Jimbo

    WordPress自带有TinyMCE编辑器就可以做。

    回复
  22. 特搞王 特搞王

    我按照这个方法添加了 结果还是没出来这个编辑器。。。。老大帮忙看看。。。QQ79224398

    回复
  23. 特搞王 特搞王

    Warning: stripos() [function.stripos]: needle is not a string or an integer in D:\wwwroot\zyp2013\wwwroot\wp-includes\functions.php on line 658

    Warning: stripos() [function.stripos]: needle is not a string or an integer in D:\wwwroot\zyp2013\wwwroot\wp-includes\functions.php on line 661

    投稿成功！感谢投稿！点此返回

    投稿成功 后显示上面那2段代码怎么办~~~

    回复
  24. 乙醇公社 乙醇公社

    OK谢谢

    回复
  25. 糗呆呆 糗呆呆

    露兜，如果我想调用wp自带的编辑器怎么修改代码？用kindedit的话上传的文件都在kindedit的文件夹里面，我想让文件还是保存在wp媒体库里，即wp-conten/uploads/year/month里

    回复
    • Ludou

      @糗呆呆 wp自带的编辑器没有上传功能。kindedit请上网搜索：KindEditor 图片上传 路径

      回复
1 2

发表留言