搜索
Hi~登录注册
查看: 1186|回复: 0

wordpress中如何添加投稿功能中编辑器功能 -wordpress教程

[复制链接]

1892

主题

1899

帖子

6406

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
6406
发表于 2015-4-20 15:51:16 | 显示全部楼层 |阅读模式

                                <b>[文章目录]</b>
                                <ul id="index-ul">
<li>一:首先下载这个比较好的编辑器</li>
<li>二:添加引入这个编辑器的一引起js文件</li>
<li>三:看下效果图吧</li>
</ul>
                        </div>
同学们大家好,今天<span style="font-size: 14pt; color: #ff0000;"><span style="color: #ff0000;"><strong>吾爱互联</strong></span></span>将与大家分享如何在投稿中添加丰富编辑器的功能
具体如何添加这个投稿功能,建议大家看下我之前写的文章<span style="color: #ff0000; font-size: 14pt;"><span style="color: #ff0000;"><strong>《WordPress 中如何添加投稿页面功能 》</strong></span></span>
那么这个编辑器的功能添加很简单
<h2 id="title-0">一:首先下载这个比较好的编辑器
它的名字是 KindEditor 下载地址:http://kindeditor.net/down.php 下载后解压,将文件夹重命名为kindeditor,放到你当前程序的根目录下
方便后续的调用路径
<h2 id="title-1">二:添加引入这个编辑器的一引起js文件
在你的page.php文件 <?php get_header();?> 这个下面添加如下代码
<div class="dp-highlighter">
<div class="bar"></div>
<ol class="dp-c" start="1">
<li class="alt"><script type=<span class="string">"text/javascript"</span> src=<span class="string">"http://localhost/demo/kindeditor/kindeditor-min.js"</span>></script></li>
<li><link rel=<span class="string">"stylesheet"</span> href=<span class="string">"http://localhost/demo/kindeditor/themes/simple/simple.css"</span> /></li>
<li class="alt"><script type=<span class="string">"text/javascript"</span> src=<span class="string">"http://localhost/demo/kindeditor/lang/zh_CN.js"</span>></script></li>
<li></li>
<li class="alt"><script type=<span class="string">"text/javascript"</span>></li>
<li></li>
<li class="alt">$(document).ready(<span class="keyword">function</span>(){</li>
<li></li>
<li class="alt"><span class="keyword">var</span> editor;</li>
<li></li>
<li class="alt">KindEditor.ready(<span class="keyword">function</span>(K) {</li>
<li></li>
<li class="alt">editor = K.create('textarea[name=<span class="string">"tougao_content"</span>]', {</li>
<li></li>
<li class="alt">allowFileManager : false,</li>
<li></li>
<li class="alt">allowImageUpload : false</li>
<li></li>
<li class="alt">});</li>
<li></li>
<li class="alt">});</li>
<li></li>
<li class="alt">});</li>
<li></li>
<li class="alt"></script></li>
</ol>
</div>
注意你的这个路径不能搞错了,否则会显示不出编辑器了
<h2 id="title-2">三:看下效果图吧
<img class="aligncenter size-full wp-image-757" src="http://www.wpjiaocheng.com/wp-content/uploads/2014/08/tougao.png" alt="wordpress中如何添加投稿功能中编辑器功能" width="701" height="539" />
如图中所示
好了,同学们自己去尝试下,就知道如何制作了,明白
公众微信:idc5ahl
公众QQ:吾爱互联
关注公众微信,公众QQ每天领现金卡密
卡密介绍(http://www.5ahl.com/thread-2182-1-1.html
回复

使用道具 举报

游客
回复
您需要登录后才可以回帖 登录 | 点我注册

快速回复 返回顶部 返回列表