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

    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
    5,686
    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.
    Installa Forum HTML.it Toolset per una fruizione ottimale del Forum

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

  4. #4
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,686
    Buone Feste anche a te
    Installa Forum HTML.it Toolset per una fruizione ottimale del Forum

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 © 2024 vBulletin Solutions, Inc. All rights reserved.