ueditor.jsp 2.2 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970
  1. <%@ page language="java" import="java.util.*" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
  2. <!DOCTYPE html>
  3. <html>
  4. <link>
  5. <title>ueditor</title>
  6. <link rel="stylesheet" href="plug-in/tab/css/tab.css">
  7. <!-- vue -->
  8. <script src="https://unpkg.com/vue/dist/vue.js"></script>
  9. <script type="text/javascript" charset="utf-8" src="plug-in/ueditor/ueditor.config.js"></script>
  10. <script type="text/javascript" charset="utf-8" src="plug-in/ueditor/ueditor.all.min.js"></script>
  11. </head>
  12. <body>
  13. <div id="app">
  14. <div v-for="(todo,index) in todos" v-show="index==currentEdit">
  15. <textarea v-bind="{id:'ueditorContent_'+index}" name="ueditorContent" type="text/plain" >{{todo.text}}</textarea>
  16. </div>
  17. <div class="pagetab">
  18. <ul id="pageList">
  19. <li v-bind:class="{current:index==currentEdit}" v-for="(todo,index) in todos" @click="changeEdit(index)" >
  20. <b>
  21. <span >{{todo.text }}</span>
  22. </b>
  23. </li>
  24. </ul>
  25. <span class="add">
  26. <img id="addPage" @click="addTab()" src="plug-in/tab/picture/icon_plus.gif" class="imgPlus" title="在当前页后插入">
  27. <img id="delPage" @click="delTab()" src="plug-in/tab/picture/icon_minus.gif" class="imgDelete" title="删除当前页">
  28. </span>
  29. </div>
  30. </div>
  31. <script>
  32. var app = new Vue({
  33. el: '#app',
  34. data: {
  35. todos: [
  36. { id:0, text: '主页' },
  37. ],
  38. currentEdit:0
  39. },
  40. methods: {
  41. addTab: function () {
  42. this.todos.push({ id:this.todos.length,text: '新页面'+this.todos.length });
  43. var id="ueditorContent_"+(this.todos.length-1);
  44. setTimeout(function () {
  45. UE.getEditor(id);
  46. },300)
  47. console.log("addTab")
  48. },
  49. delTab: function () {
  50. if(this.todos.length==1){
  51. alert("主页无法删除")
  52. return;
  53. }
  54. this.todos.splice(this.todos.length-1,1);
  55. this.currentEdit=this.todos.length-1;
  56. },
  57. changeEdit:function (index) {
  58. this.currentEdit=index;
  59. }
  60. }
  61. });
  62. var id="ueditorContent_"+0;
  63. var ue = UE.getEditor(id);
  64. </script>
  65. </body>
  66. </html>