index.html 4.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149
  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. #editor-trigger {
  9. height: 400px;
  10. /*max-height: 500px;*/
  11. }
  12. .container {
  13. width: 100%;
  14. margin: 0 auto;
  15. position: relative;
  16. }
  17. </style>
  18. </head>
  19. <body style="padding:0 20px;">
  20. <p>wangEditor2.0 支持 IE8 浏览器</p>
  21. <div id="editor-container" class="container">
  22. <div id="editor-trigger"><p>请输入内容</p></div>
  23. <!-- <textarea id="editor-trigger" style="display:none;">
  24. <p>请输入内容...</p>
  25. </textarea> -->
  26. </div>
  27. <p><br></p>
  28. <script type="text/javascript" src="../dist/js/lib/jquery-1.10.2.min.js"></script>
  29. <script type="text/javascript" src="../dist/js/wangEditor.js"></script>
  30. <!--<script type="text/javascript" src="../dist/js/wangEditor.min.js"></script>-->
  31. <script type="text/javascript">
  32. // 阻止输出log
  33. // wangEditor.config.printLog = false;
  34. var editor = new wangEditor('editor-trigger');
  35. // 上传图片
  36. editor.config.uploadImgUrl = '/upload';
  37. editor.config.uploadParams = {
  38. // token1: 'abcde',
  39. // token2: '12345'
  40. };
  41. editor.config.uploadHeaders = {
  42. // 'Accept' : 'text/x-json'
  43. }
  44. // editor.config.uploadImgFileName = 'myFileName';
  45. // 隐藏网络图片
  46. // editor.config.hideLinkImg = true;
  47. // 表情显示项
  48. editor.config.emotionsShow = 'value';
  49. editor.config.emotions = {
  50. 'default': {
  51. title: '默认',
  52. data: './emotions.data'
  53. },
  54. 'weibo': {
  55. title: '微博表情',
  56. data: [
  57. {
  58. icon: 'http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/7a/shenshou_thumb.gif',
  59. value: '[草泥马]'
  60. },
  61. {
  62. icon: 'http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/60/horse2_thumb.gif',
  63. value: '[神马]'
  64. },
  65. {
  66. icon: 'http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/bc/fuyun_thumb.gif',
  67. value: '[浮云]'
  68. },
  69. {
  70. icon: 'http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/c9/geili_thumb.gif',
  71. value: '[给力]'
  72. },
  73. {
  74. icon: 'http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/f2/wg_thumb.gif',
  75. value: '[围观]'
  76. },
  77. {
  78. icon: 'http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/70/vw_thumb.gif',
  79. value: '[威武]'
  80. }
  81. ]
  82. }
  83. };
  84. // 插入代码时的默认语言
  85. // editor.config.codeDefaultLang = 'html'
  86. // 只粘贴纯文本
  87. // editor.config.pasteText = true;
  88. // 跨域上传
  89. // editor.config.uploadImgUrl = 'http://localhost:8012/upload';
  90. // 第三方上传
  91. // editor.config.customUpload = true;
  92. // 普通菜单配置
  93. // editor.config.menus = [
  94. // 'img',
  95. // 'insertcode',
  96. // 'eraser',
  97. // 'fullscreen'
  98. // ];
  99. // 只排除某几个菜单(兼容IE低版本,不支持ES5的浏览器),支持ES5的浏览器可直接用 [].map 方法
  100. // editor.config.menus = $.map(wangEditor.config.menus, function(item, key) {
  101. // if (item === 'insertcode') {
  102. // return null;
  103. // }
  104. // if (item === 'fullscreen') {
  105. // return null;
  106. // }
  107. // return item;
  108. // });
  109. // onchange 事件
  110. editor.onchange = function () {
  111. console.log(this.$txt.html());
  112. };
  113. // 取消过滤js
  114. // editor.config.jsFilter = false;
  115. // 取消粘贴过来
  116. // editor.config.pasteFilter = false;
  117. // 设置 z-index
  118. // editor.config.zindex = 20000;
  119. // 语言
  120. // editor.config.lang = wangEditor.langs['en'];
  121. // 自定义菜单UI
  122. // editor.UI.menus.bold = {
  123. // normal: '<button style="font-size:20px; margin-top:5px;">B</button>',
  124. // selected: '.selected'
  125. // };
  126. // editor.UI.menus.italic = {
  127. // normal: '<button style="font-size:20px; margin-top:5px;">I</button>',
  128. // selected: '<button style="font-size:20px; margin-top:5px;"><i>I</i></button>'
  129. // };
  130. editor.create();
  131. </script>
  132. </body>
  133. </html>