test-uploadfn.html 1.8 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152
  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><p>&lt;script&gt;&lt;/script&gt;</p></div>
  23. </div>
  24. <p><br></p>
  25. <script type="text/javascript" src="../dist/js/lib/jquery-1.10.2.min.js"></script>
  26. <script type="text/javascript" src="../dist/js/wangEditor.js"></script>
  27. <script type="text/javascript">
  28. var editor = new wangEditor('editor-trigger');
  29. // 上传图片
  30. editor.config.uploadImgUrl = '/upload';
  31. // 自定义上传事件
  32. editor.config.uploadImgFns.onload = function (resultText, xhr) {
  33. // resultText 服务器端返回的text
  34. // xhr 是 xmlHttpRequest 对象,IE8、9中不支持
  35. // 上传图片时,已经将图片的名字存在 editor.uploadImgOriginalName
  36. var originalName = editor.uploadImgOriginalName || '';
  37. alert(resultText);
  38. // 如果 resultText 是图片的url地址,可以这样插入图片:
  39. editor.command(null, 'insertHtml', '<img src="' + resultText + '" alt="' + originalName + '" style="max-width:100%;"/>');
  40. // 如果不想要 img 的 max-width 样式,也可以这样插入:
  41. // editor.command(null, 'InsertImage', resultText);
  42. };
  43. editor.create();
  44. </script>
  45. </body>
  46. </html>