1. <div id="11111"></div>

    1. <div id="11111"></div>

      1. <div id="11111"></div>

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

        日期: 标签:WordPress教程 73 条留言
        如需帮忙改代码,或者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」创作共享协议,转载请标注以下信息:
        原文出处:露兜博客 http://www.szeverich.net.cn/tougao-text-editor.html
        露兜
        kaapass@outlook.com  QQ 825533758

        业余编程爱好者,主业是淘宝店主,卖些工艺品,感兴趣可以到我的淘宝店看看(旺旺不提供技术咨询):西西弗sisyphe

        73 条留言

        点此留言
        1 2 464
        1. coco

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

          • Ludou

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

        2. coco

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

        3. lm6

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

          • Ludou

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

            • lm6

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

            • lm6

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

            • win2next

              @Ludou 我也测试了,无效

        4. 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

              @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爱好者

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

        7. 怎样网

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

        8. 风火

          不错!

        9. qiux

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

          • 露兜

            @qiux http://www.szeverich.net.cn/codecolorer.html

        10. 慢白

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

        11. Vinci

          赠人玫瑰,手留余香。
          谢谢!

        12. 一介小民

          出现空白,无效

        1 2

        发表留言

        可以挣钱的游戏 156| 749| 860| 217| 245| 813| 34| 412| 111| 114| 472| 323| 656| 989| 718| 526| 814| 162| 128| 133| 435| 717| 598| 513| 513| 473| 72| 329| 283| 119| 980| 686| 50| 611| 278| 760|