WordPress投稿功能添加富文本编辑器
4043
之前,站长图库分享了一篇教程:WordPress添加投稿功能,今天要讲的是如何给这个投稿功能添加一个富文本编辑器(也包括了图片上传功能),原来的代码只能实现一个简单的纯文本输入框,对于投稿者的输入体验不太好。
一、下载KindEditor
这里我们将使用KindEditor来作为我们的编辑器,点此下载KindEditor.zip 下载后解压,将文件夹重命名为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文档
本文网址:https://www.zztuku.com/index.php/detail-13933.html
站长图库 - WordPress投稿功能添加富文本编辑器
申明:本文转载于《露兜即刻》,如有侵犯,请 联系我们 删除。
您还没有登录,请 登录 后发表评论!
提示:请勿发布广告垃圾评论,否则封号处理!!