edit_content.php 6.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136
  1. {extend name="public/container"}
  2. {block name="head_top"}
  3. <title>编辑内容</title>
  4. <link href="{__ADMIN_PATH}plug/umeditor/themes/default/css/umeditor.css" type="text/css" rel="stylesheet">
  5. <link href="{__ADMIN_PATH}module/wechat/news/css/style.css" type="text/css" rel="stylesheet">
  6. <link href="{__FRAME_PATH}css/plugins/chosen/chosen.css" rel="stylesheet">
  7. <script type="text/javascript" src="{__ADMIN_PATH}plug/umeditor/third-party/jquery.min.js"></script>
  8. <script type="text/javascript" src="{__ADMIN_PATH}plug/umeditor/third-party/template.min.js"></script>
  9. <script type="text/javascript" charset="utf-8" src="{__ADMIN_PATH}plug/umeditor/umeditor.config.js"></script>
  10. <script type="text/javascript" charset="utf-8" src="{__ADMIN_PATH}plug/umeditor/umeditor.min.js"></script>
  11. <script src="{__ADMIN_PATH}plug/validate/jquery.validate.js"></script>
  12. <script src="{__FRAME_PATH}js/plugins/chosen/chosen.jquery.js"></script>
  13. <script src="{__ADMIN_PATH}plug/vue/dist/vue.min.js"></script>
  14. <script type="text/javascript" src="{__ADMIN_PATH}js/request.js"></script>
  15. <script type="text/javascript" charset="utf-8"
  16. src="{__ADMIN_PATH}plug/ueditor/third-party/zeroclipboard/ZeroClipboard.js"></script>
  17. <script type="text/javascript" charset="utf-8" src="{__ADMIN_PATH}plug/ueditor/ueditor.config.js"></script>
  18. <script type="text/javascript" charset="utf-8" src="{__ADMIN_PATH}plug/ueditor/ueditor.all.min.js"></script>
  19. <script type="text/javascript" src="{__ADMIN_PATH}plug/ueditor/lang/zh-cn/zh-cn.js"></script>
  20. <script type="text/javascript" src="{__ADMIN_PATH}js/aliyun-oss-sdk-4.4.4.min.js"></script>
  21. <script type="text/javascript" src="{__MODULE_PATH}widget/lib/plupload-2.1.2/js/plupload.full.min.js"></script>
  22. <script type="text/javascript" src="{__MODULE_PATH}widget/OssUpload.js"></script>
  23. <style>
  24. .edui-btn-toolbar .edui-btn.edui-active .edui-icon-fullscreen.edui-icon{ display: none;}
  25. .edui-container{overflow: initial !important;}
  26. button.btn-success.dim { box-shadow: inset 0 0 0 #1872ab,0 5px 0 0 #1872ab,0 10px 5px #999; }
  27. .float-e-margins .btn { margin-bottom: 5px; }
  28. 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; }
  29. .btn-success { background-color: #1c84c6; border-color: #1c84c6; color: #FFF; }
  30. .btn { border-radius: 3px; }
  31. .btn-success { color: #fff; background-color: #5cb85c; border-color: #4cae4c; }
  32. .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; }
  33. button, input, select, textarea { font-family: inherit; font-size: inherit; line-height: inherit; }
  34. button.btn-success.dim:active { box-shadow: inset 0 0 0 #1872ab,0 2px 0 0 #1872ab,0 5px 3px #999; }
  35. button.dim:active { bottom: 4px; }
  36. .btn-success.active, .btn-success:active, .open .dropdown-toggle.btn-success { background-image: none; }
  37. .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; }
  38. .dim{bottom: 7px; right: 8px; z-index: 1003; position: fixed !important;}
  39. .m-t-5 {
  40. margin-top: 5px;
  41. }
  42. .edui-default .edui-for-image .edui-icon {
  43. background-position: -380px 0px;
  44. }
  45. </style>
  46. {/block}
  47. {block name="content"}
  48. <div id="app">
  49. <button class="btn btn-success dim" data-url="" @click="submit" type="button"><i class="fa fa-upload"></i>
  50. </button>
  51. <textarea id="myEditor" style="width:100%;height: 90%;">{$content ? $content : ''}</textarea>
  52. </div>
  53. <script type="text/javascript" src="{__ADMIN_PATH}js/layuiList.js"></script>
  54. {/block}
  55. {block name="script"}
  56. <script>
  57. var url="{$action}";
  58. var _vue = new Vue({
  59. el:'#app',
  60. data:{
  61. uploader: null,
  62. ue: null,
  63. //上传类型
  64. mime_types: {
  65. Image: "jpg,gif,png,JPG,GIF,PNG",
  66. Video: "mp4,MP4",
  67. },
  68. host: ossUpload.host + '/',
  69. },
  70. methods:{
  71. submit:function () {
  72. var that = this;
  73. $.ajax({
  74. url:url,
  75. data:{'{$field}':that.ue.getContent()},
  76. type:'post',
  77. dataType:'json',
  78. success:function(res){
  79. if(res.code == 200){
  80. location.reload();
  81. return $eb.message('success',res.msg);
  82. }else{
  83. return $eb.message('error',res.msg);
  84. }
  85. }
  86. })
  87. }
  88. },
  89. mounted:function () {
  90. var that = this;
  91. //选择图片插入到编辑器中
  92. window.insertEditor = function (list) {
  93. that.ue.execCommand('insertimage', list);
  94. };
  95. that.$nextTick(function () {
  96. layList.form.render();
  97. //实例化编辑器
  98. UE.registerUI('imagenone', function (editor, name) {
  99. var $btn = new UE.ui.Button({
  100. name: 'image',
  101. onclick: function () {
  102. ossUpload.createFrame('选择图片', {fodder: 'editor'},{w:800,h:550});
  103. },
  104. title: '选择图片'
  105. });
  106. return $btn;
  107. });
  108. that.ue = UE.getEditor('myEditor');
  109. });
  110. that.$nextTick(function () {
  111. that.uploader = ossUpload.upload({
  112. id: 'ossupload',
  113. FilesAddedSuccess: function () {
  114. },
  115. uploadIng: function (file) {
  116. },
  117. success: function (res) {
  118. layList.msg('上传成功');
  119. },
  120. fail: function (err) {
  121. layList.msg(err);
  122. }
  123. })
  124. });
  125. }
  126. })
  127. function changeIMG(index,pic){
  128. _vue._data.newListIndex.image_input = pic;
  129. _vue._data.newList[_vue._data.indexItem].image_input = pic;
  130. };
  131. </script>
  132. {/block}