HTML-editor - Introduction to the tiny Editor:

Clever html engine

☰PHP2HTML

Test site and documentation for Clever html engine • Errors may occur and future news may be shown • ver.1.7.3: 78 core functions.

MOVE: Drag to place this card elsewhere among the cards. Alt + arrow up/down: one place. The order is remembered in this browser.

Working with tiny Editor:

HINT for this card

TOGGLE-height: Click icon to toggle viewHeight for this card

WIDE: Click to maximize/normalize this card width

COLLAPSE: Click to close all cards

EXPAND: Click to open all cards

<div style="padding-top: 15px; padding-right: 10px; padding-bottom: 10px;">
System enviroment
PHP2HTML makes use of some external libraries which can be located either locally in a folder on the host server or public on a CDN server: Cloudflare on the Internet.
If location on a CDN server is chosen, it has the disadvantage that the program loses functionality when there is no connection to the Internet. If local location is selected, it is up to you to copy needed files and provide updates manually.
When you program a page, you must choose which library and location to use.
Locally located libraries are located in the system folder _assets.
<hr style="padding-left: 40px;">
Local folders:
&lt;System_folder&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; System support files (.lib.php .sys.json .init.php)
&nbsp; &nbsp; &nbsp;&brvbar;---- _accessories&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;Project support files (.img .ttf)
&nbsp; &nbsp; &nbsp;&brvbar;---- _assets &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;"libraries"
&nbsp; &nbsp; &nbsp;&brvbar;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &brvbar;---- jquery&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "jquery" &sup1;
&nbsp; &nbsp; &nbsp;&brvbar;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &brvbar;---- jquery-ui&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "jquery-UserInterface" &sup1;
&nbsp; &nbsp; &nbsp;&brvbar;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &brvbar;---- tablesorter&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;"Advanced tables" &sup1;
&nbsp; &nbsp; &nbsp;&brvbar;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &brvbar;---- font-awesome&nbsp; &nbsp; &nbsp;"Icons" &sup1;
&nbsp; &nbsp; &nbsp;&brvbar;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &brvbar;---- tinymce&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "HTML rich text editor" &sup1;
&nbsp; &nbsp; &nbsp;&brvbar;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &brvbar;---- dialog-polyfill&nbsp; &nbsp; &nbsp; &nbsp;"popup dialog"
&nbsp; &nbsp; &nbsp;&brvbar;---- &lt;Project_1_folder&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;(.page.php)
&nbsp; &nbsp; &nbsp;&brvbar;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&brvbar;---- &lt;Project_data&gt;&nbsp; &nbsp; (.dat .json .img)
&nbsp; &nbsp; &nbsp;&brvbar;---- &lt;Project_2_folder&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;(.page.php)
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &brvbar;---- &lt;Project_data&gt;&nbsp; &nbsp; (.dat .json .img)
&nbsp;
&sup1; Every library-folder has a subfolder:&nbsp;latest containing the newest library-files.
&nbsp;
Content in a github clone:
Project folders:
[_accessories]&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;(System)
[_assets]&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; (System)
[Data.demo]&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; (Related demo system)&nbsp;
[Proj.demo]&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;(Related demo system)
[world]&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; (Related demo system)
&nbsp;
System files:
php2html.lib.php&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;(Core system)
menu.inc.php&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;(System)
translate.inc.php&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; (System)
funcscann.php&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;(System)
_trans.sys.json&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; (System)
Project.notes.txt&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;(System)
LICENSE&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;(System)
filedata.inc.php&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; (file library)
&nbsp;
project.init.php&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;(Custom setup)
customLib.inc.php&nbsp; &nbsp; &nbsp; &nbsp; (Custom setup)
customRules.inc.php&nbsp; &nbsp; (Custom setup)
&nbsp;
_config.yml&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; (Github file)
index.md&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;(Github file)
README.md&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; (Github file)

About the powerfull externel libraryes:
jquery&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "jquery" &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a title="More about the system..." href="https://jquery.com/" target="_blank" rel="noopener">Feature-rich JavaScript library</a>
jquery-ui&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "jquery-UserInterface"&nbsp; &nbsp; &nbsp; <a title="More about the system..." href="https://jqueryui.com/" target="_blank" rel="noopener">User interface interactions</a>
tablesorter&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;"Advanced tables"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a title="More about the system..." href="https://mottie.github.io/tablesorter/docs/" target="_blank" rel="noopener">Plugin for turning a standard HTML table into a sortable table</a>
font-awesome&nbsp; &nbsp; &nbsp;"Icons"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a title="More about the system..." href="https://fontawesome.com/" target="_blank" rel="noopener">Icon library and toolkit</a>
&nbsp;tinymce&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "HTML rich text editor"&nbsp; &nbsp;<a title="More about the system..." href="https://www.tiny.cloud/" target="_blank" rel="noopener">Self hosted advanced WYSIWYG HTML editor</a>
dialog-polyfill&nbsp; &nbsp; &nbsp; &nbsp;"popup dialog"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a title="More about the system..." href="https://github.com/GoogleChrome/dialog-polyfill" target="_blank" rel="noopener">Dialog element for a popup box</a>
&nbsp; &nbsp;
Project building:
A project consists of a number of web-pages and a menu system to navigate between these.
Each project-page is calling&nbsp;php2html.lib.php&nbsp;and is activating needed libraries:
As needed, other libraries are called, for example, menu.inc.php, translate.inc.php, filedata.inc.php, etc.
Local project data is also initialized in "project.page".&nbsp;
Global project data is initialized in project.init.php which php2html.lib.php&nbsp;calls initially.
&nbsp;
If you have custom functions you can place them in customLib.inc.php which is called from php2html.lib.php&nbsp;at the end.
A 3rd file which can be called from&nbsp;php2html.lib.php is customRules.inc.php. It only concerns special rules for htm_Table().
</div>

This is the HTML editor

Based on open source: tinyMCE

Drag to resize the card (or use the arrow keys). Double-click or Home: original sizeColumn view: the column decides the width of the card - only the height can be dragged (down to less than the content). Turn the column view off to change the width.

MOVE: Drag to place this card elsewhere among the cards. Alt + arrow up/down: one place. The order is remembered in this browser.

Data-file for tiny Editor: EditContent.htm

TOGGLE: Click icon or card header-text to open / close this card

TOGGLE-height: Click icon to toggle viewHeight for this card

WIDE: Click to maximize/normalize this card width

COLLAPSE: Click to close all cards

EXPAND: Click to open all cards

Info: The editor starts with the file EditContent.htm. Your changes are saved in this browser session only (not on the server).

Load a local .htm, .html or .txt file into the editor (in this session only)

Load the file into the editor

Upload local file to edit

Load a local .htm, .html or .txt file into the editor (in this session only)

Save the text in the editor as a file on your computer

Download file

Save the text in the editor as a file on your computer