Edição de rich text com Infragistics editor de HTML no jQuery e no ASP.NET MVC

Edição de rich text com Infragistics editor de HTML no jQuery e no ASP.NET MVC

Junto com todos os recursos interessantes introduzidos para o NetAdvantage para a versão jQuery 11.2 (leia-se: nova grade hierárquica, árvore, controles de combinação) e CTP Charting com Motion Framework - não é tão surpreendente que alguns controles não tenham recebido toda a sua parcela de destaque.

9min read

Junto com todos os recursos interessantes introduzidos para o NetAdvantage para a versão jQuery 11.2 (leia-se: nova grade hierárquica, árvore, controles de combinação) e CTP Charting com Motion Framework - não é tão surpreendente que alguns controles não tenham recebido toda a sua parcela de destaque.

Estou falando sobre o controle do Editor HTML baseado em jQuery e que implementa WYSIWYG. WYSIWYG significa 'o que você vê é o que você obtém' (leia sobre isso na Wikipedia), que é exatamente o que em sua essência esse controle deve fornecer. Transformando os colchetes angulares de abertura e fechamento ( "<" e ">") em HTML equivalente – "<"/">". Esse é apenas um exemplo, mas é o que o editor do meu blog também faz, para que possam ser apresentados adequadamente pelo navegador e não apenas - alguns servidores bloqueiam esse conteúdo como ameaça potencial. Mesmo que você não tenha notado, esse tipo de funcionalidade é oferecido praticamente em qualquer lugar em que o conteúdo gerado pelo usuário seja suportado - como este blog, os comentários, fóruns, etc.

E agora você pode fornecer aos seus usuários esse tipo de funcionalidade usando o widget igHtmlEditor e muito mais!

Aqui deve ser mencionado que o Editor HTML é CTP (Community Technology Preview), o que significa que ainda está no estágio beta de seu desenvolvimento. Por esse motivo, até seu lançamento oficial, nada é definitivo, mas, novamente, também não há razão para não experimentá-lo e conhecer o controle com antecedência. Também é aconselhável se você usar a versão mais recente do serviço.

Começando

O widget é construído sobre a interface do usuário do jQuery, portanto, como acontece com outros controles do NetAdvantage para jQuery, você precisará primeiro do jQuery e, em seguida, da interface do usuário do jQuery adicionada à sua página. O script para o igHtmlEditor, no entanto, não está incluído no arquivo "ig.ui.min.js" padrão, mas sim em seu próprio "ig.ui.htmleditor.min.js". Este último é, na verdade, o único arquivo de script necessário para incluir após os do jQuery.

Os estilos padrão, com os quais você já deve estar familiarizado, também são necessários. Mais uma vez, vou encorajá-lo a verificar nosso Guia de Implantação, onde você pode ler exatamente como encontrar e gerenciar os recursos necessários.

É claro que fornecerei um código combinado que você pode usar como referência (supondo que você tenha as pastas 'Scripts' e 'themes' por padrão) e adicionar o igHtmlEditor à página é o mais trivial possível - um elemento HTML DIV como contêiner e uma linha de script para criar uma nova instância do widget em JavaScript e é tão fácil de ASP.NET MVC. Trechos de código combinados para ambos:

<!-- ## Javascript/HTML ## -->
    <!-- CSS -->
    <link href="../../themes/min/ig/jquery.ui.custom.min.css" rel="stylesheet" type="text/css" />
    <link href="../../themes/base/ig.ui.min.css")" rel="stylesheet" type="text/css" />
    <!-- Scripts -->
    <script src="../Scripts/jquery.min.js"></script>
    <script src="../Scripts/jquery-ui.min.js"></script>
    <script src="../Scripts/ig.ui.htmleditor.min.js"></script>
    <!-- in the body of the document: -->
    <div id="HtmlEditor1"></div>
    <!-- initialize the editor on document ready: -->
    <script type="text/javascript">
        $(document).ready(function () {
            $("#HtmlEditor1").igHtmlEditor();
        });
    </script>
 
<!--## ASP.NET MVC  ##-->
    <!-- CSS -->
    <link href="@Url.Content("~/Content/themes/min/ig/jquery.ui.custom.min.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/themes/base/ig.ui.min.css")" rel="stylesheet" type="text/css" />
    <!-- Scripts -->
    <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery-ui-1.8.11.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/ig.ui.htmleditor.min.js")" type="text/javascript"></script>
    <!-- in your View: -->
    @using Infragistics.Web.Mvc
    @( Html.Infragistics().HtmlEditor().Render()
    )

Recursos, recursos, recursos!

Mesmo que não esteja concluído, o widget jQuery Html Editor possui uma impressionante variedade de recursos. Em sua implementação atual, quase todos eles são fornecidos sem a necessidade de personalização adicional, portanto, do ponto de vista do desenvolvedor, não há muitas coisas que você precise definir e os usuários sempre recebem um punhado. Quase tudo o que o usuário tem acesso está localizado em uma área da barra de ferramentas na parte superior e as opções são agrupadas ordenadamente em conjuntos relevantes.

A melhor parte é que entre elas podem ser encontradas ferramentas para formatação de rich text que quase qualquer usuário reconheceria imediatamente e se sentiria confortável em usar. Uma experiência de edição abrangente reconhecida apenas após uma demonstração visual:

Formatação de rich text no editor de HTML do jQuery

Tudo na captura de tela (bem, exceto a largura do controle que alterei para caber nesta página) é como o widget o cria por padrão - fontes e tamanhos, negrito e itálico, sublinhado e tachado, opções de alinhamento de texto, listas e marcadores, controle de recuo, etc. Além das ferramentas na parte superior, o controle também exibe convenientemente o caminho completo do DOM atual e o usuário pode clicar em cada elemento da árvore DOM para ter seu conteúdo destacado na área de edição. Isso é muito legal quando o usuário precisa estar ciente de como sua entrada está sendo tratada nos bastidores, mas se isso não for suficiente, bem, o widget fornece funcionalidade para alternar entre o 'design' padrão e a visualização de origem com o clique de um botão:

Visualização do código-fonte HTML do editor HTML do jQuery

Essa é a fonte das fontes demonstradas na captura de tela anterior e você também pode vê-las sendo aplicadas como estilos aos contêineres.

Além disso, também havia texto copiado, que estava lá para mostrar que o Editor vem com suporte à área de transferência para todas as operações comuns - recortar, copiar e colar. E não são apenas estilos de texto diferentes sendo preservados dentro da área de edição – você pode colar rich text e sua formatação permanecerá do jeito que você viu originalmente. Você pode muito bem copiar de uma página da web e colar no editor, mas isso não parece tão impressionante, considerando que é tudo baseado em HTML. O que você realmente pode fazer é copiar do MS Word , sim, você pode e fica assim:

Suporte à área de transferência do editor de html jQuery

Além disso, o usuário tem uma maneira fácil de inserir conteúdo, além de colá-lo. A barra de ferramentas oferece caixas de diálogo para inserir imagens e links:

jQuery Html Editor para adicionar nova imagem ou link.

Há mais uma caixa de diálogo disponível, e ela permite que o usuário adicione o elemento da tabela HTML com pouco ou nenhum esforço e defina o número de colunas e linhas de forma natural, arrastando o ponteiro para o tamanho desejado:

jQuery Html Editor para adicionar uma tabela.

Na barra de ferramentas também podem ser encontrados botões para remover ou adicionar novas linhas e colunas com um clique.

Personalização

Quando mencionado, não há muito que você precise definir na visão dos desenvolvedores, isso não significa que o widget não possa ser personalizado para atender às suas necessidades. Ao configurar o controle, você tem permissão para definir os itens da barra de ferramentas a serem apresentados aos usuários. O padrão é, obviamente, "all", mas a propriedade activeToolbars permite que um conjunto personalizado de barras de ferramentas seja definido. A propriedade aceita uma única string contendo os nomes das barras de ferramentas a serem usadas e aqui está uma lista dos padrões:

  • fontProperties
  • textFormat
  • textAlign
  • textIndent
  • mesa
  • source

Mas certamente você não está enganado, é aqui que a personalização pára – existe, é claro, uma opção para adicionar sua própria barra de ferramentas. Todas as barras de ferramentas contêm elementos de botão e combinação, ou seja, igButton e igCombo, que podem ser adicionados como itens à sua barra de ferramentas personalizada. O igButton é a nossa versão estilizada do botão jQuery UI e o igCombo faz parte do nosso produto NetAdvantage for jQuery.

Por exemplo, vamos adicionar um botão que vincularia à Infragistics página inicial da barra de ferramentas e adicionei um belo logotipo a ele para garantir. Aqui está o snippet para adicionar o seu próprio à propriedade 'toolbars' junto com a configuração dos ativos em JavaScript e ASP.NET MVC 3 com encadeamento e sintaxe Razor:

<!-- ## In Javascript ## -->
<script type="text/javascript">
    $(document).ready(function () {
        $("#HtmlEditor1").igHtmlEditor({
            width: '750',
            toolbars: [
            {
                name: 'custom',
                items: [
                {
                    type: 'igButton', link: { href: 'http://pt-br.infragistics.com', target: '_blank' }
                }]
            }],
            activeToolbars: 'fontProperties textFormat textIndent source custom'
        });
    });
</script>
 
<!-- ## In ASP.NET MVC ## -->
@( Html.Infragistics().HtmlEditor()
            .Width("750")
            .Toolbars(toolbars =>
                {
                    toolbars.AddToolbar().Name("custom").Items(items =>
                        {
                            items.AddIgButtonItem()
                                .Link(link =>
                                {
                                    link.Href("http://pt-br.infragistics.com").Target("_blank");
                                });
                        });
                })
            .ActiveToolbars("fontProperties textFormat textIndent source custom")
            .Render()
)

O seu será adicionado automaticamente, porque as barras de ferramentas ativas padrão são 'todas', mas é claro que você pode nomeá-lo e incluí-lo na lista a ser usada como visto acima. E o mesmo método pode ser usado para adicionar igCombo (s) ou apenas mais botões. Aqui está como o resultado do código acima pode parecer (observe que o último botão é nossa adição de barra de ferramentas personalizada e clicar nele abre a página inicial do Infragistics em uma nova guia/janela):

Uma barra de ferramentas personalizada com um botão adicionado ao jQuery Html Editor.

Conclusão

O jQuery HTML Editor fornece formatação de rich text orientada por scripts puros do lado do cliente e definiu o curso para oferecer uma combinação de recursos familiares e bastante instintivos e o objetivo final é fornecer ao usuário uma experiência incrível e um conjunto de ferramentas abrangente. E a capacidade de criar seu próprio conjunto de ferramentas e adicioná-lo à barra de ferramentas significa que esse controle pode ser tão personalizável quanto você estiver disposto a torná-lo. E, como é esperado, ele pode ser estilizado com o jQuery Themeroller e você também pode encontrar instruções sobre isso no Guia de Implantação vinculado acima.

Você pode visitar nossos Exemplos Online do NetAdvantage para jQuery e também pode baixar o projeto de demonstração para este blog, que contém um projeto MVC3 APS.NET com implementações somente Razor e jQuery.

jQuery Como
Solicite uma demonstração