textarea {
box-sizing: border-box;
width: 100%;
+ height: 200px
}
+ /* optional */
.peach_html5_editor {
- width: 300px;
- height: 300px;
- border: 1px solid black;
- padding: 5px;
- position: relative;
- }
- .peach_html5_editor_overlay {
- position: absolute;
- top: -1px;
- left: -1px;
- width: 312px;
- height: 312px;
- overflow: hidden;
- }
- .peach_html5_editor_lightbox {
- position: absolute;
- background: rgba(100,100,100,0.2);
- }
- .peach_html5_editor_iframe {
- box-sizing: border-box;
- margin: 0;
- border: none;
- padding: 0;
- width: 300px;
- height: 300px;
+ width: 500px;
+ height: 500px;
+ margin: 0 auto;
}
</style>
</head>
<h1>Peach HTML5 Editor test page (compiled version)</h1>
<p>This version of the editor test page requires that you've compiled all the source files. (Just run <code>make</code>).</p>
<form action="#" method="get">
- <p>HTML view. Changes here propagate when you remove your cursor (press tab or click outside)<br><textarea rows="9" cols="22" name="in" id="in"><p> a b c d e f g h i j k l m n o p q r s t u v w x y z a b c d e f g h i j k l m n o p q r s t u v w x y z a b c d e f g h i j k l m n o p q r s t u v w x y z <strong>Bold <em> Italic + Bold</strong> Italic </em> Normal</p>
-<p style="white-space: pre"> this &lt;p&gt; has white-space: pre </p>
+ <p>HTML view. Changes here propagate when you remove your cursor (press tab or click outside)<br><textarea name="in" id="in"><H1>Headline!</h1><p> a b c
+ d e f<br>g <br> h i j <a href="http://example.com">Click me!</a> o p q r</p>
+ <p> y z <strong>Bold <em> Italic + Bold</strong> Italic </em> Normal</p>
+<p style="white-space: pre-wrap">this &lt;p&gt; has white-space: pre-wrap</p>
<div>
<div>I'm in a div</div>
<div>I'm in a div</div>
<div>
+<div>
+&nbsp;
+</div>
</div>
</div>
</textarea></p>