WordEditArea.htm 13 KB

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