textarea-editor/index.html

102 lines
1.5 KiB
HTML

<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<!-- traemos la librería JS - editor : TODO -> tenerla en local-->
<link href="css/quill.snow.css" rel="stylesheet"/>
<title>My sample homepage</title>
</head>
<style>
body{
overflow-x:hidden;
}
/* contain
div.contain {
width: 100%;
height: 250px;
overflow: hidden;
position: relative;
}
img.contain {
width: 100%;
height: auto;
}
*/
/* cover */
div.cover {
position: fixed;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
}
img.cover {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
min-width: 50%;
min-height: 50%;
overflow-x: hidden;
}
blockquote {
background: #eee;
border-radius: 5px;
margin: 16px 0;
}
blockquote p {
padding: 15px;
}
cite {
margin: 16px 32px;
font-weight: bold;
}
</style>
<body>
<section>
<!-- Create the toolbar container -->
<div id="toolbar">
<button class="ql-bold">Bold</button>
<button class="ql-italic">Italic</button>
</div>
<!-- Create the editor container -->
<div id="editor">
<p>Horas non numero, nisi serenas</p>
<p>Atelier Discordia <strong>bold</strong> text</p>
<p><br /></p>
</div>
<section/>
</body>
<!-- Include the Quill library -->
<script src="js/quill.js"></script>
<!-- Initialize Quill editor -->
<script>
const quill = new Quill("#editor", {
theme: "snow",
});
</script>
</html>