anotaciones HTML (selección, destacando, retire formato)

Question

Estoy trabajando en un conjunto de herramientas de anotación basado en cruz navegador web, que permite a los usuarios seleccionar cualquier parte de una página web

• resaltar , si selecciona:

  

John es

grande

volcar

Resultado

  

<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>

• Eliminar formato : si selecciona:

  

john

de

  

<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>

Resultado

  

<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>

• Deshacer / Rehacer : bueno tener función

Para poder deshacer y rehacer las acciones realizadas

Tengo una solución parcial para poner de relieve

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";
} 

}

Desde mis requisitos tenían mucha similitud con un editor de texto enriquecido, he mirado en los códigos de CKEditor y (ampliamente) en el editor de Google cierres. He perdido la esperanza en ambos porque, funcionan sólo en un iframe editable. Uno de mis requisito es que los usuarios no se les permite cambiar el texto original, pero sólo para añadir allí propias anotaciones (iluminaciones, notas en línea, etc.).

Me encantaría aquí todas sus opiniones y si es posible que me señale la dirección correcta.

- Choesang

Answer 1

Creo que todavía se puede utilizar "rico editor de texto" camino (iframe), pero luego tratar de atrapar "onkeypress", "onkeydown" y otros eventos interactivos para detener el comportamiento por defecto (la edición del documento).

Answer 2

Aquí hay un buen recurso que me ayudó con algo similar: http: //www.quirksmode. org / DOM / execCommand.html

enlazada desde la primera página como un ejemplo:

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

Answer 3

Usted encontrará la solución en el foro: http: // cksource. com / foros / viewtopic.php? f = 11 & t = 15659

En aras de la claridad, Estoy insertando el código abajo:

// 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 );
  }
 }
} )();

y en su Javascript, llame a la siguiente

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

Lo anterior, básicamente, proporciona un área (iframe) que se puede editar y al mismo tiempo de sólo lectura (No puede introducir desde el teclado). Se cumple por completo todos mis funcionalidades deseadas. Yo no tengo que preocuparse por la forma de aplicar: resaltado, retire formato, deshacer y rehacer. Todo está tomado cuidado de CKEditor:)