edittd.html 3.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  2. "http://www.w3.org/TR/html4/loose.dtd">
  3. <html>
  4. <head>
  5. <title></title>
  6. <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
  7. <script type="text/javascript" src="../internal.js"></script>
  8. <style type="text/css">
  9. * {margin: 0; padding: 0}
  10. table { margin: 10px;font-size: 12px}
  11. table tr { height: 25px}
  12. input { width: 110px;border: 1px solid #ccc;}
  13. select { width: 76px;margin-left:6px\9; }
  14. span.strong {font-weight: bold;}
  15. </style>
  16. </head>
  17. <body>
  18. <table>
  19. <tr>
  20. <td width="70"><span class="strong"><var id="lang_background"></var></span></td>
  21. <td><input id="bgColor" type="text" value="#FFFFFF"></td>
  22. </tr>
  23. <tr>
  24. <td rowspan="2"><span class="strong"><var id="lang_alignment"></var></span></td>
  25. <td><var id="lang_horizontal"></var>:&nbsp;<select id="align">
  26. <option value="">默认</option>
  27. <option value="center">居中</option>
  28. <option value="left">居左</option>
  29. <option value="right">居右</option>
  30. </select>
  31. </td>
  32. </tr>
  33. <tr>
  34. <td><var id="lang_vertical"></var>:&nbsp;<select id="vAlign">
  35. <option value="">默认</option>
  36. <option value="middle">居中</option>
  37. <option value="top">顶端对齐</option>
  38. <option value="bottom">底端对齐</option>
  39. </select>
  40. </td>
  41. </tr>
  42. </table>
  43. <script type="text/javascript">
  44. addColorPickListener();
  45. dialog.onok = function () {
  46. var tdItem = {
  47. bgColor:$G( "bgColor" ).value || "#FFFFFF",
  48. align:$G( "align" ).value || "",
  49. vAlign:$G( "vAlign" ).value || ""
  50. };
  51. editor.execCommand( "edittd", tdItem );
  52. };
  53. (function () {
  54. if ( !editor.currentSelectedArr.length ) {
  55. var range = editor.selection.getRange();
  56. var td = domUtils.findParentByTagName( range.startContainer, 'td', true );
  57. if ( td ) {
  58. $G( "bgColor" ).value = (td.bgColor || "#FFFFFF").toUpperCase();
  59. $G( "align" ).value = td.align || "";
  60. $G( "vAlign" ).value = td.vAlign || "";
  61. }
  62. }
  63. })();
  64. /**
  65. * 绑定取色器监听事件
  66. */
  67. function addColorPickListener() {
  68. var colorPicker = getColorPicker(),
  69. ids = ["bgColor"];
  70. for ( var i = 0, ci; ci = $G( ids[i++] ); ) {
  71. domUtils.on( ci, "click", function () {
  72. var me = this;
  73. showColorPicker( colorPicker, me );
  74. colorPicker.content.onpickcolor = function ( t, color ) {
  75. me.value = color.toUpperCase();
  76. colorPicker.hide();
  77. };
  78. colorPicker.content.onpicknocolor = function () {
  79. me.value = '';
  80. colorPicker.hide();
  81. };
  82. } );
  83. domUtils.on( ci, "keyup", function () {
  84. colorPicker.hide();
  85. } );
  86. }
  87. domUtils.on( document, 'mousedown', function () {
  88. UE.ui.Popup.postHide( this );
  89. } );
  90. }
  91. /**
  92. * 实例化一个colorpicker对象
  93. */
  94. function getColorPicker() {
  95. return new UE.ui.Popup( {
  96. editor:editor,
  97. content:new UE.ui.ColorPicker( {
  98. noColorText:lang.noColor,
  99. editor:editor
  100. } )
  101. } );
  102. }
  103. /**
  104. * 在anchorObj上显示colorpicker
  105. * @param anchorObj
  106. */
  107. function showColorPicker( colorPicker, anchorObj ) {
  108. colorPicker.showAnchor( anchorObj );
  109. }
  110. </script>
  111. </body>
  112. </html>