WordEditArea.htm 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243
  1. <!DOCTYPE html>
  2. <html xmlns="http://www.w3.org/1999/xhtml" xmlns:wb="http://open.weibo.com/wb">
  3. <head>
  4. <title>可可乐博协同编辑</title>
  5. <link href="/uform.css" rel="stylesheet" type="text/css" />
  6. <link href="/css/Office/Word/Word.css" rel="stylesheet" type="text/css" />
  7. <link href="/css/Office/Word/WordEditor.css" rel="stylesheet" type="text/css" />
  8. <link href="/css/Office/Word/Nav.css" rel="stylesheet" type="text/css" />
  9. <script src="/uform.js" type="text/javascript" charset="utf-8"></script>
  10. <script src="/js/Common/Common.js" type="text/javascript"></script>
  11. <script src="/js/Office/Word/Word.js" type="text/javascript"></script>
  12. <script src="/js/Office/Word/WordPanel.js" type="text/javascript"></script>
  13. <script src="/js/Office/Word/WordEditor.js" type="text/javascript"></script>
  14. <script src="/js/Office/Poll.js" type="text/javascript"></script>
  15. <script src="/js/UForm/Editor.js" type="text/javascript"></script>
  16. <script src="/js/UForm/EditorTable.js" type="text/javascript"></script>
  17. <script src="/js/Controls/Complex/Editor.js" type="text/javascript"></script>
  18. <script src="/js/Office/Word/Template/Navigation/Nav.js" type="text/javascript"></script>
  19. <script src="/js/UForm/Event.js" type="text/javascript"></script>
  20. <style type="text/css">
  21. body {
  22. overflow: hidden;
  23. }
  24. body div ::-webkit-scrollbar {
  25. width: 6px;
  26. height: 6px;
  27. }
  28. </style>
  29. <script type="text/javascript">
  30. document.domain = document.domain.split(".").slice(-2).join(".");
  31. </script>
  32. </head>
  33. <body unselectable="on" style="overflow: auto; background-color: #aaaaaa;">
  34. <!--- 工具栏 --->
  35. <div id="tools" style="position: fixed; width: 100%; background: #f7f8f9; border-bottom: 1px solid silver;
  36. z-index: 999;" onmousedown="U.MD.O.W.E.onmousedown();" onclick="U.MD.O.W.E.onclick();">
  37. <div class="U_MD_O_H_Area">
  38. <button title="新建" id="U_MD_O_H_new" onclick="U.MD.O.W.newDoc(US.userInfo)" style="margin-left: 10px;">
  39. <div class="U_MD_O_H_icon" style="background-position: -10px -592px;">
  40. </div>
  41. 新建
  42. </button>
  43. <button title="保存" id="U_MD_O_H_save" onclick="U.MD.O.W.save()">
  44. <div class="U_MD_O_H_icon" style="background-position: -38px -592px;">
  45. </div>
  46. 保存
  47. </button>
  48. <button title="附件" style="position: relative; overflow: hidden;">
  49. <div class="U_MD_O_H_icon" style="background-position: -1056.5px -594.5px;">
  50. </div>
  51. <input type="file" multiple onchange="U.UF.E.attachment(this, $('#U_MD_O_H_wordEditor')[0])"
  52. style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0;" />
  53. 附件
  54. </button>
  55. <div class="U_MD_O_H_cutoff">
  56. </div>
  57. </div>
  58. <div class="U_MD_O_H_Area">
  59. <button title="插入图片" style="position: relative; overflow: hidden;">
  60. <div class="U_MD_O_H_icon" style="background-position: -67px -592px; width: 22px;">
  61. </div>
  62. <input type="file" multiple accept="image/*"
  63. onchange="U.UF.E.picture(this, $('#U_MD_O_H_wordEditor')[0])"
  64. style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0;" />
  65. </button>
  66. <button title="插入表格" onclick="U.UF.E.table(U.UF.E.getRangeAt())">
  67. <div class="U_MD_O_H_icon" style="background-position: -100px -592px;">
  68. </div>
  69. </button>
  70. <div class="U_MD_O_H_select" title="字体" style="width: 90px;" datafont="family;">
  71. </div>
  72. <div class="U_MD_O_H_select" title="字号" style="width: 65px;" datafont="size">
  73. </div>
  74. <div class="U_MD_O_H_cutoff">
  75. </div>
  76. </div>
  77. <div class="U_MD_O_H_Area">
  78. <div class="U_MD_O_H_select" title="标题:设置可生成目录" style="width: 60px;" datafont="title">
  79. </div>
  80. <div class="U_MD_O_H_cutoff">
  81. </div>
  82. </div>
  83. <div class="U_MD_O_H_Area">
  84. <div title="背景色" class="U_MD_O_H_colorPick" id="U_MD_O_H_colorPick_fontBG">
  85. <button style="padding: 4px 6px;">
  86. <div class="U_MD_O_H_colorPick_fontBG"
  87. onclick="U.UF.E.setRangeStyle({ 'background': this.style.backgroundColor })">
  88. </div>
  89. </button>
  90. <button class="U_MD_O_H_icon U_MD_O_H_down" onclick="U.MD.O.W.E.colorPicker(this.parentElement, event)">
  91. </button>
  92. </div>
  93. <div title="字体色" class="U_MD_O_H_colorPick" id="U_MD_O_H_colorPick_fontColor">
  94. <button style="padding: 4px 6px;"
  95. onclick="U.UF.E.setRangeStyle({ 'color': $('.U_MD_O_H_colorPick_fontColor',this)[0].style.backgroundColor })">
  96. <div class="U_MD_O_H_icon U_MD_O_H_colorPick_fontColor_Icon">
  97. </div>
  98. <div class="U_MD_O_H_icon U_MD_O_H_colorPick_fontColor">
  99. </div>
  100. </button>
  101. <button class="U_MD_O_H_icon U_MD_O_H_down" onclick="U.MD.O.W.E.colorPicker(this.parentElement, event)">
  102. </button>
  103. </div>
  104. <button title="添加链接" onclick="U.UF.E.addHref();">
  105. <div class="U_MD_O_H_icon" style="background-position: -201px -591px;">
  106. </div>
  107. </button>
  108. <button title="加粗" id="U_MD_O_H_fontWeight" onclick="U.UF.E.setRangeStyle({ 'font-weight': 'bold' });">
  109. <div class="U_MD_O_H_icon" style="background-position: -246px -591px;">
  110. </div>
  111. </button>
  112. <button title="斜体" id="U_MD_O_H_italic" onclick="U.UF.E.setRangeStyle({ 'fontStyle': 'italic' });">
  113. <div class="U_MD_O_H_icon" style="background-position: -227px -591px;">
  114. </div>
  115. </button>
  116. <button title="下划线" id="U_MD_O_H_underline"
  117. onclick="U.UF.E.setRangeStyle({ 'textDecoration': 'underline' });">
  118. <div class="U_MD_O_H_icon" style="background-position: -269px -591px;">
  119. </div>
  120. </button>
  121. <button title="删除线" id="U_MD_O_H_lineThrough"
  122. onclick="U.UF.E.setRangeStyle({ 'textDecoration': 'line-through' });">
  123. <div class="U_MD_O_H_icon" style="background-position: -296px -591px; width: 22px;">
  124. </div>
  125. </button>
  126. <div class="U_MD_O_H_cutoff">
  127. </div>
  128. </div>
  129. <div class="U_MD_O_H_Area">
  130. <!-- <button title="撤销" onclick="U.UF.E.key.undo(event, $('#U_MD_O_H_wordEditor')[0]);">
  131. <div class="U_MD_O_H_icon" style="background-position: -328px -593px;">
  132. </div>
  133. </button>
  134. <button title="重做" onclick="U.UF.E.key.redo(event, $('#U_MD_O_H_wordEditor')[0]);">
  135. <div class="U_MD_O_H_icon" style="background-position: -1111px -595px;">
  136. </div>
  137. </button>-->
  138. <button title="清除格式" onclick="U.UF.E.clearStyle();">
  139. <div class="U_MD_O_H_icon" style="background-position: -359px -592px;">
  140. </div>
  141. </button>
  142. <button title="格式刷" onclick="U.UF.E.formatBrush($('#U_MD_O_H_wordEditor')[0]);"
  143. ondblclick="U.UF.E.formatBrush($('#U_MD_O_H_wordEditor')[0], true);">
  144. <div class="U_MD_O_H_icon" style="background-position: -1084px -594px;">
  145. </div>
  146. </button>
  147. <div class="U_MD_O_H_cutoff">
  148. </div>
  149. </div>
  150. <div class="U_MD_O_H_Area">
  151. <button title="左对齐" id="U_MD_O_H_alignleft" onclick="U.UF.E.setLineStyle({'text-align': 'left' })">
  152. <div class="U_MD_O_H_icon" style="background-position: -512px -593px;">
  153. </div>
  154. </button>
  155. <button title="居中" id="U_MD_O_H_aligncenter" onclick="U.UF.E.setLineStyle({'text-align': 'center' })"
  156. class=" U_MD_O_H_alignFocus">
  157. <div class="U_MD_O_H_icon" style="background-position: -545px -593px;">
  158. </div>
  159. </button>
  160. <button title="右对齐" id="U_MD_O_H_alignright" onclick="U.UF.E.setLineStyle({'text-align': 'right' })">
  161. <div class="U_MD_O_H_icon" style="background-position: -575px -593px;">
  162. </div>
  163. </button>
  164. <div class="U_MD_O_H_select" title="行间距" style="width: 40px;" data-font="line-height">
  165. </div>
  166. <!-- <div title="行间距" onclick="U.MD.O.W.E.loadLineHeight(this, $('.U_MD_O_H_lineHeight_ul')[0]);"
  167. style="margin-top: 6px; padding: 0 4px; position: relative;">
  168. <div class="U_MD_O_H_icon" style="background-position: -1154px -590px; height: 28px;
  169. width: 26px;">
  170. </div>
  171. <div class="U_MD_O_H_icon U_MD_O_H_down">
  172. </div>
  173. <div class="U_MD_O_H_lineHeight_ul" onclick="U.MD.O.W.E.loadLineHeight(this.previousElementSibling)"
  174. style="display: none;">
  175. <button class="U_MD_O_H_clearButtonDefault U_MD_O_H_lineHeight_btn" onclick="U.UF.E.setLineStyle({'line-height': 1 })">
  176. 1.0</button>
  177. <button class="U_MD_O_H_clearButtonDefault U_MD_O_H_lineHeight_btn" onclick="U.UF.E.setLineStyle({'line-height': 1.5 })">
  178. 1.5</button>
  179. <button class="U_MD_O_H_clearButtonDefault U_MD_O_H_lineHeight_btn" onclick="U.UF.E.setLineStyle({'line-height': 2 })">
  180. 2.0</button>
  181. <button class="U_MD_O_H_clearButtonDefault U_MD_O_H_lineHeight_btn" onclick="U.UF.E.setLineStyle({'line-height': 2.5 })">
  182. 2.5</button>
  183. <button class="U_MD_O_H_clearButtonDefault U_MD_O_H_lineHeight_btn" onclick="U.UF.E.setLineStyle({'line-height': 3 })">
  184. 3.0</button>
  185. </div>
  186. </div> -->
  187. <div class="U_MD_O_H_cutoff">
  188. </div>
  189. </div>
  190. <div class="U_MD_O_H_Area">
  191. <button title="打印" onclick="U.UF.EV.print($('#U_MD_O_H_wordEditor')[0]);">
  192. <div class="U_MD_O_H_icon" style="background-position: -675px -593px; width: 22px;">
  193. </div>
  194. </button>
  195. <button title="下载" id="U_MD_O_H_Area_Down" onclick="U.MD.O.W.E.downOfficeWord('doc',$('#U_MD_O_H_wordEditor')[0])">
  196. <div class="U_MD_O_H_icon" style="background-position: -1165px -594px; width: 22px;">
  197. </div>
  198. </button>
  199. <button title="站点预览" onclick="U.MD.O.W.E.sitePreview()">
  200. <div class="U_MD_O_H_icon" style="background-position: -753px -593px;">
  201. </div>
  202. </button>
  203. <button title="分享" onclick="" style="display: none;">
  204. <div class="U_MD_O_H_icon" style="background-position: -781px -593px;">
  205. </div>
  206. </button>
  207. <div class="U_MD_O_H_cutoff">
  208. </div>
  209. </div>
  210. <div class="U_MD_O_H_Area" id="U_MD_O_H_More">
  211. <button title="更多">
  212. <div class="U_MD_O_H_icon" style="background-position: -813px -593px;">
  213. </div>
  214. </button>
  215. </div>
  216. <div class="U_MD_O_H_More_Area" style="display: none;">
  217. </div>
  218. </div>
  219. <!--- 可编辑区域 --->
  220. <div class="U_MD_O_H_body" id="U_MD_O_R_Parent">
  221. <div class="U_MD_O_H_body_main">
  222. <div class="U_MD_O_H_pageSize U_MD_O_H_Nav clear" style="display: none;">
  223. <div class="U_MD_O_H_Nav_Add" onclick="U.MD.O.W.T.N.Easy.add()">
  224. +
  225. </div>
  226. <div class="U_MD_O_H_Nav_Box clear" onclick="U.UF.EV.stopBubble()">
  227. </div>
  228. </div>
  229. <div class="U_MD_O_H_pageSize" id="U_MD_O_W_E_body">
  230. <div class="U_MD_O_H_wordEditor U_MD_O_H_lineStyle" id="U_MD_O_H_wordEditor" contenteditable="true">
  231. </div>
  232. </div>
  233. </div>
  234. <!--- 互联办公的功能 --->
  235. <div class="U_MD_O_H_body_left" id="U_MD_O_H_body_left">
  236. </div>
  237. </div>
  238. </body>
  239. </html>