Olá Internauta gostaria de falar hoje sobre o editor de texto utilizado dentro do AjaxControlToolkit versão nova com o Visual Studio 11. Existe agora um componente focado para editor de texto descente.

Tag: Editor, HTMLEditorExtender, Visual Studio 11, Framework 4.5

O melhor de tudo, em relação a esse componente é a possibilidade de customização como colocar imagem, negrito, copiar, colar e outras funções. O que vou mostrar aqui foi o que recomendaram para usar. 

O TextBox do tipo MultiLine pode ser customizado pelo HTMLEditorExtender, isso porque pode ser referenciado sem qualquer problema. O primeiro passo foi criar o textbox com a propriedade TextMode igual a MultiLine. Listagem 1.

[Code]
<asp:TextBox ID="txt" TextMode="MultiLine" runat="server" Height="280px" 
Width="451px"></asp:TextBox>
[/Code]
Listagem 1 – Primeiro código com TextBox

O segundo passo é adicionar o componente HTML do AjaxControlToolkit e vincular ao campo textbox com a propriedade multiline. Veja o código de listagem 2.

[Code]
<asp:HtmlEditorExtender runat="server">
<Toolbar>
       <asp:Bold/>
       <asp:Copy />
<asp:Cut />
<asp:FontSizeSelector />
<asp:FontNameSelector />
<asp:ForeColorSelector />
<asp:Paste />
<asp:Superscript />
</Toolbar>
</asp:HtmlEditorExtender>
[/Code]
Listagem 2 - Editor HTMLEditionExtender

Note que dentro da tag chamada Toolbar possui várias propriedades como Bold, Copy, Cut, FontSIzerSelectior, FontNameSelector, ForeColorSelector, Paster, Superscript e muito mais que não coloquei. Vou deixar esse gostinho pra você colocar mais propriedades.

Está faltando uma propriedade e um elemento na listagem 2. Esse elemento é justamente o vínculo entre os dois objetos de tela, isto é, entre o TextBox e o HTMLEditorExtender.

Para vincular, veja o que fiz. Listagem 3.

[Code]
<asp:TextBox ID="txt" TextMode="MultiLine" runat="server" Height="280px" Width="451px"></asp:TextBox>
<asp:HtmlEditorExtender TargetControlID="txt" runat="server">
<Toolbar>
<asp:Bold/>
<asp:Copy />
<asp:Cut />
<asp:FontSizeSelector />
<asp:FontNameSelector />
<asp:ForeColorSelector />
<asp:Paste />
<asp:Superscript />
</Toolbar>
</asp:HtmlEditorExtender>
[/Code]
Listagem 3 - Vincular objetos.

Note que a propriedade diferente entre a listagem 2 e 3 é o TargetControlID igual ao txt que é o nome do meu componente do tipo TextBox. Esse é o vínculo entre os dois objetos. O resultado foi esse. Imagem 1.



Imagem 1 - Resultado do editor em HTML.

Adicionando Imagem

Os desenvolvedores sempre tiveram problemas com esses tipos de editores de texto. É necessário adicionar imagem dentro do editor de forma dinâmica. Vários sites desenvolveram o seu próprio editor de texto com imagem, a Microsoft pensou um pouco no nosso problema.

De acordo com o que está no site www.asp.net procurei desenvolver usando o padrão recomendado no site e deu certo para início. Criei um botão e um label dentro da página e adicionei alguns códigos, vamos analisar estes códigos. Listagem 3.

[Code]
<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server"></asp:ToolkitScriptManager>

        <p><asp:Label ID="Img" runat="server" /></p> 

        <asp:TextBox ID="txt" TextMode="MultiLine" runat="server" Height="280px" 
            Width="451px"></asp:TextBox>
        <asp:HtmlEditorExtender TargetControlID="txt" runat="server">
            <Toolbar>
                <asp:Bold/>
                <asp:Copy />
                <asp:Cut />
                <asp:FontSizeSelector />
                <asp:FontNameSelector />
                <asp:ForeColorSelector />
                <asp:Paste />
                <asp:Superscript />
            </Toolbar>
        </asp:HtmlEditorExtender>

        <p><asp:Button ID="Submit" runat="server" Text="Submit" Width="120" Height="30" OnClick="Submit_Click" /></p>

        <div id="pnlOutput" runat="server" style="border:solid 1px Silver; padding:5px;"></div>
[/Code]
Listagem 3 - Código completo

O label chamado Img serve para armazenar a imagem carregada na web. O div chamado pnlOutput serve para mostrar o resultado escrito dentro do editor. O botão chamado Submit processa todas as informações.

Quando carrego a página, já coloco a imagem no label e o texto. Listagem 4.

[Code]
protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                Img.Text = "<img src=\"http://seusite.com.br/images/layout/logo2.png\" alt=\"Alt text\" title=\"ToolTip\" />";

                txt.Text = "<P>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pulvinar nulla vel enim tempus bibendum. Integer dignissim justo vel est congue bibendum. Sed lorem nisl, cursus sit amet dictum et, scelerisque sed sapien. Aenean non elit quam. Nullam vel condimentum leo. In tempus imperdiet mattis. Mauris nec est elit. Vestibulum ut sem ut leo facilisis gravida.</P>" + "<P>Etiam tristique cursus ipsum eu adipiscing. Curabitur fringilla erat ut augue facilisis fermentum. Mauris venenatis pretium libero quis dictum. Duis tempus adipiscing cursus. Morbi ac pulvinar nulla. Fusce sed lorem tellus, ac imperdiet velit. Nulla facilisi. Fusce quis ipsum non magna fringilla porta. Nam dapibus congue mi in tincidunt. Donec nunc tellus, egestas vitae sollicitudin in, bibendum sit amet purus. In leo purus, congue rutrum luctus sit amet, tincidunt vitae velit.</P>";
            }
        }
[/Code]
Listagem 4 - Carregando a página.

De acordo com o site, eles falaram para criar um método chamado ImgTagHandlerInput recebendo como parâmetro de entrada o Match da classe System.Text.RegularExpressions.Match. Listagem 5.

[Code]
private string ImgTagHandlerInput(Match m)
{
string Output = null;
string myDomain = HttpContext.Current.Request.Url.Host;

Output = "<img";

if (!object.ReferenceEquals(m.Groups["style"].ToString(), string.Empty))
{
       Output += " style=\"" + m.Groups["style"].ToString() + "\"";
}

if (!object.ReferenceEquals(m.Groups["title"].ToString(), string.Empty))
{
       Output += " title=\"" + m.Groups["title"].ToString() + "\"";
}

if (!object.ReferenceEquals(m.Groups["alt"].ToString(), string.Empty))
{
       Output += " alt=\"" + m.Groups["alt"].ToString() + "\"";
}

Output += " src=\"" + m.Groups["src"].ToString() + "\"";
Output += ">";

return Output;
 [/Code]
Listagem 5 - Método indicado pelo site www.asp.net.

O código da listagem 5 é chamado depois do clique no botão submit. O método pega os dados pela expressão regular.  O código de submit chama o método sem qualquer problema. Listagem 6.

[Code]
public void Submit_Click(object S, EventArgs E)
{
if (!object.ReferenceEquals(txt.Text, string.Empty))
{
string pattern = null;
string mDesc = null;
MatchEvaluator myDelegate = default(MatchEvaluator);
Regex RegX = default(Regex);

pattern = "\\&lt\\;IMG( style=\"(?<style>([^\"]+))\")*( title=\"(?<title>([^\"]+))\")*( alt=\"(?<alt>([^\"]+))\")* src=\"(?<src>([^\"]+))\"( )*\\&gt\\;";

myDelegate = new MatchEvaluator(ImgTagHandlerInput);
RegX = new Regex(pattern, RegexOptions.Multiline | RegexOptions.IgnoreCase);
mDesc = RegX.Replace(txt.Text, myDelegate);

pnlOutput.InnerHtml = mDesc;
txt.Text = mDesc;
}
}
[/Code]
Listagem 6 - Método submit.

A primeira linha de código verifica se o objeto é vazio. Se não for vazio ele entra e começa a fazer o processamento. A variável pattern escreve a imagem em HTML dentro do C#. Note que o MatchEvaluator chama o método ImgTagHandlerInput.

Como primeiro passo foi ótimo colocar a imagem. Veja o resultado Imagem 2.




Imagem 2 - Em funcionamento.

Arrastei a imagem para dentro do editor e funcionou perfeito. Ao clicar no botão submit, mostra o seguinte resultado. Imagem 3.



Imagem 3 - Depois do clique do botão.

Bom este artigo ficou um pouco grande, espero que tenha gostado e servido para você no dia a dia.