edit_content.php 7.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155
  1. <!doctype html>
  2. <!--suppress JSAnnotator -->
  3. <html>
  4. <head>
  5. <meta charset="UTF-8">
  6. <meta name="viewport"
  7. content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  8. <meta http-equiv="X-UA-Compatible" content="ie=edge">
  9. <title>编辑内容</title>
  10. <link href="{__FRAME_PATH}css/font-awesome.min.css" rel="stylesheet">
  11. <link href="{__ADMIN_PATH}plug/umeditor/themes/default/css/umeditor.css" type="text/css" rel="stylesheet">
  12. <script type="text/javascript" src="{__ADMIN_PATH}plug/umeditor/third-party/jquery.min.js"></script>
  13. <script type="text/javascript" src="{__ADMIN_PATH}plug/umeditor/third-party/template.min.js"></script>
  14. <script type="text/javascript" charset="utf-8" src="{__ADMIN_PATH}plug/umeditor/umeditor.config.js"></script>
  15. <script type="text/javascript" charset="utf-8" src="{__ADMIN_PATH}plug/umeditor/umeditor.min.js"></script>
  16. <script type="text/javascript" src="{__ADMIN_PATH}plug/umeditor/lang/zh-cn/zh-cn.js"></script>
  17. <link href="{__PLUG_PATH}layui/css/layui.css" rel="stylesheet">
  18. <script src="{__PLUG_PATH}layui/layui.all.js"></script>
  19. <style>
  20. .edui-btn-toolbar .edui-btn.edui-active .edui-icon-fullscreen.edui-icon{ display: none;}
  21. .edui-container{overflow: initial !important;}
  22. button.btn-success.dim { box-shadow: inset 0 0 0 #1872ab,0 5px 0 0 #1872ab,0 10px 5px #999; }
  23. .float-e-margins .btn { margin-bottom: 5px; }
  24. button.dim { display: inline-block; color: #fff; text-decoration: none; text-transform: uppercase; text-align: center; padding-top: 6px; margin-right: 10px; position: relative; cursor: pointer; border-radius: 5px; font-weight: 600; margin-bottom: 20px!important; }
  25. .btn-success { background-color: #1c84c6; border-color: #1c84c6; color: #FFF; }
  26. .btn { border-radius: 3px; }
  27. .btn-success { color: #fff; background-color: #5cb85c; border-color: #4cae4c; }
  28. .btn { display: inline-block; padding: 6px 12px; margin-bottom: 0; font-size: 14px; font-weight: 400; line-height: 1.42857143; text-align: center; white-space: nowrap; vertical-align: middle; -ms-touch-action: manipulation; touch-action: manipulation; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; background-image: none; border: 1px solid transparent; border-radius: 4px; }
  29. button, input, select, textarea { font-family: inherit; font-size: inherit; line-height: inherit; }
  30. button.btn-success.dim:active { box-shadow: inset 0 0 0 #1872ab,0 2px 0 0 #1872ab,0 5px 3px #999; }
  31. button.dim:active { bottom: 4px; }
  32. .btn-success.active, .btn-success:active, .open .dropdown-toggle.btn-success { background-image: none; }
  33. .btn-success.active, .btn-success:active, .btn-success:focus, .btn-success:hover, .open .dropdown-toggle.btn-success { background-color: #1a7bb9; border-color: #1a7bb9; color: #FFF; }
  34. .dim{bottom: 7px; right: 8px; z-index: 1003; position: fixed !important;}
  35. </style>
  36. </head>
  37. <body>
  38. <button class="btn btn-success dim" data-url="{$action}" type="button"><i class="fa fa-upload"></i>
  39. </button>
  40. <textarea type="text/plain" id="myEditor" style="width:100%;">{$content ? $content : ''}</textarea>
  41. <script type="text/javascript">
  42. $eb = parent._mpApi;
  43. $('.dim').on('click',function(){
  44. $.ajax({
  45. url: $(this).data('url'),
  46. type: 'POST',
  47. dataType: 'json',
  48. data: {'{$field}':getContent()},
  49. success: function (res) {
  50. if(res.status == 200 && res.data.code == 200){
  51. $eb.message('success','保存成功!');
  52. } else
  53. return Promise.reject(res.data.msg || '保存失败!');
  54. },
  55. error: function () {
  56. $eb.message('error',err);
  57. }
  58. });
  59. });
  60. var editor = document.getElementById('myEditor');
  61. editor.style.height = document.body.scrollHeight+'px';
  62. //实例化编辑器
  63. var um = UM.getEditor('myEditor',{
  64. fullscreen:true
  65. });
  66. function getContent() {
  67. return (UM.getEditor('myEditor').getContent());
  68. }
  69. function hasContent() {
  70. return (UM.getEditor('myEditor').hasContents());
  71. }
  72. </script>
  73. <script type="text/javascript">
  74. $eb = parent._mpApi;
  75. $('.dim').on('click',function(){
  76. $eb.axios.post($(this).data('url'),{'{$field}':getContent()}).then(function(res){
  77. if(res.status == 200 && res.data.code == 200){
  78. $eb.message('success','保存成功!');
  79. } else
  80. return Promise.reject(res.data.msg || '保存失败!');
  81. }).catch(function(err){
  82. $eb.message('error',err);
  83. })
  84. });
  85. var editor = document.getElementById('myEditor');
  86. editor.style.height = document.body.scrollHeight+'px';
  87. window.UMEDITOR_CONFIG.toolbar = [
  88. // 加入一个 test
  89. 'source | undo redo | bold italic underline strikethrough | superscript subscript | forecolor backcolor | removeformat |',
  90. 'insertorderedlist insertunorderedlist | selectall cleardoc paragraph | fontfamily fontsize' ,
  91. '| justifyleft justifycenter justifyright justifyjustify |',
  92. 'link unlink | emotion selectimgs video | map',
  93. '| horizontal print preview fullscreen', 'drafts', 'formula'
  94. ];
  95. UM.registerUI('selectimgs',function(name){
  96. var me = this;
  97. var $btn = $.eduibutton({
  98. icon : 'image',
  99. click : function(){
  100. createFrame('选择图片','{:Url('widget.images/index')}?fodder=editor');
  101. },
  102. title: '选择图片'
  103. });
  104. this.addListener('selectionchange',function(){
  105. //切换为不可编辑时,把自己变灰
  106. var state = this.queryCommandState(name);
  107. $btn.edui().disabled(state == -1).active(state == 1)
  108. });
  109. return $btn;
  110. });
  111. //实例化编辑器
  112. var um = UM.getEditor('myEditor',{
  113. fullscreen:true
  114. });
  115. function getContent() {
  116. return (UM.getEditor('myEditor').getContent());
  117. }
  118. function hasContent() {
  119. return (UM.getEditor('myEditor').hasContents());
  120. }
  121. //弹窗
  122. function createFrame(title,src,opt){
  123. opt === undefined && (opt = {});
  124. return layer.open({
  125. type: 2,
  126. title:title,
  127. area: [(opt.w || 800)+'px', (opt.h || 550)+'px'],
  128. fixed: false, //不固定
  129. maxmin: true,
  130. moveOut:false,//true 可以拖出窗外 false 只能在窗内拖
  131. anim:5,//出场动画 isOutAnim bool 关闭动画
  132. offset:'auto',//['100px','100px'],//'auto',//初始位置 ['100px','100px'] t[ 上 左]
  133. shade:0,//遮罩
  134. resize:true,//是否允许拉伸
  135. content: src,//内容
  136. move:'.layui-layer-title'
  137. });
  138. }
  139. //选择图片
  140. function changeIMG(index,pic){
  141. $(".image_img").css('background-image',"url("+pic+")");
  142. $(".active").css('background-image',"url("+pic+")");
  143. $('#image_input').val(pic);
  144. }
  145. //选择图片插入到编辑器中
  146. function insertEditor(list){
  147. console.log(list);
  148. um.execCommand('insertimage', list);
  149. }
  150. </script>
  151. </body>
  152. </html>