annotazioni HTML (selezione, mettendo in evidenza, rimuovere formato)

Question

Sto lavorando su un set di strumenti di annotazione basato cross browser web, che permette agli utenti di selezionare qualsiasi parte di una pagina web

• HIGHLIGHT , se si seleziona:

  

John è

big

il dump

Risultato

  

<span style="background-color: rgb(106, 168, 79)">john is</span> <li><span style="background-color: rgb(106, 168, 79)">big</span></li> <li><span style="background-color: rgb(106, 168, 79)">dump</span></li>

• Rimuovi formato : se si seleziona:

  

john

da

  

<span style="background-color: rgb(106, 168, 79)">john is</span> <li><span style="background-color: rgb(106, 168, 79)">big</span></li> <li><span style="background-color: rgb(106, 168, 79)">dump</span></li>

Risultato

  

<span style="background-color: rgb(106, 168, 79)"></span> john <span style="background-color: rgb(106, 168, 79)">is</span> <li><span style="background-color: rgb(106, 168, 79)">big</span></li> <li><span style="background-color: rgb(106, 168, 79)">dump</span></li>

• UNDO / REDO : bello avere funzione

Per essere in grado di annullare e ripetere le azioni eseguite

Ho una soluzione parziale per evidenziare

function highlight(colour) {
var range, sel;
if (document.selection && (!window.getSelection)) {
 // IE case
    range = document.selection.createRange();  
    range.execCommand("BackColor", false, colour);  
} else if (window.getSelection) {    
// Non-IE case 
    sel = window.getSelection();
    if (sel.getRangeAt) {
        range = sel.getRangeAt(0);
    }
//without designmode=on, you can't highlight the selected html (chrome)
    document.designMode = "on";
    if (range) {
        sel.removeAllRanges();
        sel.addRange(range);
    }
    // HiliteColor avoids FF3.5 from painting the background of the whole block
    if (!document.execCommand("HiliteColor", false, colour) ) {
        document.execCommand("BackColor", false, colour);
    }
    document.designMode = "off";
} 

}

Dal momento che le mie esigenze avuto molta somiglianza con un editor RTF, ho guardato in codici di CKEditor e (ampiamente) in editor di google chiusure. Ho rinunciato alla speranza in ciascuno di essi, perché, funzionano solo in un iframe modificabile. Un mio requisito è che gli utenti non sono autorizzati a modificare il testo originale, ma solo per aggiungere Non ci proprie annotazioni (luci, note in linea, ecc).

Mi piacerebbe qui tutte le vostre opinioni e, se possibile, a me indicare la giusta direzione.

- Choesang

Answer 1

Penso che si può ancora usare "rich-text-editor di" via (iframe), ma poi cercare di catturare "onkeypress", "onkeydown" e altri eventi interattivi per fermare il comportamento di default (la modifica del documento).

Answer 2

Ecco una buona risorsa che mi ha aiutato con qualcosa di simile: http: //www.quirksmode. org / dom / execCommand.html

collegato dalla prima pagina come un esempio:

http://www.quirksmode.org/dom/execCommand/

Answer 3

Troverete la soluzione nel forum: http: // cksource. com / forum / viewtopic.php? f = 11 & t = 15659

Per motivi di chiarezza, i inserisco il codice qui sotto:

// Temporary workaround for providing editor 'read-only' toggling functionality.  
   ( function()
  {
   var cancelEvent = function( evt )
  {
     evt.cancel();
  };

 CKEDITOR.editor.prototype.readOnly = function( isReadOnly )
 {
  // Turn off contentEditable.
  this.document.$.body.disabled = isReadOnly;
  CKEDITOR.env.ie ? this.document.$.body.contentEditable = !isReadOnly
  : this.document.$.designMode = isReadOnly ? "off" : "on";

  // Prevent key handling.
  this[ isReadOnly ? 'on' : 'removeListener' ]( 'key', cancelEvent, null, null, 0 );
  this[ isReadOnly ? 'on' : 'removeListener' ]( 'selectionChange', cancelEvent, null, null, 0 );

  // Disable all commands in wysiwyg mode.
  var command,
     commands = this._.commands,
     mode = this.mode;

  for ( var name in commands )
  {
     command = commands[ name ];
     isReadOnly ? command.disable() : command[ command.modes[ mode ] ? 'enable' : 'disable' ]();
     this[ isReadOnly ? 'on' : 'removeListener' ]( 'state', cancelEvent, null, null, 0 );
  }
 }
} )();

e nel tuo javascript, chiamare il più seguito

// Turn CKEditor into 'ready-only' mode or vice versa.
CKEDITOR.instances.editor1.readOnly( true );
CKEDITOR.instances.editor1.readOnly( false );

È possibile che questo fornisce essenzialmente una superficie (iframe), che è modificabile e nello stesso tempo di sola lettura (non è possibile l'input da tastiera). Soddisfa completamente tutti i miei funzionalità desiderate. Non devo preoccuparsi di come implementare: evidenziazione, rimuovere formato, annullare e ripetere. Tutto è preso curato di CKEditor:)