givanz / VvvebJs

Drag and drop page builder library written in vanilla javascript without dependencies or build tools.
https://www.vvveb.com/vvvebjs/editor.html
Apache License 2.0
7.29k stars 1.66k forks source link

PHP code being removed and nav bar being duplicated #390

Open kerepuki opened 1 week ago

kerepuki commented 1 week ago

This may seem like two issues but they're both related to the save function.

My HTML files are actually PHP files. These files contain include statements to get headers, footers, global elements etc. When I save the file, even with ALLOW PHP set to true, the saving method strips away all the PHP code.

if (isset($_POST['html'])){
    $html = substr($_POST['html'], 0, MAX_FILE_LIMIT);
    if (!ALLOW_PHP) {
        //if (strpos($html, '<?php') !== false) {
        if (preg_match('@<\?php|<\? |<\?=|<\s*script\s*language\s*=\s*"\s*php\s*"\s*>@', $html)) {
            showError('PHP not allowed!');
        }
    }
}

Also when saving, the nav bar seems to be replicated outside the header section. Sample code below.

<header class="relative wrapper !bg-[#ffffff]" id="header">
<nav class="navbar navbar-expand-lg classic transparent navbar-light">
    <div class="container xl:flex-row lg:flex-row !flex-nowrap items-center">
        <div class="navbar-brand w-full">
            <a href="/">
                <img src="assets/img/logo.svg" class="h-10" alt="image">
            </a>
        </div>
        <div class="navbar-collapse offcanvas offcanvas-nav offcanvas-start">
            <div class="offcanvas-header xl:hidden lg:hidden flex items-center justify-between flex-row p-6">
                <h3 class="text-white xl:text-[1.5rem] !text-[calc(1.275rem_+_0.3vw)] !mb-0"><img src="assets/img/logo.svg" class="h-9" alt="image"></h3>
                <button type="button" class="btn-close btn-close-white mr-[-0.75rem] m-0 p-0 leading-none text-[#343f52] transition-all duration-[0.2s] ease-in-out border-0 motion-reduce:transition-none before:text-[1.05rem] before:content-['\ed3b'] before:w-[1.8rem] before:h-[1.8rem] before:leading-[1.8rem] before:shadow-none before:transition-[background] before:duration-[0.2s] before:ease-in-out before:flex before:justify-center before:items-center before:m-0 before:p-0 before:rounded-[100%] hover:no-underline bg-inherit before:bg-[rgba(255,255,255,.08)] before:font-Unicons hover:before:bg-[rgba(0,0,0,.11)] focus:outline-0" data-bs-dismiss="offcanvas" aria-label="Close"></button>
            </div>
            <div class="offcanvas-body xl:!ml-auto lg:!ml-auto flex flex-col !h-full">
                <ul class="navbar-nav">
                    <li class="nav-item">
                        <a class="nav-link font-Montserrat" href="/">Home</a>
                        <!--/.dropdown-menu -->
                    </li>
                    <li class="nav-item">
                        <a class="nav-link font-Montserrat" href="/team">Team</a>
                    </li>
                    <li class="nav-item lg:hidden xl:hidden">
                        <a href="/learn-more" class="font-Montserrat btn btn-sm sm:btn-lg btn-primary text-white !bg-[#db7f67] !border-[#db7f67] hover:text-white hover:!bg-[#db7f67] hover:!border-[#db7f67] !rounded-[50rem] !mr-2 inline-flex items-center justify-center leading-none">Learn more</a></span>
                    </li>
                </ul>
                <!-- /.navbar-nav -->
            </div>
            <!-- /.offcanvas-body -->
        </div>
        <!-- /.navbar-collapse -->
        <div class="navbar-other lg:!ml-4 xl:!ml-4">
            <ul class="navbar-nav !flex-row !items-center !ml-auto">
                <li class="nav-item hidden lg:flex xl:flex">
                    <a href="/learn-more" class="font-Montserrat btn btn-sm sm:btn-lg btn-primary text-white !bg-[#db7f67] !border-[#db7f67] hover:text-white hover:!bg-[#db7f67] hover:!border-[#db7f67] !rounded-[50rem] !mr-2 inline-flex items-center justify-center leading-none">Learn more</a></span>
                </li>
                <li class="nav-item xl:hidden lg:hidden">
                    <button class="hamburger offcanvas-nav-btn"></button>
                </li>
            </ul>
            <!-- /.navbar-nav -->
        </div>
        <!-- /.navbar-other -->
    </div>
    <!-- /.container -->
</nav>
</header>
givanz commented 6 days ago

If ALLOW_PHP is set to false then the php code is not removed in save.php.

The php code is probably stripped by the browser, you can log $_POST['html'] and see what the browser sends or check the request data in network tab from developer tools (F12 key).

If you wish to keep php code in the page (not recommended) you can use something like <script type="text/php"> for the tags instead of <?php.

kerepuki commented 6 days ago

I assume it is because when the page loads in the editor, PHP is executed and the output is HTML.

Take a simple variable declaration

<?php
$number = 1;
?>

If the suggested approach is not recommended, how can I retain the PHP code within my files?

givanz commented 6 days ago

You should use a template system like twig or blade, with php the user can insert any code and you expose your app to arbitrary code execution.

I use Vtpl https://github.com/givanz/vtpl myself inside Vvveb CMS https://github.com/givanz/Vvveb for pages edited by VvvebJs.

Vtpl uses html attributes for templating it does not use a template language and it was designed to be used for such cases where the html can be safely edited by page builders or html editors.

If you still wish to use php convert/replace php <?php tags to <script type="text/php"> before loading the page in VvvebJs and convert them back to <?php on page save.