Anotações HTML (selecionando, destacando, remover formato)

https://stackoverflow.com/questions/1880987

18-09-2019
|

Pergunta

Estou trabalhando em um conjunto de ferramentas de anotação baseada na Web do navegador cruzado, que permite aos usuários selecionar qualquer parte de uma página da web

REALÇAR, se você selecionar:

John éu003Cli> grandeu003C/li>u003Cli> jogar forau003C/li>

Resultado

john is <li>big</li> <li>dump</li>

Remova o formato: se você selecionar:

john

a partir de

john is <li>big</li> <li>dump</li>

Resultado

 john is <li>big</li> <li>dump</li>

DESFAZER REFAZER: bom ter um recurso

Ser capaz de desfazer e refazer as ações executadas

Eu tenho uma solução parcial para destacar

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

}

Como meus requisitos tinham muita semelhança com um editor da RichText, procurei os códigos do CKEDITOR e (extensivamente) no editor do Google Closures. Eu perdi a esperança em ambos porque eles trabalham apenas em um iframe editável. Um dos meus requisitos é que os usuários não possam alterar o texto original, mas apenas para adicionar as próprias anotações (destaque, notas embutidas, etc.).

Eu adoraria aqui todas as suas opiniões e, se possível, me apontar para a direção certa.

--Choesang

Solução

Eu acho que você ainda pode usar a maneira "Rich-text-editor" (iframe), mas tente capturar "onkeypress", "onkeydown" e outros eventos interativos para interromper o comportamento padrão (editando o documento).

Outras dicas

Aqui está um bom recurso que me ajudou com algo semelhante: http://www.quirksmode.org/dom/execcommand.html

Ligado da primeira página como exemplo:

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

Você encontrará a solução no fórum: http://cksource.com/forums/viewtopic.php?f=11&t=15659

Por uma questão de clareza, estou inserindo o código abaixo:

// 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 em seu javascript, ligue como seguinte

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

O exposto acima fornece basicamente uma área (iframe) editável e na mesma hora de leitura apenas (você não pode inserir no teclado). Ele cumpre completamente todas as minhas funcionalidades desejadas. Não preciso me importar com como implementar: destacar, remover formato, desfazer e refazer. Tudo é usado com Ckeditor :)

Licenciado em: CC-BY-SA com atribuição

Não afiliado a StackOverflow