Como editores de texto on-line trabalho?

Question

Eu estou tentando desenvolver um editor on-line (como o FCKEditor / etc), mas não tenho idéia de como eles funcionam. Eu sei que os WYSIWYG tem JavaScript e iframes, mas como eles realmente funcionam?

Estou especialmente curioso sobre ter uma visualização em tempo real do que está sendo digitado no editor.

Answer 1

RTE são geralmente (sempre?) Implementado usando um iframe. O objeto de documento que está disponível dentro desse iframe deve ter a propriedade designMode ativada . Após este ponto tudo o que você tem que fazer, a fim de implementar a funcionalidade básica, como negrito, itálico, cor, fundo, etc. são feitas usando o método execCommand do objeto do documento.

A principal razão para usar um iframe é que você não vai perder o foco da seleção ao clicar styling botões (Firefox permite definir esta propriedade apenas em iframe). Ainda mais, o atributo contentEditable não está disponível em versões do Firefox anterior a 3.

As coisas ficam um pouco mais complicado quando você quer fazer fantasia coisas com que a RTE. Nesse ponto, você deve usar Faixa objetos (que são implementados de forma diferente nos vários navegadores) .

Answer 2

FCKEditor é open source e o código-fonte está livremente disponível.

O código para o editor usado em Stackoverflow também está disponível

Pode valer a pena passar algum tempo lendo o código fonte. As pessoas aqui seria feliz para ajudar a explicar quaisquer pedaços de código que não estavam claras.

Answer 3

Eu acredito que a chave para editores WYSIWYG é a contenteditable atributo (que pode ser aplicado a qualquer tag HTML, mas provavelmente algo como um div neste caso). O resto da funcionalidade é geralmente fornecida pelo Javascript acesso ao DOM e manipular a HTML. Com relação ao recurso de visualização, esta é provavelmente apenas uma questão de ligar o evento que é gerado quando o elemento é editado pelo usuário e, em seguida, buscar o seu HTML e exibi-lo em outro lugar na página usando algum Javascript relativamente simples.

Answer 4

(ex: ah, há uma fronteira-menos entrada de texto, que sincronia com a parte realmente mostrando Então, para colocar a letra em vermelho eles simplesmente mudar o estilo.) E etc ..

que é como ele é feito.

Answer 5

Update: Se você só precisa de um editor, eu sugiro que você usar qualquer uma das outras pessoas sugestões aqui têm dado. Mas se você tem algum propósito acadêmico para a construção deste, o seguinte será um trampolim.

---

Isso é feito com bastante facilidade (algumas partes). Por exemplo, você poderia usar jQuery para se levantar e correr rápido.

div.theScreen {
  width:320px;
  height:75px;
  border:1px solid #CCCCCC;
  background-color:#f1f1f1;
}

<div class="theScreen"></div>
<div><textarea class="typePad"></textarea></div>

Agora que temos marcação e estilos no lugar, podemos adicionar algumas simples Javascript para acionar previews em tempo real.

$(document).ready(function(){
  $(".typePad").keyup(function(){
    $(".theScreen").html($(".typePad").val());
  });
});

Este é um exemplo muito bruto e simples, mas irá ajudar a começar.

Answer 6

Eu comecei um projeto open source "sourceforge" para fazer um editor de texto rico cerca de um ano e meio atrás. Eu nunca descobri como obter o meu código lá, no entanto a desenvolvê-lo eu tive que pesquisar como o "modo editável conteúdo" funciona no IE e Firefox. Minha pesquisa incluiu principalmente o site do firefox e no site da Microsoft.

O código que eu vi fazer isso era feio e não muito OO amigável (desculpe, eu sou um objeto fanático eu não posso ajudá-lo) para que ele teve um monte de re-factoring para entrar para uma forma que eu pode desenvolver a partir de e estender.

Infelizmente, mesmo se você seguir a funcionalidade fornecida pelo "modo editável conteúdo" do navegador você ainda vai acabar com um editor que está cheio de bugs. A razão para isso é que "modo editável conteúdo" não funciona de forma consistente com colar de MS Word (todos tenta este) ou criar listas numeradas, e a marca-se que ele gera será inconsistente e mal formado.

É por isso que eu uso agora TinyMCE . TinyMCE é cheia de decisões de design que eu, pessoalmente, teria evitado, mas eles fixaram a maioria dos bugs que você vai chegar ao tentar fazer o seu próprio editor. Também é cheio de características que lhe permitem personalizar a suas necessidades.

Eu não posso recomendar qualquer outra coisa, porque eu realmente não tenho tentado as alternativas.

Enquanto TinyMCE parece ser a melhor opção, ainda é uma dor de cabeça para mim porque colando documentos do Word ainda é imprevisível, a promessa WYSIWYG não é realmente possível em HTML, mas o cliente espera, e há muitas questões que rastejar acima uma vez que você começar a deixar os usuários colocar HTML puro no seu banco de dados. (Especialmente quando sua base de código tem partes última actualização em 1993 ...)