API tools faq
paste
Advertisement
Guest User

Text Editor

a guest
Apr 24th, 2011
378
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 9.90 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. *
  6. {
  7. margin:0px;
  8. padding:0px;
  9. }
  10. #editor
  11. {
  12. width:610px;
  13. height:390px;
  14. margin:3% auto 0px auto;
  15. border:1px solid #c0c0c0;
  16. position:relative;
  17. }
  18. #editor div.toolbar
  19. {
  20. width:100%;
  21. height:30px;
  22. border-bottom:1px solid #c0c0c0;
  23. background-color:#efe5e5;
  24. position:relative;
  25. }
  26. #editor ul
  27. {
  28. display:block;
  29. float:left;
  30. margin-top:4px;
  31. }
  32. #editor li
  33. {
  34. height:20px;
  35. margin-left:4px;
  36. border:1px solid #b0b0b0;
  37. background-color:#efefef;
  38. line-height:20px;
  39. text-align:center;
  40. font-family:verdana;
  41. font-size:12px;
  42. list-style-type:none;
  43. display:block;
  44. float:left;
  45.  
  46. }
  47. #editor li:hover
  48. {
  49. color:#000;
  50. background-color:#f5f5f5;
  51. cursor:pointer;
  52. }
  53. #editor li.small_button
  54. {
  55. width:20px;
  56. }
  57. #editor #code_pane
  58. {
  59. width:610px;
  60. height:390px;
  61. display:none;
  62. border-style:none;
  63. }
  64. #editor div.mode_tab
  65. {
  66. height:20px;
  67. position:absolute;
  68. bottom:-20px;
  69. right:8px;
  70. z-index:1;
  71. }
  72. #editor div.mode_tab div
  73. {
  74. width:70px;
  75. height:20px;
  76. float:right;
  77. font-family:verdana;
  78. font-size:12px;
  79. color:#505050;
  80. line-height:20px;
  81. margin:auto -1px auto auto;
  82. text-align:center;
  83. margin-left:4px;
  84. border:1px solid #c0c0c0;
  85. cursor:pointer;
  86. background-color:#efe5e5;
  87. }
  88. #editor div.mode_tab div.active
  89. {
  90. color:#000000;
  91. border:1px solid #c0c0c0;
  92. border-top-color:#ffffff;
  93. cursor:pointer;
  94. background-color:#ffffff !important;
  95. z-index:2;
  96. }
  97. div.overlay
  98. {
  99. display:none;
  100. position:absolute;
  101. top:0px;
  102. left:0px;
  103. width:100%;
  104. height:100%;
  105. }
  106. .popbox
  107. {
  108. width:265px;
  109. height:100px;
  110. border:1px solid #c0c0c0;
  111. margin:20% auto auto auto;
  112. background-color:#ffffff;
  113. }
  114. .popbox td.title
  115. {
  116. text-align:center;
  117. height:20px;
  118. }
  119. .popbox td.title
  120. {
  121. height:22px;
  122. background-color:#c0c0c0;
  123. }
  124. .popbox div.field
  125. {
  126. margin-top:10px;
  127. margin-left:5px;
  128. }
  129. .popbox div.field input
  130. {
  131. width:200px;
  132. border:1px solid #c0c0c0;
  133. }
  134. .popbox div.buttons
  135. {
  136. margin-bottom:5px;
  137. padding-right:5px;
  138. }
  139. .popbox div.button
  140. {
  141. width:60px;
  142. height:20px;
  143. border:1px solid #c0c0c0;
  144. text-align:center;
  145. line-height:20px;
  146. font-family:verdana;
  147. font-size:12px;
  148. background-color:#efefef;
  149. float:right;
  150. cursor:pointer;
  151. margin-left:5px;
  152. margin-bottom:10px;
  153. }
  154. </style>
  155. <script>
  156. editor = {}
  157. editor.srgPos = null;
  158. editor.ergPos = null;
  159. editor.start = function(){
  160. var design_pane = document.getElementById('design_pane').contentWindow.document;
  161. var code_pane = document.getElementById('code_pane');
  162. design_pane.onmouseup = function(){editor.saveRange('design_pane')}
  163. if(design_pane.body.innerHTML!=''){
  164. design_pane.designMode = "on";
  165. }
  166. else{
  167. design_pane.body.focus();
  168. design_pane.body.innerHTML = "Default content.";
  169. design_pane.designMode = "on";
  170. }
  171. }
  172. editor.getRangeOffsetIE = function (r){
  173. var end = Math.abs(r.duplicate().moveEnd('character', -1000000));
  174. var range = r.duplicate();
  175. r.collapse( false );
  176. var parentElm = range.parentElement();
  177. var children = parentElm.getElementsByTagName('*');
  178. for (var i = children.length - 1; i >= 0; i--){
  179. range.moveToElementText( children[i] );
  180. if(range.inRange(r)){
  181. parentElm = children[i];
  182. break;
  183. }
  184. }
  185. range.moveToElementText(parentElm);
  186. return end - Math.abs(range.moveStart('character', -1000000));
  187. }
  188. editor.makeRange = function(iframeName){
  189. if(document.selection){
  190. if(editor.srgPos != null){
  191. window.frames[iframeName].focus();
  192. var myframe = window.frames[iframeName].document.body.createTextRange();
  193. myframe.moveStart("character",editor.srgPos);
  194. myframe.moveEnd("character",editor.ergPos);
  195. myframe.select();
  196. }
  197. }
  198. }
  199. editor.saveRange = function(iframeName){
  200. if(document.selection){
  201. var myframe = document.getElementById(iframeName).contentWindow.document.selection.createRange();
  202. if(myframe.text!=""){
  203. var mylenth = myframe.text.length;
  204. eOffset = editor.getRangeOffsetIE(myframe);
  205. editor.srgPos = eOffset - mylenth;
  206. var newrg = window.frames[iframeName].document.body.createTextRange();
  207. newrg.moveStart("character",0);
  208. newrg.moveEnd("character",0);
  209. fOffset = newrg.text.length;
  210. editor.ergPos = eOffset - fOffset;
  211. }
  212. else{
  213. editor.srgPos = null;
  214. editor.ergPos = null;
  215. }
  216. }
  217. }
  218. editor.cmd = function(iframeOb,cmd,opt){
  219. if(cmd == 'linkBox'){
  220. var linkbox = document.getElementById('editor_insertlink');
  221. var linkbox_ok = document.getElementById('editor_insertlink_ok');
  222. linkbox.style.display = "block";
  223. linkbox_ok.onclick = function(){
  224. var linkbox_field = document.getElementById('editor_insertlink_field').value;
  225. if(linkbox_field != ''){
  226. editor.cmd(iframeOb,'createLink',linkbox_field);
  227. editor.closeBox('editor_insertlink');
  228. }
  229. }
  230. }
  231. else{
  232. var design_pane = document.getElementById(iframeOb).contentWindow.document;
  233. editor.makeRange(iframeOb);
  234. design_pane.body.focus();
  235. design_pane.execCommand(cmd,false,opt);
  236. design_pane.body.focus();
  237. }
  238. }
  239. editor.code = function(clicked){
  240. var toolbar = document.getElementById('toolbar');
  241. var design_pane = document.getElementById('design_pane');
  242. var code_pane = document.getElementById('code_pane');
  243. var mode_tab = document.getElementById('mode_tab');
  244. var tabs = mode_tab.getElementsByTagName('div');
  245. code_pane.value = design_pane.contentWindow.document.body.innerHTML;
  246. toolbar.style.display = "none";
  247. design_pane.style.display = "none";
  248. code_pane.style.display = "block";
  249. for(i=0;i<tabs.length;i++){
  250. tabs[i].className = "";
  251. }
  252. clicked.className = "active";
  253. }
  254. editor.design = function(clicked){
  255. var toolbar = document.getElementById('toolbar');
  256. var design_pane = document.getElementById('design_pane');
  257. var code_pane = document.getElementById('code_pane');
  258. var mode_tab = document.getElementById('mode_tab');
  259. var tabs = mode_tab.getElementsByTagName('div');
  260. design_pane.contentWindow.document.body.innerHTML = code_pane.value;
  261. toolbar.style.display = "block";
  262. design_pane.style.display = "block";
  263. code_pane.style.display = "none";
  264. for(i=0;i<tabs.length;i++){
  265. tabs[i].className = "";
  266. }
  267. clicked.className = "active";
  268. }
  269. editor.closeBox = function(boxname){
  270. var boxob = document.getElementById(boxname);
  271. boxob.style.display = "none";
  272. }
  273. editor.getSelection = function(){
  274. var design_pane = document.getElementById('design_pane');
  275. var subRange = design_pane.contentWindow.document.selection.createRange();
  276. alert(subRange.text);
  277. }
  278. </script>
  279. </head>
  280. <body>
  281. <div id="editor">
  282. <div id="toolbar" class="toolbar">
  283. <ul>
  284. <li class="small_button" onmousedown="editor.saveRange('design_pane')" onmouseup="editor.cmd('design_pane','bold')" title="Bold"><b>B</b></li>
  285. <li class="small_button" onmousedown="editor.saveRange('design_pane')" onmouseup="editor.cmd('design_pane','italic')" title="Italic"><i>I</i></li>
  286. <li class="small_button" onmousedown="editor.saveRange('design_pane')" onmouseup="editor.cmd('design_pane','underline')" title="Underline"><u>U</u></li>
  287. <li class="small_button" onmousedown="editor.saveRange('design_pane')" onmouseup="editor.cmd('design_pane','justifyLeft')" title="Left">&laquo;</li>
  288. <li class="small_button" onmousedown="editor.saveRange('design_pane')" onmouseup="editor.cmd('design_pane','justifyRight')" title="Right">&raquo;</li>
  289. <li class="small_button" onmousedown="editor.saveRange('design_pane')" onmouseup="editor.cmd('design_pane','justifyCenter')" title="Center">-</li>
  290. <li class="small_button" onmousedown="editor.saveRange('design_pane')" onmouseup="editor.cmd('design_pane','justifyFull')" title="Justify">=</li>
  291. <li class="small_button" onmousedown="editor.saveRange('design_pane')" onmouseup="editor.cmd('design_pane','insertUnorderedList')" title="Unordered List">&middot;</li>
  292. <li class="small_button" onmousedown="editor.saveRange('design_pane')" onmouseup="editor.cmd('design_pane','linkBox')" title="Create Link">@</li>
  293. </ul>
  294. <ul>
  295. <li onclick="editor.start()" title="Start editing">&nbsp;Start&nbsp;</li>
  296. <li onmousedown="editor.getSelection()" title="Get Selection">&nbsp;Get Selection&nbsp;</li>
  297. </ul>
  298. </div>
  299. <div>
  300. <iframe name="design_pane" id="design_pane" width="610" height="359" frameborder="no"></iframe>
  301. <textarea id="code_pane"></textarea>
  302. </div>
  303. <div id="mode_tab" class="mode_tab">
  304. <div onclick="editor.code(this)">Code</div><div onclick="editor.design(this)" class="active">Design</div>
  305. </div>
  306. <div id="editor_insertlink" class="overlay">
  307. <table class="popbox" cellspacing="0" cellpadding="0">
  308. <form>
  309. <tr>
  310. <td class="title" colspan="3">Create Link</td>
  311. </tr>
  312. <tr>
  313. <td>&nbsp;</td><td><div class="field">URL&nbsp;:&nbsp;<input type="text" id="editor_insertlink_field" /></div></td><td>&nbsp;</td>
  314. </tr>
  315. <tr>
  316. <td>&nbsp;</td>
  317. <td>
  318. <div class="buttons">
  319. <div class="button" onclick="editor.closeBox('editor_insertlink')">Cancel</div>
  320. <div class="button" id="editor_insertlink_ok">OK</div>
  321. </div>
  322. </td>
  323. <td>&nbsp;</td>
  324. </tr>
  325. </form>
  326. </table>
  327. </div>
  328. </div>
  329. </body>
  330. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!