test-style.html 2.8 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>wangEditor2 test</title>
  6. <link rel="stylesheet" type="text/css" href="../dist/css/wangEditor.min.css">
  7. <style type="text/css">
  8. #div1 {
  9. width: 100%;
  10. height: 300px;
  11. }
  12. .container {
  13. position: relative;
  14. }
  15. .wangEditor-container .wangEditor-txt blockquote {
  16. display: block;
  17. border: 1px solid #003399;
  18. border-left: 8px solid #003399;
  19. padding: 5px 10px;
  20. margin: 10px 0;
  21. line-height: 1.4;
  22. font-size: 100%;
  23. background-color: #fff;
  24. }
  25. .wangEditor-container .wangEditor-txt table {
  26. border: none;
  27. border-collapse: collapse;
  28. }
  29. .wangEditor-container .wangEditor-txt table td,
  30. .wangEditor-container .wangEditor-txt table th {
  31. border: 1px solid #003399;
  32. padding: 3px 5px;
  33. min-width: 50px;
  34. height: 20px;
  35. }
  36. .wangEditor-container .wangEditor-txt pre {
  37. border: 1px solid #003399;
  38. background-color: #fff;
  39. padding: 10px;
  40. margin: 5px 0px;
  41. font-size: 0.8em;
  42. border-radius: 3px;
  43. }
  44. </style>
  45. </head>
  46. <body style="padding:0 20px;">
  47. <p>wangEditor2.0.0 自定义编辑区域内容的样式</p>
  48. <div class="container">
  49. <div id="div1">
  50. <!-- <textarea id="div1"> -->
  51. <h3>标题标题1</h3>
  52. <blockquote><p>请输入内容222</p></blockquote>
  53. <p><a href="#">链接链接</a></p>
  54. <pre style="max-width:100%;overflow-x:auto;"><code>var a = 'a';
  55. var b = 'b';</code></pre>
  56. <p>请输入内容</p>
  57. <table>
  58. <tr>
  59. <td>#</td>
  60. <td>姓名</td>
  61. <td>年龄</td>
  62. </tr>
  63. <tr>
  64. <td>1</td>
  65. <td>zhang</td>
  66. <td>20</td>
  67. </tr>
  68. <tr>
  69. <td>2</td>
  70. <td>wang</td>
  71. <td>30</td>
  72. </tr>
  73. <tr>
  74. <td>3</td>
  75. <td>lee</td>
  76. <td>40</td>
  77. </tr>
  78. </table>
  79. <!-- </textarea> -->
  80. </div>
  81. </div>
  82. <p>底部test</p>
  83. <script type="text/javascript" src="../dist/js/lib/jquery-1.10.2.min.js"></script>
  84. <script type="text/javascript" src="../dist/js/wangEditor.js"></script>
  85. <script type="text/javascript">
  86. $(function () {
  87. var editor = new wangEditor('div1');
  88. editor.create();
  89. });
  90. </script>
  91. </body>
  92. </html>