about.html 3.6 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889
  1. <!-- 正文开始 -->
  2. <div class="layui-fluid">
  3. <div class="layui-card">
  4. <div class="layui-card-body">
  5. <!-- // 关于我们-->
  6. <form id="aboutForm" lay-filter="aboutForm" class="layui-form model-form">
  7. <div class="layui-form-item">
  8. <textarea name="content" id="aboutCkEditor"></textarea>
  9. </div>
  10. <div class="layui-form-item">
  11. <button class="layui-btn" perm-show="put:/store/about" lay-filter="modelSubmitAbout" lay-submit>保存</button>
  12. </div>
  13. </form>
  14. </div>
  15. </div>
  16. </div>
  17. <!-- js部分 -->
  18. <script>
  19. layui.use(['layer', 'form', 'table', 'util', 'notice','md5', 'admin', 'setter','CKEDITOR'], function () {
  20. var $ = layui.jquery;
  21. var layer = layui.layer;
  22. var form = layui.form;
  23. var admin = layui.admin;
  24. var notice = layui.notice;
  25. var setter = layui.setter;
  26. var CKEDITOR = layui.CKEDITOR;
  27. var html = "";
  28. // 加载配置数据
  29. admin.req('store/about', (res) => {
  30. if (10000 == res.code) {
  31. form.val('aboutForm', res.data);
  32. form.render();
  33. }
  34. }, 'GET', {async: false});
  35. // 渲染富文本编辑器
  36. var aboutEdt = CKEDITOR.replace('aboutCkEditor', {height: 520,
  37. language: 'zh-cn', //简体中文
  38. toolbar : [
  39. //加粗 斜体, 下划线 穿过线 下标字 上标字
  40. ['Bold','Italic','Underline','Strike','Subscript','Superscript'],
  41. // 数字列表 实体列表 减小缩进 增大缩进
  42. ['NumberedList','BulletedList','-','Outdent','Indent'],
  43. //左对 齐 居中对齐 右对齐 两端对齐
  44. ['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
  45. //超链接 取消超链接 锚点
  46. ['Link','Unlink','Anchor'],
  47. //图片 flash 表格 水平线 表情 特殊字符 分页符
  48. ['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak'],
  49. '/',
  50. // 样式 格式 字体 字体大小
  51. ['Styles','Format','Font','FontSize'],
  52. //文本颜色 背景颜色
  53. ['TextColor','BGColor'],
  54. //全屏 显示区块
  55. ['Maximize', 'ShowBlocks','-']
  56. ]
  57. });
  58. aboutEdt.on('fileUploadRequest', function (evt) {
  59. let xhr = evt.data.fileLoader.xhr;
  60. xhr.setRequestHeader('Authorization', setter.getToken());
  61. });
  62. CKEDITOR.instances.pageCkEditor;
  63. // 表单提交事件
  64. form.on('submit(modelSubmitAbout)', function (form) {
  65. // 追加数据
  66. var content = aboutEdt.getData();
  67. if (content === '') {
  68. notice.msg('内容不能为空',{icon:2});
  69. return false;
  70. }
  71. form.field.content = aboutEdt.getData();
  72. layer.load(2);
  73. admin.req('store/about', form.field, function (res) {
  74. layer.closeAll('loading');
  75. if (res.code === 10000) {
  76. notice.msg(res.message, {icon: 1});
  77. } else {
  78. notice.msg(res.message, {icon: 2});
  79. }
  80. },'POST');
  81. return false;
  82. });
  83. });
  84. </script>