README

Block Editor PHP客户端是一组PHP类，它简化了块编辑器（从JSON数据）的HTML元素的创建和渲染。它由下面的JavaScript应用程序生成JSON数据。它提供了一种面向对象的方法来构建动态和可定制的布局。

安装

   composer require aponahmed/blockeditor-php-client

使用

use Aponahmed\HtmlBuilder\ElementFactory;

require_once 'vendor/autoload.php';
//Json String From Generate by Builder(Link Below)
$jsonString='[{"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":{}}}]';

echo ElementFactory::json2html($jsonString)//Here Html Will be generated

JSON构建器

以下是块编辑器的JSON构建器：BlockEditor
JSON构建器的快速预览 Codepen

目录

• 元素类
• 区域类
• 文本元素类
• 列表元素类
• createElement函数
• JSON结构
• 使用

元素类

Element类是一个抽象基类，作为特定HTML元素的基石。它包括设置属性、样式和类以及渲染元素的方法。

方法

setAttribute($name, $value)

设置元素的属性。

addStyle($propertyName, $propertyValue)

向元素添加样式。

addClass($name)

向元素添加类。

setStyleAttribute()

根据添加的样式设置样式属性。

setClassAttribute()

根据添加的类设置类属性。

render($indent = 0)

抽象方法，由子类实现以渲染元素的HTML表示形式。

区域类

Area类扩展了Element类，表示一个块或容器区域。它可以包含子元素，并具有方向和宽度等附加属性。

属性

• $childs：子元素的数组。
• $dir：区域的方向（'row'或'column'）。
• $width：区域的宽度。

方法

addChild(Element $child)

向区域添加子元素。

render($indent = 0)

渲染区域的HTML表示形式。

renderMarkdown($indent = 0)

渲染区域的Markdown表示形式。

文本元素类

TextElement类扩展了Element类，表示基于文本的HTML元素。

属性

• $content：文本元素的内容。

方法

render($indent = 0)

渲染文本元素的HTML表示形式。

renderMarkdown($indent = 0)

渲染文本元素的Markdown表示形式。

列表元素类

ListElement类扩展了Element类，表示列表HTML元素。

属性

• $listType：列表的类型（'ul'或'ol'）。
• $items：表示列表项的子元素的数组。

方法

addChild(Element $item)

向列表添加子元素（列表项）。

render($indent = 0)

渲染列表的HTML表示形式。

createElement函数

createElement函数是一个辅助函数，用于根据提供的JSON数据创建各种元素类的实例。

JSON结构

用于定义块编辑器布局和内容的JSON数据的结构。

使用

Block Editor PHP客户端生成HTML输出的示例用法。