Approccio per sviluppare un editor in linea per elenchi enumerati

Naviga le tue risposte
0

Sfondo

Cerchiamo di sviluppare un editor WYSIWYG per gli elenchi ordinati in modo che le persone possano modificare direttamente elenchi di istruzioni su una pagina Web.

Problema

L'attributo contentEditable è tristemente immaturo per la modifica di elenchi ordinati (ad esempio, <ol contentEditable="true">...</ol> ). Ho scoperto quattro bug in Firefox 25.0.1 in pochi secondi di modifica; Il cromo era accettabile; IE8 + confinerà probabilmente con gli incubi.

Esiste un certo numero di editor in linea , e ho esaminato quasi tutti. Anche gli editor più leggeri sono troppo pesanti o hanno troppi bug per realizzare un compito apparentemente semplice.

Domanda

Quale approccio daresti allo sviluppo di un editor in linea WYSIWYG basato su browser per elenchi numerati? Alcune delle mie idee hanno incluso:

  • Utilizza l'editor inline più robusto e ritaglia tutte le funzionalità inutili.
  • Crea un editor in linea che soddisfi le mie esigenze.

Entrambi gli approcci richiederanno molto tempo.

Quali altri approcci meritano di essere considerati?

    
posta Dave Jarvis 29.11.2013 - 01:48
fonte

3 risposte

0

La libreria principale per CodeMirror utilizza un <textarea> con JavaScript e CSS per fornire funzionalità di modifica di testo avanzato. Lo svantaggio è che il codice è 135kb, minimizzato.

Tuttavia, l'approccio cross-browser più funzionale è probabile che utilizzi un <textarea> e cambi lo stile come richiesto: 

textarea {
  font-family: Verdana, Tahoma, "DejaVu Sans", Arial, Helvetica, sans-serif;
}
    
risposta data 04.11.2014 - 00:43
fonte
0

Questo è l'esempio di editor di elenchi di esempi in linea più snello che potrei produrre. L'elemento della lista ha un intervallo con il valore. Il motivo dello span è che il valore deve essere nascosto mentre l'input viene utilizzato per la modifica. Spero che questo ti aiuti. Mike. 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>InlineListEditor</title>
<style>
  .editing {
    display: none;
  }
</style>
</head>
<body>
  <ul class="editable-list">
    <li class="item"><span class="value">one</span></li>   
    <li class="item"><span class="value">two</span></li>
  </ul>
<script>
  console.log('loading');
  function editView (value,callBack) {
    var div = document.createElement('div'),
        input = document.createElement('input'),
        value = value;

    input.addEventListener('keydown', function (event) {
      if (event.keyCode === 13) {
        value = this.value;
        this.parentElement.removeChild(this);
        callBack.call(null,[value]);
      }
    });
    input.setAttribute('type',"text");
    input.value = value;
    div.appendChild(input);
    return div;

  }
  function dblClick (event) {
    var element = event.srcElement.parentElement,
        value,
        edit;
    if (element.tagName === "LI") {
      value = element.getElementsByClassName('value')[0];
      value.classList.toggle('editing');
      edit = editView(value.innerHTML,function (text) {
        value.innerHTML = text;
        value.classList.toggle('editing');
      });

      element.appendChild(edit);
    }
    console.dir(event.srcElement);
  }

  var el = document.getElementsByClassName('editable-list')[0];
  el.addEventListener('dblclick',dblClick,false);

 </script>
 </body>
 </html>
    
risposta data 29.11.2013 - 03:28
fonte
0

Se hai solo bisogno di semplici modifiche, ti consiglio di implementare la tua utilizzando un framework MVC lato client. controlla link per alcuni semplici esempi di elenchi modificabili. Puoi quindi estendere il tuo preferito per aggiungere funzionalità avanzate e utilizzare uno di questi plugin, se necessario.

Puoi ottenere il codice per la modifica di un elenco di base e configurarlo per un'app Web scalabile e scattante.

    
risposta data 01.12.2013 - 09:49
fonte

Leggi altre domande sui tag

PHP SplFixedArray Come gestire miliardi di indici? Teoria OOP di base: incomprensione del database circostante e delle classi utente