{"elements":[{"id":7011,"title":"Editor WYSIWYG","body":"
\n
\n

Editor WYSIWYG Integrato<\/h2>\n

Creare pagine web senza dover scrivere codice HTML è uno degli obiettivi del CMS di DressAPI. L’editor WYSIWYG integrato offre un ambiente visuale completo per la composizione dei contenuti, con supporto per formattazione avanzata, inserimento di componenti e anteprima in tempo reale.<\/p>\n

\"Editor<\/div>\n\n

Tre modalità di editing<\/h3>\n
\n \n \n \n
Modalità<\/th>Descrizione<\/th><\/tr>\n <\/thead>\n
Work<\/strong><\/td>Editing visuale WYSIWYG con toolbar di formattazione<\/td><\/tr>\n
Preview<\/strong><\/td>Anteprima con rendering server-side dei componenti<\/td><\/tr>\n
Source<\/strong><\/td>Editing HTML diretto del codice sorgente<\/td><\/tr>\n <\/tbody>\n <\/table>\n <\/div>\n\n

Toolbar di formattazione<\/h3>\n
    \n
  • Grassetto, corsivo, sottolineato, barrato<\/li>\n
  • Titoli (H1-H6)<\/li>\n
  • Liste ordinate e non ordinate<\/li>\n
  • Link e immagini<\/li>\n
  • Tabelle<\/li>\n
  • Allineamento testo<\/li>\n
  • Colori testo e sfondo<\/li>\n <\/ul>\n\n

    Componenti drag-and-drop<\/h3>\n

    La sidebar dell'editor mostra i componenti disponibili. Si inseriscono nel contenuto tramite drag-and-drop e si configurano con un modal generato dinamicamente.<\/p>\n

    I parametri dei componenti vengono serializzati come JSON all'interno del tag <component><\/code>.<\/p>\n\n

    Gestione media<\/h3>\n
      \n
    • Gallery integrata per la selezione di immagini esistenti<\/li>\n
    • Upload diretto dall'editor<\/li>\n
    • API dedicata per la gestione dei file<\/li>\n <\/ul>\n\n

      Architettura<\/h3>\n
      \n \n \n \n
      File<\/th>Ruolo<\/th><\/tr>\n <\/thead>\n
      dressapi_editor_scoped.js<\/code><\/td>Classe principale WebEditor (~206 KB)<\/td><\/tr>\n
      dressapi_editor_config.js<\/code><\/td>Configurazione e traduzioni 5 lingue<\/td><\/tr>\n
      dressapi_editor_scoped.css<\/code><\/td>Stili scoped (prefisso .dae-*<\/code>)<\/td><\/tr>\n <\/tbody>\n <\/table>\n <\/div>\n\n

      Passi per l'integrazione<\/h3>\n

      Per includere l'editor nella tua pagina, aggiungi i file CSS e JavaScript nell'ordine corretto:<\/p>\n

      \n
      HTML - Inclusione CSS e JS<\/div>\n<!-- CSS dell'editor -->\n<link rel="stylesheet" href="\/assets-core\/editor\/dressapi_editor_scoped.min.css">\n\n<!-- JavaScript (l'ordine è importante) -->\n<script src="\/assets-core\/editor\/dressapi_editor_config.js"><\/script>\n<script src="\/assets-core\/editor\/dressapi_editor_scoped.min.js"><\/script>\n <\/div>\n

      Il file dressapi_editor_config.js<\/code> deve essere caricato prima<\/strong> del file principale dell'editor, perché contiene le traduzioni e la funzione di configurazione.<\/p>\n\n

      Opzioni di configurazione<\/h3>\n

      L'editor viene inizializzato tramite la funzione getDressApiEditorConfig()<\/code> con le seguenti opzioni:<\/p>\n

      \n \n \n \n
      Opzione<\/th>Tipo<\/th>Default<\/th>Descrizione<\/th><\/tr>\n <\/thead>\n
      selector<\/code><\/td>string<\/td>'#content'<\/code><\/td>Selettore CSS della textarea da trasformare<\/td><\/tr>\n
      language<\/code><\/td>string<\/td>'en'<\/code><\/td>Lingua dell'interfaccia (en, it, de, fr, es)<\/td><\/tr>\n
      security_level<\/code><\/td>string<\/td>'balanced'<\/code><\/td>Livello di sicurezza: strict, balanced, permissive<\/td><\/tr>\n
      components_endpoint<\/code><\/td>string<\/td>'\/api-core\/components\/'<\/code><\/td>Endpoint API per i componenti<\/td><\/tr>\n
      rest_endpoint<\/code><\/td>string<\/td>'\/api-core\/gallery\/'<\/code><\/td>Endpoint API per la gallery<\/td><\/tr>\n
      custom_components<\/code><\/td>array<\/td>[]<\/code><\/td>Componenti personalizzati aggiuntivi<\/td><\/tr>\n <\/tbody>\n <\/table>\n <\/div>\n
      \n
      JavaScript - Inizializzazione editor<\/div>\ndocument.addEventListener('DOMContentLoaded', function() {\n const config = getDressApiEditorConfig({\n selector: '#content',\n language: 'it',\n security_level: 'balanced',\n components_endpoint: '\/components\/',\n rest_endpoint: '\/api-core\/gallery\/'\n });\n\n const editor = new DressApiEditor(config);\n});\n <\/div>\n\n

      Livelli di sicurezza nel dettaglio<\/h3>\n
      \n \n \n \n
      Livello<\/th>Descrizione<\/th>Cosa permette<\/th><\/tr>\n <\/thead>\n
      strict<\/strong><\/td>Solo formattazione di base<\/td>Grassetto, corsivo, titoli, liste, link. Nessun HTML personalizzato, nessun componente custom.<\/td><\/tr>\n
      balanced<\/strong><\/td>Default, la maggior parte delle funzionalità<\/td>Tutti i componenti approvati, tabelle, immagini, video incorporati. HTML limitato senza script.<\/td><\/tr>\n
      permissive<\/strong><\/td>Tutto l'HTML permesso<\/td>Qualsiasi HTML inclusi iframe, embed e HTML personalizzato. Solo per amministratori fidati.<\/td><\/tr>\n <\/tbody>\n <\/table>\n <\/div>\n\n

      Traduzioni disponibili<\/h3>\n

      L'interfaccia dell'editor è tradotta in 5 lingue. La lingua si imposta con l'opzione language<\/code>:<\/p>\n

      \n \n \n \n
      Codice<\/th>Lingua<\/th><\/tr>\n <\/thead>\n
      en<\/code><\/td>English<\/td><\/tr>\n
      it<\/code><\/td>Italiano<\/td><\/tr>\n
      de<\/code><\/td>Deutsch<\/td><\/tr>\n
      fr<\/code><\/td>Français<\/td><\/tr>\n
      es<\/code><\/td>Español<\/td><\/tr>\n <\/tbody>\n <\/table>\n <\/div>\n\n

      Caricamento componenti da API<\/h3>\n

      L'editor carica i componenti disponibili dall'endpoint API configurato. Per il CMS l'endpoint è \/components\/<\/code>, per le applicazioni client-side è \/api-core\/components\/<\/code>.<\/p>\n

      La richiesta viene effettuata con il parametro action=list<\/code> e il parametro view<\/code> che indica il tema attivo (es. bi5<\/code>, b5<\/code>):<\/p>\n

      \n
      URL - Richiesta componenti<\/div>\nGET \/components\/?action=list&view=bi5\n <\/div>\n

      L'API restituisce la lista dei componenti con i loro template, parametri e valori di esempio. L'editor li mostra nella sidebar come blocchi trascinabili.<\/p>\n\n

      Direttive dei componenti nell'editor<\/h3>\n

      I template dei componenti utilizzano direttive speciali per il rendering dinamico:<\/p>\n

      \n \n \n \n
      Direttiva<\/th>Descrizione<\/th><\/tr>\n <\/thead>\n
      [single]...[\/single]<\/code><\/td>Contenuto per un singolo elemento<\/td><\/tr>\n
      [multiple]...[\/multiple]<\/code><\/td>Contenuto per una lista di elementi<\/td><\/tr>\n
      [empty]...[\/empty]<\/code><\/td>Contenuto visualizzato se la lista è vuota<\/td><\/tr>\n
      [if-exists(param)]...[\/if-exists]<\/code><\/td>Mostra il blocco solo se il parametro esiste<\/td><\/tr>\n
      [if-not-exists(param)]...[\/if-not-exists]<\/code><\/td>Mostra il blocco solo se il parametro non esiste<\/td><\/tr>\n
      [repeat(param)]...[\/repeat]<\/code><\/td>Ripete il blocco per ogni elemento dell'array<\/td><\/tr>\n
      {{parametro}}<\/code><\/td>Inserisce il valore del parametro<\/td><\/tr>\n <\/tbody>\n <\/table>\n <\/div>\n
      \n
      HTML - Esempio template componente<\/div>\n<!--\nCard Componente\n\n@example {"title":"Titolo","text":"Descrizione"}\n\n@param string title - Titolo della card\n@param string text - Testo descrittivo\n@param string image - URL immagine (optional)\n-->\n[single]\n <div class="card">\n [if-exists(image)]<img src="{{image}}" class="card-img-top">[\/if-exists]\n <div class="card-body">\n <h5>{{title}}<\/h5>\n <p>{{text}}<\/p>\n <\/div>\n <\/div>\n[\/single]\n <\/div>\n\n

      Metodi API JavaScript<\/h3>\n

      L'istanza dell'editor espone i seguenti metodi:<\/p>\n

      \n \n \n \n
      Metodo<\/th>Descrizione<\/th><\/tr>\n <\/thead>\n
      GetContent()<\/code><\/td>Restituisce il contenuto HTML dell'editor<\/td><\/tr>\n
      SetContent(html)<\/code><\/td>Imposta il contenuto HTML dell'editor<\/td><\/tr>\n
      Clear()<\/code><\/td>Svuota il contenuto dell'editor<\/td><\/tr>\n
      Destroy()<\/code><\/td>Rimuove l'istanza dell'editor e ripristina la textarea<\/td><\/tr>\n
      RefreshComponents()<\/code><\/td>Ricarica e renderizza tutti i componenti<\/td><\/tr>\n <\/tbody>\n <\/table>\n <\/div>\n
      \n
      JavaScript - Utilizzo metodi API<\/div>\nconst editor = new DressApiEditor(config);\n\n\/\/ Ottenere il contenuto HTML\nconst html = editor.GetContent();\n\n\/\/ Impostare nuovo contenuto\neditor.SetContent('<div>Nuovo contenuto<\/div>');\n\n\/\/ Svuotare l'editor\neditor.Clear();\n\n\/\/ Aggiornare i componenti dall'API\neditor.RefreshComponents();\n\n\/\/ Distruggere l'editor\neditor.Destroy();\n <\/div>\n\n

      Gestori di eventi<\/h3>\n

      L'editor emette eventi che puoi intercettare per reagire alle azioni dell'utente:<\/p>\n

      \n
      JavaScript - Gestori di eventi<\/div>\n\/\/ Contenuto modificato\neditor.on('change', function(content) {\n console.log('Contenuto modificato:', content);\n});\n\n\/\/ Componente aggiunto\neditor.on('component:added', function(component) {\n console.log('Componente aggiunto:', component);\n});\n\n\/\/ Componente rimosso\neditor.on('component:removed', function(component) {\n console.log('Componente rimosso:', component);\n});\n\n\/\/ Salvataggio\neditor.on('save', function(content) {\n fetch('\/api\/save', {\n method: 'POST',\n headers: { 'Content-Type': 'application\/json' },\n body: JSON.stringify({ content: content })\n });\n});\n <\/div>\n\n

      Risoluzione problemi<\/h3>\n
      \n \n \n \n
      Problema<\/th>Soluzione<\/th><\/tr>\n <\/thead>\n
      I componenti non vengono renderizzati<\/td>Verifica che l'endpoint API risponda correttamente: \/components\/?action=list&view=bi5<\/code>. Controlla i permessi della directory components e che i template abbiano il formato corretto.<\/td><\/tr>\n
      La toolbar non appare<\/td>Verifica che i file CSS e JS siano caricati nell'ordine corretto: prima dressapi_editor_config.js<\/code>, poi dressapi_editor_scoped.min.js<\/code>. Controlla la console del browser per errori.<\/td><\/tr>\n
      Stili non applicati correttamente<\/td>Usa la versione scoped (dressapi_editor_scoped.*<\/code>) per evitare conflitti con Bootstrap o altri framework CSS.<\/td><\/tr>\n
      La gallery non funziona<\/td>Verifica che l'API \/api-core\/gallery\/<\/code> risponda e che l'utente sia autenticato. Controlla i permessi della directory public-files\/<\/code>.<\/td><\/tr>\n
      L'editor non si carica<\/td>Controlla la console del browser per errori JavaScript. Verifica che la textarea con il selettore configurato esista nel DOM al momento dell'inizializzazione.<\/td><\/tr>\n
      Componenti personalizzati non visibili<\/td>Verifica che il file template sia nella directory corretta: cms\/plugins\/{modulo}\/views\/{tema}\/components\/{nome}\/{nome}.html<\/code>.<\/td><\/tr>\n <\/tbody>\n <\/table>\n <\/div>\n <\/div>\n<\/section>\n\n
      \n ← Torna ai Tutorial<\/a>\n<\/section>","description":"Editor visuale con drag-and-drop dei componenti","meta_keywords":"","visible":"yes","status":"public","creation_date":"0000-00-00","id__user":1,"priority":0,"groupname":"TUTORIAL"}],"module":"pages","permissions":{"can_read":true},"main_item_title":"title","related_tables":[{"name":"Newsonpage","module":"newsonpage","FK":"id_cmspage","permissions":[]}],"page_info":{"table":"","key":"id","url":"\/pages","url_list":"\/pages","filters":{"id":["=","7011"]},"pagination":{"total_items":23,"page":1,"total_pages":2,"step":1,"items_per_page":20,"url_prev":"\/pages","url_next":"\/pages\/p\/2","url_tmpl":"\/pages\/p\/[[p]]","url_tmpl_with_order":"\/pages\/p\/[[p]]\/ob\/[[ob]]"},"order":{"field":"id","type":"DESC","url_tmpl":"\/pages\/p\/[[p]]"},"module":{"title":"Pages","description":"List of pages","name":"pages"},"current":{"title":"Pages","description":"List of pages","name":"pages","url":"\/tutorials\/editor"}},"components":{"alert":{"alert1":[{"type":"warning","message":"OK COMPONENT!"},{"type":"danger","message":"ERROR COMPONENT!"}]}},"messages":[]}