Visualizzazione dei risultati da 1 a 4 su 4
  1. #1
    Utente di HTML.it
    Registrato dal
    Nov 2012
    Messaggi
    32

    Code editor piccola modifica

    Buongiorno a tutti. Ho trovato su Codepen un editor che farebbe al caso mio, ma c'è un piccolo particolare che non so sistemare. Il codice javascript è impostato per memorizzare l'ultima modifica effettuata dall'utente e mantenerla anche riaggiornando la pagina e/o riavviando il browser. Io vorrei, invece, che, dopo il riaggiornamento della pagina, nel box di sinistra riapparisse il codice originario impostato di default. Qualcuno, gentilmente, saprebbe dirmi come modificare il javascript per ottenere questo? Lo sviluppatore, nella sua guida, dice che l'opzione di memorizzazione è facoltativa, ma non spiega come eluderla. Ho fatto dei tentativi personali, ma senza successo, non essendo una programmatrce. Grazie mille per l'aiuto

    L'editor è questo:

    https://codepen.io/Dillion/pen/GRKLJBP

    e il codice javascript in questione è così compilato:

    codice:
    let display;
    let edit;
    
    // Check storage to get saved item else ''
    let editContainer = localStorage.getItem('edit-container');
    if(editContainer && editContainer.length > 0) {
      // Capture the target elements
      display = document.getElementById('display');
      edit = document.getElementById('edit');
      // Initialize elements with their children
    display.innerHTML = editContainer;
    edit.innerText = editContainer;
    } else {
      let initialContents = "<style> \n.intro { \ncolor: yellow; \ntext-decoration: underline; \ntext-align: center;\n} \n</style>\n\n<h3 class='intro'>Designed by Dillion Megida</h3>";
      
      localStorage.setItem('edit-container', initialContents);
      
      display = document.getElementById('display');
      edit = document.getElementById('edit');
      edit.innerText = initialContents;
      display.innerHTML = initialContents;
    }
    
    // When a new data is typed in the edit field, add to storage and update the display panel    
    window.addEventListener('keyup', () => {
      // Get the current text in edit container and display
      edit = document.getElementById('edit');
      editContainer = edit.innerText;
      display = document.getElementById('display');
      display.innerHTML = editContainer;
      
      // Update storage
      localStorage.setItem('edit-container', editContainer);
    });

  2. #2
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    4,529
    Ciao, prova in questo modo:
    codice:
    let display;
    let edit;
    
    let initialContents =  "<style> \n.intro { \ncolor: yellow; \ntext-decoration: underline; \ntext-align: center;\n} \n</style>\n\n<h3 class='intro'>Designed by Dillion Megida</h3>";
      
    display = document.getElementById('display');
    edit = document.getElementById('edit');
    
    edit.innerText = initialContents;
    display.innerHTML = initialContents;
    
    window.addEventListener('keyup', () => {
      edit = document.getElementById('edit');
      editContainer = edit.innerText;
      display = document.getElementById('display');
      display.innerHTML = editContainer;
    });
    Ho eliminato le parti che riguardano il localStorage.
    Prima di postare considera che tra i link utili puoi trovare il 75% delle risposte alle tue domande; il 20% tra i post del forum; il 15% sul web.
    Ti resta... humm spè

    Le cattive domande sono quelle che non meritano risposta, le buone domande sono quelle che non hanno risposta
    L'Itailano non e nu'opnioine. E' improntate uslaro correattemtne sul froum. Garize!

  3. #3
    Utente di HTML.it
    Registrato dal
    Nov 2012
    Messaggi
    32
    Grazie mille KillerWorm e Buone Feste

  4. #4
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    4,529
    Buone Feste anche a te
    Prima di postare considera che tra i link utili puoi trovare il 75% delle risposte alle tue domande; il 20% tra i post del forum; il 15% sul web.
    Ti resta... humm spè

    Le cattive domande sono quelle che non meritano risposta, le buone domande sono quelle che non hanno risposta
    L'Itailano non e nu'opnioine. E' improntate uslaro correattemtne sul froum. Garize!

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2020 vBulletin Solutions, Inc. All rights reserved.