-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
18 lines (15 loc) · 7.39 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./dist/styles.css">
</head>
<body>
<div id='customAreaBuilder'></div>
<textarea
id="layoutData">[{"type":"Area","direction":"column","childs":[{"type":"H","align":"left","content":"BlockEditor - A Simple and Easy Handle Html Builder","tag":"h2","more":{"customClass":""}},{"type":"P","align":"left","content":"The Block Editor is a versatile web development tool designed for creating dynamic and customizable layouts. Built using HTML, CSS, and JavaScript, this editor empowers web developers to effortlessly construct content-rich pages with a variety of components.","more":{"customClass":""}}],"width":100,"more":{"customClass":"","padding":0,"bg":false,"border":false,"borderRadius":0,"styles":{}}},{"type":"Area","direction":"row","childs":[{"type":"Area","direction":"column","childs":[{"type":"H","align":"left","content":"Features","tag":"h3","more":{"customClass":""}},{"type":"P","align":"left","content":"Extensibility: The editor is designed with future extensibility in mind, allowing for the seamless addition of new features or specialized methods.<br><br>Documentation: Ongoing efforts to improve documentation, including comments and JSDoc, to enhance code readability and maintainability.<br><br>Modularity: Components can be easily added or removed, promoting a modular and scalable approach to building layouts.<br><br>Customization: The editor allows for the customization of individual components through properties, such as custom classes, padding, background, border, and border radius.<br><br>Context Menus: Context menus provide quick access to actions like creating new areas, inserting components, deleting areas, changing direction, resizing, and accessing properties.<br><br>Resizable Layouts: Users can dynamically resize areas, enhancing the flexibility of the editor in adapting to various content needs.<br><br>Component Browser: A convenient component browser facilitates the insertion of new components, streamlining the development process.","more":{"customClass":""}}],"width":50,"more":{"customClass":"feature-area","padding":0,"bg":false,"border":false,"borderRadius":0,"styles":{"background":"#e8e8e8","padding":"25px","margin":"0px"}}},{"type":"Area","direction":"column","childs":[{"type":"Area","direction":"column","childs":[{"type":"H","align":"left","content":"Components","tag":"h3","more":{"customClass":""}},{"type":"List","align":"left","listType":"ul","items":["Heading H1-H6","Paragraph","List (ul/ol)","Column with some default orientation","Image WordPress","Editor WpEditor<br>"],"more":{"customClass":""}}],"width":100,"more":{"customClass":"","padding":0,"bg":false,"border":false,"borderRadius":0,"styles":{"background":"#a1b56c","padding":"30px"}}},{"type":"Area","direction":"column","childs":[{"type":"H","align":"left","content":"Key Feature","tag":"h3","more":{"customClass":""}},{"type":"List","align":"left","listType":"ol","items":["Easy Create Any layout","Modular Component System","Dynamic HTML Element Creation","Component Icons","User-Friendly Event Handling","HTML Parsing"],"more":{"customClass":""}}],"width":100,"more":{"customClass":"","padding":0,"bg":false,"border":false,"borderRadius":0,"styles":{"background":"#86c1b9","padding":"30px","margin":"10px 0 0"}}}],"width":50,"more":{"customClass":"","padding":0,"bg":false,"border":false,"borderRadius":0,"styles":{"background":"#e8e8e8"}}}],"width":100,"more":{"customClass":"","padding":0,"bg":false,"border":false,"borderRadius":0,"styles":{}}},{"type":"Area","width":100,"direction":"row","childs":[{"width":50,"direction":"row","type":"Area","childs":[{"type":"P","align":"left","content":"<span style=\"color: rgb(0, 0, 0); font-family: \"Open Sans\", Arial, sans-serif; font-size: 14px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: center; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: normal; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial; display: inline !important; float: none;\">If you use this site regularly and would like to help keep the site on the Internet, please consider donating a small sum to help pay</span>","more":{"customClass":""}}],"more":{"customClass":"","padding":0,"bg":false,"border":false,"borderRadius":0,"styles":{}}},{"width":50,"direction":"row","type":"Area","childs":[{"type":"P","align":"left","content":"<span style=\"color: rgb(0, 0, 0); font-family: \"Open Sans\", Arial, sans-serif; font-size: 14px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: center; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: normal; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial; display: inline !important; float: none;\">If you use this site regularly and would like to help keep the site on the Internet, please consider donating a small sum to help pay</span>","more":{"customClass":""}}],"more":{"customClass":"","padding":0,"bg":false,"border":false,"borderRadius":0,"styles":{}}},{"width":50,"direction":"row","type":"Area","childs":[{"type":"P","align":"left","content":"<span style=\"color: rgb(0, 0, 0); font-family: \"Open Sans\", Arial, sans-serif; font-size: 14px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: center; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: normal; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial; display: inline !important; float: none;\">If you use this site regularly and would like to help keep the site on the Internet, please consider donating a small sum to help pay</span>","more":{"customClass":""}}],"more":{"customClass":"","padding":0,"bg":false,"border":false,"borderRadius":0,"styles":{}}},{"width":50,"direction":"row","type":"Area","childs":[{"type":"P","align":"left","content":"<span style=\"color: rgb(0, 0, 0); font-family: \"Open Sans\", Arial, sans-serif; font-size: 14px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: center; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: normal; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial; display: inline !important; float: none;\">If you use this site regularly and would like to help keep the site on the Internet, please consider donating a small sum to help pay</span>","more":{"customClass":""}}],"more":{"customClass":"","padding":0,"bg":false,"border":false,"borderRadius":0,"styles":{}}}],"more":{"customClass":"","padding":0,"bg":false,"border":false,"borderRadius":0,"styles":{}}}]</textarea>
<script src="./dist/bundle.js"></script>
</body>
</html>