test-muti.html 2.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>wangEditor2 test</title>
  6. <link rel="stylesheet" type="text/css" href="../dist/css/wangEditor.min.css">
  7. <style type="text/css">
  8. #div1,#div2 {
  9. width: 100%;
  10. height: 150px;
  11. }
  12. </style>
  13. </head>
  14. <body style="padding:0 20px;">
  15. <p>wangEditor2.0 demo演示(功能尚未开发完成),支持 IE8+ 浏览器</p>
  16. <div class="container">
  17. <div id="div1">
  18. <h3>标题标题1</h3>
  19. <p>请输入内容111</p>
  20. <p><a href="#">链接链接1</a></p>
  21. </div>
  22. <p>------- 分割线 -------</p>
  23. <div id="div2">
  24. <h3>标题标题2</h3>
  25. <p>请输入内容222</p>
  26. <p><a href="#">链接链接2</a></p>
  27. </div>
  28. </div>
  29. <p>底部test</p>
  30. <script type="text/javascript" src="../dist/js/lib/jquery-1.10.2.min.js"></script>
  31. <script type="text/javascript" src="../dist/js/wangEditor.js"></script>
  32. <script type="text/javascript">
  33. $(function () {
  34. var editor1 = new wangEditor('div1');
  35. var editor2 = new wangEditor('div2');
  36. // editor2.config.menus = [
  37. // 'source',
  38. // '|',
  39. // 'bold',
  40. // 'underline',
  41. // 'italic',
  42. // 'strikethrough',
  43. // 'eraser',
  44. // 'forecolor',
  45. // 'bgcolor',
  46. // '|',
  47. // 'quote',
  48. // 'fontfamily',
  49. // 'fontsize',
  50. // 'head',
  51. // 'unorderlist',
  52. // 'orderlist',
  53. // 'alignleft',
  54. // 'aligncenter',
  55. // 'alignright',
  56. // '|',
  57. // 'link',
  58. // 'unlink',
  59. // 'table',
  60. // 'emotion',
  61. // '|',
  62. // 'img',
  63. // 'video',
  64. // // 'location',
  65. // 'insertcode',
  66. // '|',
  67. // 'undo',
  68. // 'redo',
  69. // 'fullscreen'
  70. // ];
  71. if (window.console) {
  72. console.log(editor1);
  73. console.log(editor2);
  74. }
  75. editor1.config.uploadImgUrl = '/upload';
  76. editor2.config.uploadImgUrl = '/upload';
  77. editor1.create();
  78. editor2.create();
  79. // 避免上面编辑器的 dropPanel 被下面的编辑器遮挡
  80. editor1.$editorContainer.css('z-index', 20)
  81. editor2.$editorContainer.css('z-index', 10)
  82. });
  83. </script>
  84. </body>
  85. </html>