multiEditorWithOneInstance.html 1.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960
  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
  5. <title></title>
  6. <script type="text/javascript" charset="utf-8" src="../ueditor.config.js"></script>
  7. <script type="text/javascript" charset="utf-8" src="editor_api.js"></script>
  8. <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.3.min.js"></script>
  9. <style>
  10. table{margin-bottom:10px;border-collapse:collapse;display:table;border:1px dashed #ddd}
  11. #test td{padding:5px;border: 1px solid #DDD;}
  12. </style>
  13. </head>
  14. <body>
  15. <h1>UEditor多编辑区域一个编辑器实例</h1>
  16. <table id="test">
  17. <tr>
  18. <td width="10%">
  19. 编辑区域一
  20. </td>
  21. <td class="content" id="content1"><script id="editor1" type="text/plain" style="width:1024px;height:200px;">内容1</script></td>
  22. </tr>
  23. <tr>
  24. <td>
  25. 编辑区域二
  26. </td>
  27. <td class="content" id="content2">内容2</td>
  28. </tr>
  29. <tr>
  30. <td>
  31. 编辑区域三
  32. </td>
  33. <td class="content" id="content3">内容3</td>
  34. </tr>
  35. </table>
  36. <script type="text/javascript">
  37. var ue = UE.getEditor('editor1');
  38. ue.ready(function(){
  39. //阻止工具栏的点击向上冒泡
  40. $(this.container).click(function(e){
  41. e.stopPropagation()
  42. })
  43. });
  44. $('.content').click(function(e){
  45. var $target = $(this);
  46. var content = $target.html();
  47. var currentParnet = ue.container.parentNode.parentNode;
  48. var currentContent = ue.getContent();
  49. $target.html('');
  50. $target.append(ue.container.parentNode);
  51. ue.reset();
  52. setTimeout(function(){
  53. ue.setContent(content);
  54. },200)
  55. $(currentParnet).html(currentContent);
  56. })
  57. </script>
  58. </body>
  59. </html>