{// 导航}
  • 当前位置:   article > 正文

    thinkphp 百度编辑器和layer简单用法

    layer加载百度编辑器

     

    百度编辑器1.4.3.3和layer插件简单案例 :后台单页面管理

    增删改查操作

     

    此处为默认图片保存路径,如果要修改保存路径,需要修改config文件。 

     

    添加页。

    1. <extend name="Public/base" />
    2. {// 导航}
    3. <block name="breadcrumb">
    4. <li class="active">添加单页面</li>
    5. </block>
    6. {// 主体}
    7. <div class="table-header">添加单页面</div>
    8. <block name="main">
    9. <!--<form action="{:U('Admin/SinglePageManagement/doAdd')}" method="get">-->
    10. <form>
    11. <table>
    12. <tr>
    13. <td>类别</td>
    14. <td>
    15. <select name="class_id" class="left" id="class_id">
    16. <option value="">不限</option>
    17. <volist name="singlePage_class" id="vo">
    18. <eq name="vo.id" value="$map.class_id">
    19. <option value="{$vo.id}" selected >{$vo.name}</option>
    20. <else />
    21. <option value="{$vo.id}" >{$vo.name}</option>
    22. </eq>
    23. </volist>
    24. </select>
    25. </td>
    26. </tr>
    27. <tr>
    28. <td>标题:</td>
    29. <td><input type="text" name="name" value="" /></td>
    30. </tr>
    31. <tr>
    32. <td>内容</td>
    33. <td>
    34. <script id="content" name="content" type="text/plain" style="height: 600px; width: 700px;float: left; margin-right: 10px;"></script>
    35. <!--<input type="hidden" id="contenthidden" value="" />-->
    36. <!--<textarea name="content" id="content" cols="40" rows="10" ></textarea>-->
    37. </td>
    38. </tr>
    39. <tr>
    40. <td>排序:</td>
    41. <td><input type="text" name="sort" /></td>
    42. </tr>
    43. <td>
    44. <!--<input type="submit" >-->
    45. <input type="button" id="btn" οnclick="submit_message();" value="保存"/>
    46. </td>
    47. </table>
    48. </form>
    49. </div>
    50. </block>
    51. {// js}
    52. <block name="js">
    53. <script src="__PUBLIC__/Assets/js/UEditor/ueditor.config.js"></script>
    54. <script src="__PUBLIC__/Assets/js/UEditor/ueditor.all.js"></script>
    55. <script src="__PUBLIC__/Assets/js/UEditor/lang/zh-cn/zh-cn.js"></script>
    56. <script src="__PUBLIC__/Assets/js/layer_mobile/layer.js"></script>
    57. <script type="text/javascript">
    58. //根据id获取百度编辑器对象
    59. var ue=UE.getEditor('content');
    60. //初始化百度编辑器
    61. // $(function () {
    62. // ue.ready(function(){
    63. // //使用read后执行,否则可能报错
    64. // ue.setContent($("#content").val());
    65. // })
    66. // })
    67. //数据定义
    68. var class_id;
    69. var name;
    70. var content;
    71. var sort;
    72. function submit_message() {
    73. //获取数据
    74. class_id=$("#class_id option:selected").val();
    75. name=$("input[name=name]").val();
    76. content = ue.getContent();
    77. sort=$("input[name=sort]").val();
    78. //百度编辑器赋值给隐藏域
    79. //$("#contenthidden").val(encodeURIComponent(ue.getContent()));
    80. //提交前校验
    81. if(!isChecked()){
    82. return false;
    83. }
    84. //异步提交
    85. $.ajax({
    86. type:"post",
    87. url:"{:U('Admin/SinglePageManagement/doAdd')}",
    88. data:{
    89. "class_id":class_id,
    90. "name":name,
    91. "content":content,
    92. "sort":sort
    93. },
    94. dataType:"JSON",
    95. async:true,
    96. success:function (message) {
    97. //返回值判断和输出
    98. if(message=="添加成功"){
    99. layer.open({
    100. content:"添加成功!",
    101. btn:'我知道了',
    102. yes:function(){
    103. window.location.href="{:U('Admin/SinglePageManagement/index')}"
    104. }
    105. });
    106. }else{
    107. layer.open({
    108. content:message,
    109. btn:'我知道了'
    110. })
    111. }
    112. }
    113. })
    114. }
    115. function isChecked(){
    116. if (class_id== "") {
    117. layer.open({
    118. content: '类别不能为空!'
    119. , btn: '我知道了'
    120. });
    121. return false;
    122. }
    123. if (name== "") {
    124. layer.open({
    125. content: '标题不能为空!'
    126. , btn: '我知道了'
    127. });
    128. return false;
    129. }
    130. if (content== "") {
    131. layer.open({
    132. content: '内容不能为空!'
    133. , btn: '我知道了'
    134. });
    135. return false;
    136. }
    137. if (sort=="") {
    138. layer.open({
    139. content: '排序不能为空!'
    140. , btn: '我知道了'
    141. });
    142. return false;
    143. }
    144. return true;
    145. }
    146. </script>
    147. </block>

      

     

    thinkphp后台

     

    1. <?php
    2. /**
    3. * 单页面管理
    4. * @author wujiahao
    5. * @date 2017-5-31
    6. */
    7. namespace Admin\Controller;
    8. class SinglePageManagementController extends BaseController {
    9. protected $SinglePageObj = null;
    10. protected $SinglePageClass=null;
    11. public function __construct()
    12. {
    13. parent::__construct();
    14. $this->SinglePageObj = M('SinglePageManagement');
    15. $this->SinglePageClass=M('SinglePageClass');
    16. }
    17. public function index()
    18. {
    19. //获取页面中所有name标签的内容
    20. $map=I();
    21. //移除$map中所有可以转为false的值,如:false,0,‘0’,arrary(),null,'',
    22. // $a=array_filter($map);
    23. $a=$map;
    24. //名称
    25. if(!empty($a['name'])){
    26. $where['am.name']=array('LIKE','%'.$a['name'].'%'); //联表查询有两个name时,搜索条件要带表名。
    27. }
    28. //类别
    29. if(!empty($a['class_id'])){
    30. $where['class_id']=array('EQ',$a['class_id']);
    31. }
    32. //var_dump($where);
    33. //分页
    34. $total=$this->SinglePageObj->where($where)->count();//获取总页数
    35. $Page= new \Think\Pages($total,10);//显示10个页码
    36. $Page->setConfig('first','首页');
    37. $Page->setConfig('prev','上一页');
    38. $Page->setConfig('next','下一页');
    39. $Page->setConfig('last','尾页');
    40. $showPage = $Page->show();
    41. //搜索结果
    42. $data=$this->SinglePageObj->where($where)->page(I('get.p',1),10)->order('sort desc')->join('as am left join lg_single_page_class as ac on am.class_id=ac.id')->field('am.id,am.name,am.create_time,am.sort,am.content,ac.name as class_name') ->select();//get.p 表示页码,如果不存在则赋值1,每页20行。
    43. //var_dump($data);
    44. $SinglePage_category=$this->SinglePageClass->order('sort desc')->select();
    45. //上一次搜索条件
    46. $this->assign('map',$a);
    47. $this->assign('singlePage_class',$SinglePage_category);
    48. //分页
    49. $this->assign('page',$showPage);
    50. //列表
    51. $this->assign('data', $data);
    52. $this->display();
    53. }
    54. /**
    55. * 添加
    56. */
    57. public function add()
    58. {
    59. $SinglePage_category=$this->SinglePageClass->order('sort desc')->select();
    60. $this->assign('singlePage_class',$SinglePage_category);
    61. $this->display();
    62. }
    63. /**
    64. * 执行添加
    65. */
    66. public function doAdd()
    67. {
    68. $content=$_REQUEST['content'];
    69. $name=$_REQUEST['name'];
    70. $class_id=$_REQUEST['class_id'];
    71. $sort=$_REQUEST['sort'];
    72. //$class_id=$_POST['class_id']; //同理
    73. $data['class_id']=$class_id;
    74. $data['name']=$name;
    75. $data['content']=$content;
    76. $data['sort']=$sort;
    77. // $this->ajaxReturn($class_id);
    78. // return;
    79. // $data=I();
    80. $data['create_time'] = time();
    81. $data['state'] = 1;
    82. $rs = $this->SinglePageObj->add($data);
    83. if($rs>0){
    84. $msg = '添加成功';
    85. }else{
    86. $msg = '添加失败';
    87. }
    88. $this->ajaxReturn($msg);
    89. }
    90. /* 修改*/
    91. public function edit()
    92. {
    93. $id = I('get.id');
    94. $info = $this->SinglePageObj->where('id='.$id)->find();
    95. $SinglePage_category=$this->SinglePageClass->order('sort desc')->select();
    96. $this->assign('singlePage_class',$SinglePage_category);
    97. $this->assign('map', $info);
    98. $this->display();
    99. }
    100. /**
    101. * 修改
    102. */
    103. public function doEdit()
    104. {
    105. $id=$_REQUEST['id'];
    106. $content=$_REQUEST['content'];
    107. $name=$_REQUEST['name'];
    108. $class_id=$_REQUEST['class_id'];
    109. $sort=$_REQUEST['sort'];
    110. //$class_id=$_POST['class_id']; //同理
    111. $data['id']=$id;
    112. $data['class_id']=$class_id;
    113. $data['name']=$name;
    114. $data['content']=$content;
    115. $data['sort']=$sort;
    116. // $this->ajaxReturn($id);
    117. // return;
    118. // $data = I();
    119. $rs = $this->SinglePageObj->save($data);
    120. if($rs===false){
    121. $msg = '修改失败';
    122. }else{
    123. $msg = '修改成功';
    124. }
    125. $this->ajaxReturn($msg);
    126. }
    127. /*
    128. * 删除
    129. */
    130. public function delete()
    131. {
    132. $id = I('get.id');
    133. $rs=$this->SinglePageObj->where('id='.$id)->delete();
    134. if ($rs==0||$rs===false) {
    135. $msg['code'] = 0;
    136. $msg['msg'] = '删除失败';
    137. } else {
    138. $msg['code'] = 1;
    139. $msg['msg'] = '删除成功';
    140. }
    141. $this->ajaxReturn($msg);
    142. }
    143. }

    修改页

    1. <extend name="Public/base" />
    2. {// 导航}
    3. <block name="breadcrumb">
    4. <li class="active">添加单页面</li>
    5. </block>
    6. {// 主体}
    7. <div class="table-header">添加单页面</div>
    8. <block name="main">
    9. <!--<form action="{:U('Admin/SinglePageManagement/doEdit')}" method="get">-->
    10. <form>
    11. <table>
    12. <tr>
    13. <td>类别</td>
    14. <td>
    15. <select name="class_id" class="left" id="class_id">
    16. <option value="">不限</option>
    17. <volist name="singlePage_class" id="vo">
    18. <eq name="vo.id" value="$map.class_id">
    19. <option value="{$vo.id}" selected >{$vo.name}</option>
    20. <else />
    21. <option value="{$vo.id}" >{$vo.name}</option>
    22. </eq>
    23. </volist>
    24. </select>
    25. </td>
    26. </tr>
    27. <tr>
    28. <td>标题:</td>
    29. <td><input type="text" name="name" value="{$map.name}" /></td>
    30. </tr>
    31. <tr>
    32. <td>内容</td>
    33. <td>
    34. <script id="content" name="content" type="text/plain" style="height: 600px; width: 700px;float: left; margin-right: 10px;">{$map.content}</script>
    35. <!--<input type="hidden" id="contenthidden" value="" />-->
    36. <!--<textarea name="content" id="content" cols="40" rows="10" ></textarea>-->
    37. </td>
    38. </tr>
    39. <tr>
    40. <td>排序:</td>
    41. <td><input type="text" name="sort" value="{$map.sort}" /></td>
    42. </tr>
    43. <td>
    44. <!--<input type="submit" >-->
    45. <input type="button" id="btn" οnclick="submit_message();" value="保存"/>
    46. </td>
    47. </table>
    48. </form>
    49. </div>
    50. </block>
    51. {// js}
    52. <block name="js">
    53. <script src="__PUBLIC__/Assets/js/UEditor/ueditor.config.js"></script>
    54. <script src="__PUBLIC__/Assets/js/UEditor/ueditor.all.js"></script>
    55. <script src="__PUBLIC__/Assets/js/UEditor/lang/zh-cn/zh-cn.js"></script>
    56. <script src="__PUBLIC__/Assets/js/layer_mobile/layer.js"></script>
    57. <script type="text/javascript">
    58. //根据id获取百度编辑器对象
    59. var ue=UE.getEditor('content');
    60. //初始化百度编辑器
    61. // $(function () {
    62. // ue.ready(function(){
    63. // //使用read后执行,否则可能报错
    64. // ue.setContent($("#content").val());
    65. // })
    66. // })
    67. //数据定义
    68. var class_id;
    69. var name;
    70. var content;
    71. var sort;
    72. function submit_message() {
    73. //获取数据
    74. class_id=$("#class_id option:selected").val();
    75. name=$("input[name=name]").val();
    76. content = ue.getContent();
    77. sort=$("input[name=sort]").val();
    78. //百度编辑器赋值给隐藏域
    79. //$("#contenthidden").val(encodeURIComponent(ue.getContent()));
    80. //提交前校验
    81. if(!isChecked()){
    82. return false;
    83. }
    84. //异步提交
    85. $.ajax({
    86. type:"post",
    87. url:"{:U('Admin/SinglePageManagement/doEdit')}",
    88. data:{
    89. "id":{$map.id},
    90. "class_id":class_id,
    91. "name":name,
    92. "content":content,
    93. "sort":sort
    94. },
    95. dataType:"JSON",
    96. async:true,
    97. success:function (message) {
    98. //返回值判断和输出
    99. if(message=="添加成功"){
    100. layer.open({
    101. content:"添加成功!",
    102. btn:'我知道了',
    103. yes:function(){
    104. window.location.href="{:U('Admin/SinglePageManagement/index')}"
    105. }
    106. });
    107. }else{
    108. layer.open({
    109. content:message,
    110. btn:'我知道了'
    111. })
    112. }
    113. }
    114. });
    115. }
    116. function isChecked(){
    117. if (class_id== "") {
    118. layer.open({
    119. content: '类别不能为空!'
    120. , btn: '我知道了'
    121. });
    122. return false;
    123. }
    124. if (name== "") {
    125. layer.open({
    126. content: '标题不能为空!'
    127. , btn: '我知道了'
    128. });
    129. return false;
    130. }
    131. if (content== "") {
    132. layer.open({
    133. content: '内容不能为空!'
    134. , btn: '我知道了'
    135. });
    136. return false;
    137. }
    138. if (sort== "") {
    139. layer.open({
    140. content: '排序不能为空!'
    141. , btn: '我知道了'
    142. });
    143. return false;
    144. }
    145. return true;
    146. }
    147. </script>
    148. </block>

      

     

    列表页

    1. <extend name="Public/base" />
    2. {// 导航}
    3. <block name="breadcrumb">
    4. <li class="active">单页面管理</li>
    5. </block>
    6. {// 左侧菜单}
    7. <block name="sidebar">
    8. <include file="Public/sidebar" nav="singlePage"/>
    9. </block>
    10. {// 主体}
    11. <block name="main">
    12. <div class="row-fluid">
    13. <h3 class="header blue lighter smaller">
    14. <form action="{:U('Admin/SinglePageManagement/index')}" method="get">
    15. <div class="dataTables_wrapper">
    16. <div class="grid_conent" id="m_search_div">
    17. <div class="grid" style="width:28%">
    18. <label class="control-label pull-left">名称:</label>
    19. <input name="name" value="{$map.name}" type="text" id="search_name" class="pull-left" />
    20. </div>
    21. <!--<div class="grid" style="width: 28%;" >-->
    22. <!--<label class="control-label pull-left">审核状态:</label>-->
    23. <!--<select name="state" class="pull-left">-->
    24. <!--<option value="">不限</option>-->
    25. <!--<option value="0" <?php if($map['state']=='0'):?> selected="selected"<?php endif;?> >待审核</option>-->
    26. <!--<option value="1" <?php if($map['state']=='1'):?>selected="selected" <?php endif;?> >已通过</option>-->
    27. <!--<option value="2" <?php if($map['state']=='2'):?>selected="selected"<?php endif;?> >已拒绝</option>-->
    28. <!--</select>-->
    29. <!--</div>-->
    30. <div class="grid" style="width:auto;">
    31. <label class="control-label pull-left" style="padding-left:26px;">类别:</label>
    32. <select name="class_id" class="left">
    33. <option value="">不限</option>
    34. <volist name="singlePage_class" id="vo">
    35. <eq name="vo.id" value="$map.class_id">
    36. <option value="{$vo.id}" selected >{$vo.name}</option>
    37. <else />
    38. <option value="{$vo.id}" >{$vo.name}</option>
    39. </eq>
    40. </volist>
    41. </select>
    42. </div>
    43. <div class="add_link" style=" width: auto; float: right;">
    44. <!--<button class="btn btn-primary btn-small" οnclick="$.lagou.formShow('{:U('Admin/SinglePageManagement/add')}');" type="button"><i class="icon-plus"></i>添加</button>-->
    45.   <a class="btn btn-primary btn-small" href="/Admin/SinglePageManagement/add" ><i class="icon-plus"></i>添加</a>
    46. </div>
    47. <div style="width:auto; float: right; padding-top:1px; "><button type="submit" class="btn btn-primary btn-small pull-left" id="search_submit"><i ></i>搜索</button></div>
    48. </div>
    49. </div>
    50. </form>
    51. </h3>
    52. <div class="table-header">单页面列表</div>
    53. <div class="dataTables_wrapper" role="grid">
    54. <table id="data_table" class="table table-striped table-bordered table-hover" style="margin-bottom:0px;">
    55. <thead>
    56. <tr>
    57. <th>名称</th>
    58. <th>排序</th>
    59. <th>类别</th>
    60. <th>创建时间</th>
    61. <th>操作</th>
    62. </tr>
    63. </thead>
    64. <tbody>
    65. <?php foreach ($data as $key => $value): ?>
    66. <tr>
    67. <td>{$value.name}</td>
    68. <td>{$value.sort}</td>
    69. <td>{$value.class_name}</td>
    70. <td>{$value.create_time|date="Y-m-d H:i", ###}</td>
    71. <!--<td><eq name="value.state" value="0"><i class="waitting">等待审核</i><else/><eq name="value.state" value="1">已通过<else/> <eq name="value.state" value="2"><i class="red">已拒绝</i><else/> </eq> </eq></eq></td>-->
    72. <!--<td>-->
    73. <!--<div class="hidden-phone visible-desktop action-buttons">-->
    74. <!--<a href="javascript:;" οnclick="$.adopt('{:U('Admin/SinglePageManagement/adopt', array('id'=>$value['id']))}');" class="green" >-->
    75. <!--<i>通过</i>-->
    76. <!--</a>-->
    77. <!--<a href="javascript:;" οnclick="$.refuse('{:U('Admin/SinglePageManagement/refuse', array('id'=>$value['id']))}');" class="red" >-->
    78. <!--<i>拒绝</i>-->
    79. <!--</a>-->
    80. <!--</div>-->
    81. <!--</td>-->
    82. <td>
    83. <div class="hidden-phone visible-desktop action-buttons">
    84. <!--<a href="javascript:;" οnclick="$.lagou.formShow('{:U('Admin/SinglePageManagement/edit', array('id'=>$value['id']))}');" class="blue tooltip-info no-hover-underline" data-rel="tooltip" data-original-title="修改">-->
    85. <!--<i class="icon-pencil bigger-130"></i>-->
    86. <!--</a>-->
    87. <a href="{:U('Admin/SinglePageManagement/edit', array('id'=>$value['id']))}" class="blue tooltip-info no-hover-underline" data-rel="tooltip" data-original-title="修改">
    88. <i class="icon-pencil bigger-130"></i>
    89. </a>
    90. <a href="javascript:;" οnclick="$.del('{:U('Admin/SinglePageManagement/delete', array('id'=>$value['id']))}');" class="red tooltip-error no-hover-underline" data-rel="tooltip" data-original-title="删除"><i class="icon-trash bigger-130"></i></a>
    91. </div>
    92. </td>
    93. </tr>
    94. <?php endforeach ?>
    95. </tbody>
    96. </table>
    97. <!-- 分页 -->
    98. <div class="row-fluid">
    99. <div class="page">{$page}</div>
    100. </div>
    101. </div>
    102. </div>
    103. </block>
    104. {// js}
    105. <block name="js">
    106. <script type="text/javascript">
    107. jQuery(function($) {
    108. // 这就是全选按钮
    109. $('table th input:checkbox').on('click' , function(){
    110. var that = this;
    111. $(this).closest('table').find('tr > td:first-child input:checkbox')
    112. .each(function(){
    113. this.checked = that.checked;
    114. $(this).closest('tr').toggleClass('selected');
    115. });
    116. });
    117. $.extend({
    118. action : function(url, obj)
    119. {
    120. var obj = $(obj).parents('form');
    121. $.ajax({
    122. url : url,
    123. type : 'get',
    124. data : obj.serialize(),
    125. success : function(res)
    126. {
    127. $.lagou.alert(res.msg, res.code, 2);
    128. $.lagou.formHide();
    129. location.reload();
    130. }
    131. });
    132. },
    133. del : function(url)
    134. {
    135. $.lagou.confirm('确认删除吗?', function(res){
    136. if (res) {
    137. $.get(url, function(response){
    138. //alert(response);
    139. $.lagou.alert(response.msg, response.code, 2);
    140. location.reload();
    141. });
    142. }
    143. });
    144. },
    145. // //通过
    146. // adopt : function(url)
    147. // {
    148. // $.lagou.confirm('确定要通过吗?', function(res){
    149. // if (res) {
    150. // $.get(url, function(response){
    151. // $.lagou.alert(response.msg, response.code, 2);
    152. // location.reload();
    153. // });
    154. // }
    155. // });
    156. // },
    157. // //拒绝
    158. // refuse : function(url)
    159. // {
    160. // $.lagou.confirm('确定拒绝吗?', function(res){
    161. // if (res) {
    162. // $.get(url, function(response){
    163. // $.lagou.alert(response.msg, response.code, 2);
    164. // location.reload();
    165. // });
    166. // }
    167. // });
    168. // }
    169. });
    170. })
    171. </script>
    172. </block>

      

     

    转载于:https://www.cnblogs.com/hao-1234-1234/p/7067333.html

    本文内容由网友自发贡献,转载请注明出处:https://www.wpsshop.cn/w/盐析白兔/article/detail/155718
    推荐阅读
    相关标签