Você está na página 1de 4

Como Implementar o RadEditor (que tem muito mais recursos) em vez do RTFEditor do Gvinci

1º Passo: Montagem da Tela

Vemos posicionar o campo Memo que receberá os valores do RadEditor na tela e alterar as propriedades ReadOnly = true e
Visible = false. Temos que fazer isso para que depois o próprio CRUD da aplicação faça a persistência junto com o restante dos
campos.

Adicionar um componente HTMLCodeControl e colar o seguinte código:

<telerik:RadEditor ID="RadEditor1" runat="server" Width="867" Height="392" EnableResize="false">


<Modules>
<telerik:EditorModule Name="RadEditorStatistics" Visible="false" Enabled="true"></telerik:EditorModule>
<telerik:EditorModule Name="RadEditorDomInspector" Visible="false" Enabled="true"></telerik:EditorModule>
<telerik:EditorModule Name="RadEditorNodeInspector" Visible="false" Enabled="true"></telerik:EditorModule>
<telerik:EditorModule Name="RadEditorHtmlInspector" Visible="false" Enabled="true"></telerik:EditorModule>
</Modules>
<Languages>
<telerik:SpellCheckerLanguage Code="pt-BR" Title="Português" />
<telerik:SpellCheckerLanguage Code="en-US" Title="Inglês" />
<telerik:SpellCheckerLanguage Code="es-ES" Title="Espanhol" />
</Languages>
</telerik:RadEditor>

Altere os valores do Width e Hight de acordo com o tamanho desejado do controle. Nesse código já estão definidas 3
línguas para o corretor ortográfico (português BR, inglês US, e Espanhol ES).

2º Passo: Criar no Gvinci a estrutura de pastas App_Data/RadSpell (veja imagem abaixo) para que seja criado o ambiente
para os dicionários do corretor ortográfico. Após a compilação e a consequente geração do sistema, descompacte o arquivo
Dictionaries.zip na sub-pasta RadSpell.

Para inclusão de mais línguas, deve adicionar no HTMLCodeControl outra linha do SpellCheckerLanguage , baixar o arquivo
.tdf da língua no seguinte site: http://www.telerik.com/forums/147971-radspell-dictionaries e adicionar o arquivo na pasta
App_Data/RadSpell.
3º Passo: Criar um web.config estático na raiz da solução. Para isto basta adicionar um arquivo no gvinci "Inserir
módulo>Outros>Arquivo", renomear este arquivo como "web.config", colar o texto da "web.config" que foi gerada e
adicionar as linhas de código abaixo marcado com amarelo nas respectivas regiões do <system.web> e
<system.webServer>. Ao fazer isto, o gvinci irá respeitar o arquivo que você criou e não irá gerar uma nova "web.config".

<!--End Locales-->
<system.web>
<sessionState timeout="480" />
<httpRuntime requestValidationMode="3.5" />
<httpHandlers>
<add path="Telerik.Web.UI.DialogHandler.aspx" type="Telerik.Web.UI.DialogHandler" verb="*" validate="false" />
<add path="Telerik.Web.UI.WebResource.axd" type="Telerik.Web.UI.WebResource" verb="*" validate="false" />
<add verb="GET" path="GCaptcha.aspx" type="GCaptchaImageHandler" />
<add path="Telerik.ReportViewer.axd" verb="*" type="Telerik.ReportViewer.WebForms.HttpHandler, Telerik.ReportViewer.WebForms, Version=8.2.14.1204, Culture=neutral,
PublicKeyToken=a9d7983dfcc261be" />
<add verb="*" validate="false" path="Telerik.Web.UI.SpellCheckHandler.axd" type="Telerik.Web.UI.SpellCheckHandler, Telerik.Web.UI" />
</httpHandlers>

<system.webServer>
<validation validateIntegratedModeConfiguration="false" />
<handlers>
<add name="Telerik.ReportViewer.axd_*" path="Telerik.ReportViewer.axd" verb="*" type="Telerik.ReportViewer.WebForms.HttpHandler, Telerik.ReportViewer.WebForms, Version=8.2.14.1204, Culture=neutral, PublicKeyToken=a9d7983dfcc261be"
preCondition="integratedMode" />
<add name="Telerik_Web_UI_DialogHandler_aspx" verb="*" preCondition="integratedMode" path="Telerik.Web.UI.DialogHandler.aspx" type="Telerik.Web.UI.DialogHandler" />
<add name="Telerik_Web_UI_WebResource_axd" verb="*" preCondition="integratedMode" path="Telerik.Web.UI.WebResource.axd" type="Telerik.Web.UI.WebResource" />
<add name="GCaptchaImageHandler" preCondition="integratedMode" verb="GET" path="GCaptcha.aspx" type="GCaptchaImageHandler" />
<add name="SpellCheckHandler" path="Telerik.Web.UI.SpellCheckHandler.axd" verb="*" type="Telerik.Web.UI.SpellCheckHandler, Telerik.Web.UI" />
</handlers>
</system.webServer>
</configuration>

4º Passo: Criar os seguintes códigos em C#:


//Esse método tem que ser copiado e colado na Aba C#
protected void Page_Load(object sender, EventArgs e)
{

//Atribui a linguagem do Site ao RadEditor


RadEditor1.Language = CultureInfo.CurrentCulture.Name;

//Adicionar nova linguagem. Deve ter o arquivo .ptb na pasta App_Data\RadSpell


//Está definido no HTMLCodeControl as línguas pt-BR, en-US e es-ES

//RadEditor1.Languages.Add(new SpellCheckerLanguage("fr-FR", "Francês"));


//RadEditor1.Languages.Add(new SpellCheckerLanguage("de-DE", "Alemão"));

//Esse método tem que ser criado através do Gvinci e depois substituído por esse código
protected void Form1_LoadCompleted()
{

// Verifica se o Formulário está em navegação


if (PageState == FormStateEnum.Navigation)
{
//Atribui o conteúdo do Campo Memo para o RadEditor
RadEditor1.Content = OrientacaoField;
//Muda o modo para somente visualização, pois não está editando
RadEditor1.EditModes = EditModes.Preview;
}
else
{
//Muda o modo para Design e HTML. Se não quiser HTML é só retirar a parte "| EditModes.Html"
RadEditor1.EditModes = EditModes.Preview | EditModes.Design | EditModes.Html;
}
}

5º Passo: Adicionar os arquivos de Resource da tradução do RadEditor. Estamos mandando os arquivos de resource
(App_GlobalResources.zip) da versão atualizada para pt-BR, en-US e es-ES. Se quiser outra língua deve baixar no seguinte site
http://www.telerik.com/forums/radeditor-for-asp-net-ajax-localizations e comparar utilizando uma ferramenta como o WinMerge que
compara 2 documentos e mostra a diferença entre eles. São necessários os seguintes arquivos na pasta /App_GlobalResources:

 RadEditor.Dialogs.resx
 RadEditor.Main.resx
 RadEditor.Modules.resx
 RadEditor.Tools.resx

Para outras línguas você deve copiar cada um dos arquivos .resx e renomeá-los utilizando a sintaxe mostrada abaixo (conf. site
http://www.telerik.com/help/aspnet-ajax/editor-using-global-resource-files.html ):
 RadEditor.Dialogs.<Your_Language>.resx
 RadEditor.Main.<Your_Language>.resx
 RadEditor.Modules.<Your_Language>.resx
 RadEditor.Tools.<Your_Language>.resx

6º Passo: Adicionar os arquivos de Resource de tradução do RadSpell. Estamos mandando os arquivos de resource
(App_GlobalResources.zip) da versão atualizada para pt-BR, en-US e es-ES. Se quiser outra língua deve editar os existentes e
traduzi-los utilizando uma ferramenta como o WinMerge que compara 2 documentos e mostra a diferença entre eles. São
necessários os seguintes arquivos na pasta /App_GlobalResources:

 RadSpell.Dialogs.resx

Para outras línguas você deve copiar cada um dos arquivos .resx e renomeá-los utilizando a sintaxe mostrada abaixo (conf. site
http://www.telerik.com/help/aspnet-ajax/spell-localization.html ):
 RadSpell.Dialogs.<Your_Language>.resx

7º Passo: Adicionar uma função customizada em JS no botão salvar para transferir os dados digitados no RadEditor para o
campo da tabela do banco de dados que será gravada no banco de dados. A ordem é importante, pois quando o sistema for
salvar, o campo Memo do banco já deve estar atualizado com as novas informações.
Código customizado em JavaScript:

function Button17_OnClientClick(sender)
{
//Nesta linha nós procuramos o componente RadEditor1
var editor = $find("RadEditor1");

//Nesta linha atribuímos ao TextBox que está vinculado ao campo Memo da tabela o conteúdo em HTML do RadEditor.
document.getElementById("RadTextBox9").value = editor.get_html(true);
}

Tela da aplicação final rodando com corretor ortográfico:

Você também pode gostar