Instructies voor implementatie van visueel editen van nieuwsbrieven

de Instructies om de visuele editor toe te passen in andere applicaties

Deze optie werkt op dit moment alleen bij een blueprint die voldoet aan de volgende voorwaarden.

Er is een class Campagnestap.
Er is een class Content
Er is een class Campagnestap-Content die Campagnestap en Content verbindt.
Deze drie classes hebben enkelvoudige primary keys
De applicatie gebruikt User Interface Version 3.5.

Als je blueprint hieraan voldoet, voer dan de volgende stappen uit. Het kan best dat het niet in 1x werkt. Vraag CrossmarX dan om hulp.

Stap 1: Aanpassingen in de blueprint

De class Campagnestap krijgt een extra veld Preview, datatype Memo. De waarde voor HTML is 'HTML editor always'. Het veld moet op dit moment echt 'Preview' heten, maar dat kunnen we op termijn variabel maken.

Bij HTML editor configuration moet de volgende waarde krijgen.

{
    "external_plugins": {
        "cx_visualEditor": "/plugins/visualEditor/plugin.min.js"
    },
    "content_css": "/nieuwsbrief/editStyle.css, /webresources/font_awesome/fontawesome-pro-5.9.0-web/css/all.css/",
    "readonly": true,
    "visual": false,
    "menubar": false,
    "toolbar": false,
    "width": "100%",
    "height": 1000,
    "valid_elements" : "*[*]",
    "plugins" : "visualeditor"
}

Het veld Preview kan in de layout op een aparte tab worden gezet.
Er moet een aparte layout worden gemaakt voor de class 'Content'. Deze layout moet geschikt zijn om in een modal geopend te worden (dus niet te breed). Als je deze layout de naam 'Modal' geeft hoef je niets in buttons aan te passen.
Bij de blueprint-properties moet op de tab 'Custom snippets' een eigen snippet worden ingevuld. Voeg hier een regel toe:

Stap 2: Macros

Maak een macro met de naam buttons (zonder parameters). Geef deze de volgende inhoud:

#if($preview)
    #set($editor = $session.getService('editor')) 
    #set($layoutName = 'Modal')
    ##set($layoutName = 'default')
    #set($campagnestapVeld = '96028') ## veld met link naar campagestap
    #set($contentVeld = '96029') ## veld met link naar content 
    <tr>
        <td style="background:white;">
            <div class="sc_newsletter-block-buttons">
                #if($blokitem)
                    #set($href = "$editor.getEditUrl($inhoud, $layoutName)")
                    <a class="cx_editservice sc_newsletter-block-button" href="$href" title="bewerk blok"><i class="far fa-edit"></i></a>
                    ## data-toggle="tooltip" data-placement="bottom" data-original-title="bewerk blok"
                
                    <span style="display:inline-block; float:left;">
                        <a href="#" class="sc_newsletter-block-button plusMenuButton" title="voeg nieuw blok toe" data-toggle="tooltip">
                            <i class="far fa-plus"></i>
                        </a>
                    </span>
                    
                    <span style="display:inline-block; float:left;">
                        <a href="#" class="sc_newsletter-block-button existingMenuButton" title="voeg bestaand blok toe" data-toggle="tooltip">
                            <i class="far fa-search"></i>
                        </a>
                    </span>
                
                    <div class="plusMenu">
                        #set($href = $editor.getInsertNewAboveUrl($blokitem, $campagnestap, $campagnestapVeld, $contentVeld, $layoutName))
                        <a class="cx_editservice" href="$href">Voeg nieuw blok boven toe</a><br>
                        ###set($href = $editor.getInsertExistingAboveUrl($blokitem, $campagnestap, $campagnestapVeld, $contentVeld))
                        ##<a class="cx_editservice" href="$href">Insert existing above</a><br>
                        #set($href = $editor.getInsertNewBelowUrl($blokitem, $campagnestap, $campagnestapVeld, $contentVeld, $layoutName))
                        <a class="cx_editservice" href="$href">Voeg nieuw blok onder toe</a><br>
                        ##set($href = $editor.getInsertExistingBelowUrl($blokitem, $campagnestap, $campagnestapVeld, $contentVeld))
                        ##<a class="cx_editservice" href="$href">Insert existing below</a>
                    </div>
                    
                    <div class="existingMenu">
                        #set($href = $editor.getInsertExistingAboveUrl($blokitem, $campagnestap, $campagnestapVeld, $contentVeld))
                        <a class="cx_editservice" href="$href">Voeg bestaand blok boven toe</a><br>
                        #set($href = $editor.getInsertExistingBelowUrl($blokitem, $campagnestap, $campagnestapVeld, $contentVeld))
                        <a class="cx_editservice" href="$href">Voeg bestaand blok onder toe</a>
                    </div>
                    
                     #set($href = $editor.getDeleteUrl($blokitem))
                    <a class="cx_editservice sc_newsletter-block-button" href="$href" title="verwijder blok"><i class="far fa-trash-alt"></i></a>
                    
                     #set($href = $editor.getMoveUpUrl($blokitem, $campagnestapVeld))
                     #if($href)
                        <a class="cx_editservice sc_newsletter-block-button" href="$href" title="verplaats blok omhoog"><i class="far fa-arrow-up"></i></a>
                    #end
                     #set($href = $editor.getMoveDownUrl($blokitem, $campagnestapVeld))
                     #if($href)
                        <a class="cx_editservice sc_newsletter-block-button" href="$href" title="verplaats blok omlaag"><i class="far fa-arrow-down"></i></a>
                    #end
                
                #else
                <tr>
                    <td style="padding: 30px 25px 30px 25px; background: white;">
                        #set($href = $editor.getInsertNewUrl($campagnestap, $campagnestapVeld, $contentVeld, $layoutName))
                        <a class="cx_editservice" href="$href" style="color:#000000;">
                            
                            <i class="toevoegenBlok far fa-plus" style="font-size:50px;"></i> <br><br>Contentblok toevoegen
                        </a>
                    </td>
                    <td style="padding: 30px 25px 30px 25px; background: white;">
                        #set($href = $editor.getInsertExistingUrl($campagnestap, $campagnestapVeld, $contentVeld))
                        <a class="cx_editservice" href="$href" style="color:#000000;">
                            <i class="bestaandeBlok far fa-search" style="font-size:50px;"></i> <br><br>Bestaande contentblok toevoegen 
                        </a>
                    </td>
                    
                </tr>                    
                    ## <div data-toggle="tooltip" title="voeg blok toe" style="display:inline-block;">
                    ##     <a href="#" class="cx_edits ervice sc_newsletter-block-button plusMenuButton">
                    ##         <i class="far fa-plus"></i>
                    ##     </a>
                    ## </div>
                
                    ## <div class="plusMenu">
                    ##     #set($href = $editor.getInsertNewUrl($campagnestap, $campagnestapVeld, $contentVeld, $layoutName))
                    ##     <a class="cx_editservice" href="$href">Insert new</a><br>
                    ##     #set($href = $editor.getInsertExistingUrl($campagnestap, $campagnestapVeld, $contentVeld))
                 ##       <a class="cx_editservice" href="$href">Insert existing</a><br>
                    ## </div>
                #end
            </div>
        </td>
    </tr>
#end

Pas de drie variabelen bovenin de file aan:

$LAYOUT_NAME: de naam van de layout voor de modal
$FOREIGN_KEY_FIELD_1: de identifier van het veld in campagnestap-content met link naar campagestap
$FOREIGN_KEY_FIELD_2: de identifier van het veld in campagnestap-content met link naar content

Stap 3: files

Voeg de file /snippets/widget.vm toe. Deze file heeft twee noodzakelijke uitbreidingen voor het script dat de modal opent. We gaan onderzoeken of we dit in het standaard wildget kunnen opnemen. Kopieer deze nu nog uit BISC 3.5.
Voeg de file nieuwsbrief/editStyle.css toe. Deze file verzorgt de styling van de knoppen. Kopieer deze uit BISC 3.5.
Voeg de file nieuwsbrief/voorbeeld.vm toe. Deze file moet zo heten, omdat we in java deze file aanroepen na elke wijziging. Dat willen we nog wel flexibeler maken.

Deze file wordt na elke aanpassing aangeroepen met in de context de huidige campagnestap als variable $record en $preview=true. Het resultaat wordt opgeslagen in het veld preview van de campagnestap. De inhoud van de file moet het uiteindelijke template parsen. Dus zoiets als:
```
#parse('/nieuwsbrief/nieuwsbrief.vm')
```
Voeg de file /plugins/visualEditor/plugin.min.js toe.

In elk blok van de niewsbrief moet iets worden opgenomen zoals:

<table class="em_main_table sc_newsletter-block">
    <tbody>
        <tr>
            <td>
                #buttons()
            </td>
        </tr>
    </tbody>
</table>

Let op 2 dingen:
- de class 'sc_newsletter-block' moet worden opgenomen
- #buttons() moet in een eigen rij worden opgenomen.

Overige opmerkingen

In BISC 3.5 hebben we ook nog een Refresh-knop opgenomen die kan worden gebruikt als de inhoud van de nieuwsbrief nog op de oude manier wordt aangepast. We moeten bekijken of deze nog nodig is/blijft.