上一篇博文，我们完成了前台引入模板分离，而后台模板稍有区别。
截止到目前的项目源码：http://download.csdn.net/detail/iwanghang/9775235
我们来看一下：
/application/admin/controller/Index.php：
<?php /** * 后台控制器 */ namespace app\admin\controller; use think\Controller; class Index extends Controller { public function index() { return $this->fetch(); } }/application/admin/controller/Cate.php
<?php /** * 列表控制器 * http://www.iwanghang.com/admin/cate/lst */ namespace app\admin\controller; use think\Controller; class Cate extends Controller { // 列表 public function lst() { return $this->fetch(); } // 添加 ， 对应文件 /application/admin/view/Cate/add.html public function add() { return $this->fetch(); } }/application/admin/view/Index/index.html
/application/admin/view/Cate/lst.html/application/admin/view/Cate/add.html
还有2个文件，后台分离出来的 网站头部和左侧
/application/admin/view/Public/top.html
/application/admin/view/Public/left.html
/application/admin/view/Cate/add.html
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>后台管理</title> <link rel="stylesheet" type="text/css" href="__PUBLIC__/static/admin/css/common.css"/> <link rel="stylesheet" type="text/css" href="__PUBLIC__/static/admin/css/main.css"/> <script type="text/javascript" src="__PUBLIC__/static/admin/js/libs/modernizr.min.js"></script> <script type="text/javascript" src="__PUBLIC__/static/admin/js/libs/ueditor.config.js"></script> <script type="text/javascript" src="__PUBLIC__/static/admin/js/libs/ueditor.all.min.js"></script> <script type="text/javascript" src="__PUBLIC__/static/admin/js/libs/lang/zh-cn/zh-cn.js"></script> </head> <body> {include file="Public/top" /} <div class="container clearfix"> {include file="Public/left" /} <!--/sidebar--> <div class="main-wrap"> <div class="crumb-wrap"> <div class="crumb-list"><i class="icon-font"></i><a href="__PUBLIC__/admin">首页</a><span class="crumb-step">></span><a class="crumb-name" href="/admin/cate/lst">栏目管理</a><span class="crumb-step">></span><span>新增栏目</span></div> </div> <div class="result-wrap"> <div class="result-content"> <form action="/jscss/admin/design/add" method="post" id="myform" name="myform" enctype="multipart/form-data"> <table class="insert-tab" width="100%"> <tbody> <!-- <tr> --> <!-- <th width="120"><i class="require-red">*</i>栏目类型：</th> --> <!-- <td> --> <!-- <select name="type" id="catid" class="required"> --> <!-- <option value="">请选择</option> --> <!-- <option value="19">列表</option><option value="20">留言</option> --> <!-- </select> --> <!-- </td> --> <!-- </tr> --> <tr > <th style="width: 10%;"><i class="require-red">*</i>栏目名称：</th> <td> <input class="common-text required" id="title" name="catename" size="50" value="" type="text"> </td> </tr> <tr> <th>栏目关键词：</th> <td><input class="common-text" name="keywords" size="50" value="" type="text"></td> </tr> <tr> <th><i class="require-red">*</i>栏目类型：</th> <td><input name="type" value="1" type="checkbox"> 留言板</td> </tr> <tr> <th>栏目描述：</th> <td><textarea name="editor" class="common-textarea" id="content" cols="30" style="width: 98%;" rows="10"></textarea> </td> </tr> <tr> <th></th> <td> <input class="btn btn-primary btn6 mr10" value="提交" type="submit"> <input class="btn btn6" οnclick="history.go(-1)" value="返回" type="button"> </td> </tr> </tbody></table> </form> </div> </div> </div> <!--/main--> </div> <script type="text/javascript"> //实例化编辑器 //建议使用工厂方法getEditor创建和引用编辑器实例，如果在某个闭包下引用该编辑器，直接调用UE.getEditor('editor')就能拿到相关的实例 UE.getEditor('content',{initialFrameWidth:1000,initialFrameHeight:400,}); </script> </body> </html> 修改了3个地方：(1) UEditor的js路径：
<script type="text/javascript" src="__PUBLIC__/static/admin/js/libs/ueditor.config.js"></script> <script type="text/javascript" src="__PUBLIC__/static/admin/js/libs/ueditor.all.min.js"></script> <script type="text/javascript" src="__PUBLIC__/static/admin/js/libs/lang/zh-cn/zh-cn.js"></script>(2) 需要引用UEditor的位置的id修改为content：
<tr> <th>栏目描述：</th> <td><textarea name="editor" class="common-textarea" id="content" cols="30" style="width: 98%;" rows="10"></textarea> </td> </tr> (3)实例化UEditor： <script type="text/javascript"> //实例化编辑器 //建议使用工厂方法getEditor创建和引用编辑器实例，如果在某个闭包下引用该编辑器，直接调用UE.getEditor('editor')就能拿到相关的实例 UE.getEditor('content',{initialFrameWidth:1000,initialFrameHeight:400,}); </script>最后，上2张效果图：分别是360安全浏览器极速模式 和 谷歌浏览器：
转载请注明出处： http://blog.csdn.net/iwanghang/article/details/60956569 欢迎移动开发爱好者交流沈阳或周边城市公司有意开发Android，请与我联系联系方式微信：iwanghangQQ：413711276邮箱：iwanghang@qq.com 觉得博文有用，请点赞，请评论，请关注，谢谢！~