Certamente, você já se deparou com muitas vezes editores visuais, permitindo que você forme de forma bastante conveniente a aparência de páginas ou algumas mensagens, por exemplo, em um fórum. E não com Códigos BB, mas obtendo imediatamente um resultado específico. Existem muitos desses editores na Internet. Um dos mais populares é TinyMCE no entanto, sou um defensor dos meus próprios scripts e acredito que deve haver uma solução para cada tarefa em vez de universal. Portanto, neste artigo, direi a você, como criar editor visual em JavaScript.
De cara, apresento um código bem comentado:
À primeira vista, o código parece muito complexo. E assim é, mas se o considerarmos em termos de elementos básicos, então não há nada de complicado. Há forma usual e o campo escondido onde o editor resultante é salvo Código HTML... O próprio editor é um quadro comum, ou seja, um quadro comum Página HTML, em que podemos escrever um texto ( designMode = "ligado") E várias formatações são criadas usando o método execCommand () que executa o comando especificado no parâmetro. E acho que não será difícil para você criar novos botões e anexar manipuladores semelhantes a eles.
Não há nada supérfluo neste script, apenas o mais importante e básico, e pode ser tomado como base para criando seu próprio editor visual em JavaScript, em que não haverá nada supérfluo, mas apenas o que você precisa.