Без имени
  1. <!-- #######  YAY, I AM THE SOURCE EDITOR! #########-->
  2. <h1 style="color: #5e9ca0;">You can edit <span style="color: #2b2301;">this demo</span> text!</h1>
  3. <h2 style="color: #2e6c80;">How to use the editor:</h2>
  4. <p>Paste your documents in the visual editor on the left or your HTML code in the source editor in the right. <br />Edit any of the two areas and see the other changing in real time.&nbsp;</p>
  5. <p>Click the <span style="background-color: #2b2301; color: #fff; display: inline-block; padding: 3px 10px; font-weight: bold; border-radius: 5px;">Clean</span> button to clean your source code.</p>
  6. <h2 style="color: #2e6c80;">Some useful features:</h2>
  7. <ol style="list-style: none; font-size: 14px; line-height: 32px; font-weight: bold;">
  8. <li style="clear: both;"><img style="float: left;" src="" alt="interactive connection" width="45" /> Interactive source editor</li>
  9. <li style="clear: both;"><img style="float: left;" src="" alt="html cleaner" width="45" /> HTML Cleaning</li>
  10. <li style="clear: both;"><img style="float: left;" src="" alt="Word to html" width="45" /> Word to HTML conversion</li>
  11. <li style="clear: both;"><img style="float: left;" src="" alt="replace text" width="45" /> Find and Replace</li>
  12. <li style="clear: both;"><img style="float: left;" src="" alt="gibberish" width="45" /> Lorem-Ipsum generator</li>
  13. <li style="clear: both;"><img style="float: left;" src="" alt="html table div" width="45" /> Table to DIV conversion</li>
  14. </ol>
  15. <p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</p>
  16. <h2 style="color: #2e6c80;">Cleaning options:</h2>
  17. <table class="editorDemoTable">
  18. <td>Name of the feature</td>
  19. <td>Example</td>
  20. <td>Default</td>
  21. </tr>
  22. </thead>
  23. <td>Remove tag attributes</td>
  24. <td><img style="margin: 1px 15px;" src="images/smiley.png" alt="laughing" width="40" height="16" /> (except <strong>img</strong>-<em>src</em> and <strong>a</strong>-<em>href</em>)</td>
  25. <td>&nbsp;</td>
  26. </tr>
  27. <td>Remove inline styles</td>
  28. <td><span style="color: green; font-size: 13px;">You <strong style="color: blue; text-decoration: underline;">should never</strong>&nbsp;use inline styles!</span></td>
  29. <td><strong style="font-size: 17px; color: #2b2301;">x</strong></td>
  30. </tr>
  31. <td>Remove classes and IDs</td>
  32. <td><span id="demoId">Use classes to <strong class="demoClass">style everything</strong>.</span></td>
  33. <td><strong style="font-size: 17px; color: #2b2301;">x</strong></td>
  34. </tr>
  35. <td>Remove all tags</td>
  36. <td>This leaves <strong style="color: blue;">only the plain</strong> <em>text</em>. <img style="margin: 1px;" src="images/smiley.png" alt="laughing" width="16" height="16" /></td>
  37. <td>&nbsp;</td>
  38. </tr>
  39. <td>Remove successive &amp;nbsp;s</td>
  40. <td>Never use non-breaking spaces&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;to set margins.</td>
  41. <td><strong style="font-size: 17px; color: #2b2301;">x</strong></td>
  42. </tr>
  43. <td>Remove empty tags</td>
  44. <td>Empty tags should go!</td>
  45. <td>&nbsp;</td>
  46. </tr>
  47. <td>Remove tags with one &amp;nbsp;</td>
  48. <td>This makes&nbsp;no sense!</td>
  49. <td><strong style="font-size: 17px; color: #2b2301;">x</strong></td>
  50. </tr>
  51. <td>Remove span tags</td>
  52. <td>Span tags with <span style="color: green; font-size: 13px;">all styles</span></td>
  53. <td><strong style="font-size: 17px; color: #2b2301;">x</strong></td>
  54. </tr>
  55. <td>Remove images</td>
  56. <td>I am an image: <img src="images/smiley.png" alt="laughing" /></td>
  57. <td>&nbsp;</td>
  58. </tr>
  59. <td>Remove links</td>
  60. <td><a href="">This is</a> a link.</td>
  61. <td>&nbsp;</td>
  62. </tr>
  63. <td>Remove tables</td>
  64. <td>Takes everything out of the table.</td>
  65. <td>&nbsp;</td>
  66. </tr>
  67. <td>Replace table tags with structured divs</td>
  68. <td>This text is inside a table.</td>
  69. <td>&nbsp;</td>
  70. </tr>
  71. <td>Remove comments</td>
  72. <td>This is only visible in the source editor <!-- HELLO! --></td>
  73. <td><strong style="font-size: 17px; color: #2b2301;">x</strong></td>
  74. </tr>
  75. <td>Encode special characters</td>
  76. <td><span style="color: red; font-size: 17px;">&hearts;</span> <strong style="font-size: 20px;">&acirc;&tilde;&ordm; &acirc;&tilde;&hellip;</strong> &gt;&lt;</td>
  77. <td><strong style="font-size: 17px; color: #2b2301;">x</strong></td>
  78. </tr>
  79. <td>Set new lines and text indents</td>
  80. <td>Organize the tags in a nice tree view.</td>
  81. <td>&nbsp;</td>
  82. </tr>
  83. </tbody>
  84. </table>
  85. <p><strong>&nbsp;</strong></p>
  86. <p><strong>Save this link into your bookmarks and share it with your friends. It is all FREE! </strong><br /><strong>Enjoy!</strong></p>
  87. <p><strong>&nbsp;</strong></p>

Share with your friends: