Utvikler cookbook

6.1.1. Bootstrap side editor

Bakgrunn

Bootstrap sidemal har mange tilgjengelige sideegenskaper (Se oversikt), du har kanskje til og med egen utviklet sidemaler med enda flere egenskaper også. Dette kan fort bli uoversiktlig og rotete.

Bootstrap bundle kommer med en standard editor, denne kan kopieres og endres eller du kan lage din egen helt fra bunn.

Side editorer blir tilgjengelig som en knapp i smartedit toolbaren (Nettstedsinnstillinger) ved å sette side egenskapen "siteEditor" til en relativ url.
For Bootstrap bundle er denne satt til "/acf/global/common/sites/bootstrap/www/js/smartedit/properties.js", dette er en AMD modul som ved klikk på "Nettstedsinnstillinger" knappen vil bli lastet og funksjonen "edit" blir kallt med domene id og side id som parametere.

 

I denne artikkelen vil du lære:

Standard Bootstrap editor

 

 

 

Fremgangsmåte

  1. Koper js filen tilgjengelig på nettsiden via http://.../acf/global/common/sites/bootstrap/www/js/smartedit/properties.js til lokalt på et domene på serveren du jobber på.
    Eksempel under /var/www/example.com/www/scripts/myeditor.js
  2. Legg til (eller endre) siteEditor side egenskapen på en side "/scripts/myeditor.js"
    Tips: Legg denne som en arvbar verdi på rot siden.
  3. Oppdater siden og se at editoren fungerer
  4. Hack løs på editoren din.

Side editor modulen

Scriptet tilgjengelig via siteEditor side-egenskapen må være en AMD modul med en "edit" funksjon.

Minimums eksempel:

define([
], function () {
        'use strict';

        var myEditor = {};

        myEditor.edit = function(domainId, pageId) {
                console.log('DomainId:', domainId);
                console.log('PageId:', pageId);
        };

        return myEditor;
});

Som du ser så vil "edit" bli kallt med domene-id og side-id som parametere.

Side egenskap API

Eksempel script med hjelpe funksjoner for kall mot API:

define([
        'common/scripts/ep/0.1/acf',
], function (acf) {
        'use strict';

        var myEditor = {},
            helper = {};

        /**
         * Fetch saved properties for the page.
         * Inherited properties will be included.
         *
         * @param  {int} domainId The domain id for the domain the page is located on
         * @param  {int} pageId   The page id for the page to fetch properties for
         * @return {object}       The page properties
         */
        helper.fetchProperties = function(domainId, pageId) {
                return acf.ajax({
                        domain: 'lib.components',
                        component: 'contentTypes.Page',
                        data: {
                                pageMode: 'ui.getProperties',
                                domainId: domainId,
                                propertyPageId: pageId
                        }
                }).pipe(function(response) {
                        return response.properties;
                });
        };

        /**
         * Updates the page properties on a page
         * @param  {int} domainId   The domain id for the domain the page is located on
         * @param  {int} pageId     The page id to update properties on
         * @param  {object} properties The properties to update
         */
        helper.saveProperties = function(domainId, pageId, properties) {
                return acf.ajax({
                        options: {
                                type: 'POST'
                        },
                        domain: 'lib.components',
                        component: 'contentTypes.Page',
                        data: {
                                pageMode: 'ui.updateProperties',
                                domainId: domainId,
                                propertyPageId: pageId,
                                properties: properties
                        },
                });
        };


        myEditor.edit = function(domainId, pageId) {
                console.log('DomainId:', domainId);
                console.log('PageId:', pageId);
        };

        return myEditor;
});

Merk at helper.saveProperties() vil oppdatere side egenskaper på siden (ingen sletting vil skje), det er også tilgjengelig en annen pageMode "ui.setProperties", som vil tømme slette alle side egenskaper før lagring av de innsendte.

11.08.15

Hjelp / support

Jeg finner ikke det jeg leter etter

Vår dokumentasjon er stadig under utvikling. Vi endrer og legger til nye kapitler og bøker etter hvert som EasyPublish CMS endrer og vokser. Skulle du likevel ikke finne det du leter etter så ta kontakt med oss via support@escio.no.

Jeg har funnet en feil

Hvis du har funnet en feil i vår dokumentasjon så ønsker vi å rette på den. Send oss et hint til support@escio.no.

Translate

You can translate this documentation by using Google Translate. Select your language:

×