How can I use this as a content editor only?

[SilasOlatayo]

Please, how can I use this as a content editor only with a page builder function? I don't need to create .html or header & footer.

[Asser90]

Ive changed libs/build.js to use if for the same usecase as you.

Ive changed the getHtml function to get whats inside body instead of all html. Not sure about best practice but it works for me.

getHtml: function(keepHelperAttributes = true) 
	{
		var doc = window.FrameDocument;
		var hasDoctpe = (doc.doctype !== null);
		var html = "";
		
         html +=  doc.body.innerHTML;
         
         return this.removeHelpers(html, keepHelperAttributes);
	},

[givanz]

Hi

In the latest release you can hide file manager from layout buttons near logo to disable file manager and new page button.

To make it always hidden you can edit scss/_builder.scss and set $builder-filemanager-height to 0px

$builder-filemanager-height:0px !default;

or add the following css in editor.html or your page or css file

body
{
   --builder-filemanager-height: 0px;
}

You can disable certain elements like header/footer so that they can't be edited by adding vvveb-disabled attribute

<div class="col-lg-4" data-vvveb-disabled="">
          </div>

Depending on the page you are editing you can choose not to include a footer/header.

Thanks @Asser90 for code to save only body content.

[marcocesarato]

Hi

In the latest release you can hide file manager from layout buttons near logo to disable file manager and new page button.

To make it always hidden you can edit scss/_builder.scss and set $builder-filemanager-height to 0px

$builder-filemanager-height:0px !default;

or add the following css in editor.html or your page or css file

body
{
   --builder-filemanager-height: 0px;
}

You can disable certain elements like header/footer so that they can't be edited by adding vvveb-disabled attribute

<div class="col-lg-4" data-vvveb-disabled="">
          </div>

Depending on the page you are editing you can choose not to include a footer/header.

Thanks @Asser90 for code to save only body content.

I done it working with iframes.

• First of all just need disable the file manager following @givanz procedure or editing editor.html removing the code (search for filemanager classes or ids) and editing the css for components box height.
• I removed some buttons not needed (that depends what you need).
• Created a template.html (it can be .php or other if you need to apply your theme if you have one) with the styles of my pages
• I edited editor.html js code as follow:

   /**
     * Get url parameter
     */
     function getParam(parameterName) {
        var result = null,
            tmp = [];
        var items = location.search.substr(1).split("&");
        for (var index = 0; index < items.length; index++) {
            tmp = items[index].split("=");
            if (tmp[0] === parameterName) result = decodeURIComponent(tmp[1]);
        }
        return result;
    }

    /**
     * Get HTML body
     * @return {string}
     */
    function HTMLParser(aHTMLString) {
        var doc = document.implementation.createHTMLDocument("example");
        doc.documentElement.innerHTML = aHTMLString;
        return doc.body.innerHTML;
    }

    /**
     * Save HTML on specified top parent textarea
     */
    function saveHTML() {
        try {
            var DomHTML = HTMLParser(Vvveb.Builder.getHtml());
            $('#' + getParam('id'), window.top.document).val(DomHTML);
        } catch (e) {
            console.log(e);
        }
    }

    // Overwrite save methods
    Vvveb.Gui.save = saveHTML;
    Vvveb.Builder.saveAjax = function () {};

    // Save auto when hover the preview iframe
    $('#iframe1')
        .hover(saveHTML)
        .contents().find('iframe').hover(saveHTML);

    // Initialize builder
    $(document).ready(function () {
        Vvveb.Builder.init($('#' + getParam('id'), window.parent.document).val(), function () {
            Vvveb.Builder.setHtml($('#' + getParam('id'), window.top.document).val());
        });
        Vvveb.Builder._loadIframe('template.php'); // CHANGE WITH YOUR TEMPLATE PAGE
        Vvveb.Gui.init();
    });

• At the end I used an iframe of editor.html with the param of the textarea id (like: editor.html?id=content) like:

<textarea name="content" id="content"><h1>My first page</h1></textarea>
<iframe src="vendor/VvvebJs/texteditor.php?id=content"></iframe>

[z-igniter]

Hey @givanz , thanks for all the hard work and @Asser90 for the solution above. I need pretty much the same thing and i would like to ask what would be the the best approach to import/export custom styles as I want to load and store css from the db? No joy with imports yet and for the export/saving i used : Vvveb.StyleManager.cssContainer.html() which kinda worked but not sure if there is better approach. Any suggesstions? Thanks!

[givanz]

Hi

Vvveb.StyleManager cssContainer internally uses the vvvebjs-styles inside the edited page <style id="vvvebjs-styles"></style> it loads all the css inside the tag on page load and every time a css property is changed on the page it changes it's contents, all css that is loaded and changed by the editor is saved here.

Currently there is no API for css export/import, when it will be added it will be just a wrapper around the cssContainer that will return/load json.

Until then you can safely use this method to load/save css.