Como a: Adicionar um botão para o controle de campo editor HTML

Artigo
09/26/2008

O controle campo HTML Editor fornece interno botões que os usuários habilitar para inserir elementos HTML como tabelas e listas e aplicar estilo sem digitar codificar HTML e folhas de estilo em cascata. Este tópico explica como adicionar um personalizado botão para este editor para fornecer uma informação nova funcionalidade.

Procedimento

Para adicionar um personalizado botão para o controle campo editor de HTML

Abra o arquivo RTE2ToolbarExtension.xml na pasta Editing Menu na Galeria de Master Page. Todas as personalizações para o controle campo HTML Editor devem ser relacionado neste arquivo.
Add a <RTE2ToolbarExtraButton> tag under <RTE2ToolbarExtensions>. De exemplo, alteração de arquivo como segue:
```
<?xml version="1.0" encoding="utf-8" ?>
<RTE2ToolbarExtensions>
     <RTE2ToolbarExtraButton id="extraButtonTestId" 
        src="RTE2ToolbarExtraButtonTest.js" />
```
Essa alteração adiciona um novo botão com identificação extraButtonTestId. Você deve também especificar um arquivo origem contendo a codificar JavaScript que executa as ações desejadas quando o botão é clicado.
Criar e carregar o arquivo JavaScript citado na etapa 2. Esse arquivo deve conter o seguinte:
- Implementação de um método onClickCallback onClickCallback para seu botão.
- Implementação de um método onResetStateCallback onResetStateCallback para seu botão. Este codificar seja executado quando o estado de barra de ferramentas a editor é redefinir. Para exemplo: Um chamar do RTE2_RegisterToolbarButton(mnemonic, iconUrl, text, toolTip, onClickCallback, onResetStateCallback, arguments) RTE2_RegisterToolbarButton(mnemonic, iconUrl, Text, toolTip, onClickCallback, onResetStateCallback, Arguments) função.
  
  A seguir é os sete parâmetros para essa função:
  
  mnemônico    Um mnemônico para o botão.
  
  iconUrl    Caminho para o arquivo de ícone para exibir para o botão.
  
  Texto    Texto para exibir próximo ao ícone do botão.
  
  toolTip    Dica de ferramenta para exibir quando pausando sobre o botão.
  
  onClickCallback    Método chamado quando o botão é clicado.
  
  onResetStateCallback Método chamado quando qualquer estado do editor é alterado. Um comum uso desse método é para habilitar e desativar um botão baseada no texto o usuário tem realçado na janela de editor.
  
  Argumentos    Um objeto que é passado para os métodos onResetStateCallback onClickCallbackonResetStateCallback e quando elas estiverem executar.
A seguir, há um exemplo do que RTE2ToolbarExtraButtonTest.js pode conter:
```
[js]
// The method that is called when the button is clicked.
function TestButtonOnClick(strBaseElementID, arguments) {
alert("TestButton: I was clicked in " + strBaseElementID + ": " + 
arguments[1]); 
}

// The method that is called when the button's state is reset.
function TestButtonOnResetState(strBaseElementID, arguments) {
var docEditor=RTE_GetEditorDocument(strBaseElementID);
if (docEditor==null) { return; }
RTE_RestoreSelection(strBaseElementID);
var selection=docEditor.selection;
var rngSelection=selection.createRange();
rngSelection=selection.createRange();
rngSelection.pasteHTML("Resetting TestButton state! ");
return true;
}

// Register the toolbar button, which isnecessary for the 
// button to be displayed
RTE2_RegisterToolbarButton(
"testButton", 
RTE_GetServerRelativeUnlocalizedImageUrl("rte2spchk.gif"), 
"<- Test button", 
"This is my test button for toolbar extensibility", 
TestButtonOnClick,
TestButtonOnResetState,
new Array("one", "two", "3"));
```
Carregar esse arquivo para o caminho especificado na etapa 2. Os locais no parâmetro src src são relativo para o Diretório \Program Files\Common Files\Microsoft Shared\Web Server Extensions\12\TEMPLATE\LAYOUTS\1033\ \Arquivos de Shared\Extensões Server Extensions\12\TEMPLATE\LAYOUTS\1033\. Para esse exemplo, RTE2ToolbarExtraButtonTest.js deve ser carregado diretamente para este Diretório.

Agora, campo editor de HTML todos os controles tiver aberto o adicional botão que você criou.

Dica

É possível exibição de origem para o interno JavaScript HTML Editor campo controle origem no arquivo.

Para get uma compreensão mais profunda de como adicionar avançado nova funcionalidade editor, procurar para o arquivo HtmlEditor.js na \Program Files\Common Files\Microsoft Shared Debug\Web Server Extensions\12\TEMPLATE\LAYOUTS\1033\HtmlEditor.js \Program Files\Common Files\Microsoft Shared Debug\Web Server Extensions\12\TEMPLATE\LAYOUTS\1033\HtmlEditor.js caminho.

Exemplo

O seguinte exemplo adiciona um botão para o controle campo HTML Editor. Quando clicado, o botão muda a cor do plano de fundo de uma célula tabela.

Para usar o exemplo, salvar a codificar XML abaixo como RTE2ToolbarExtension.xml para o /_catalogs/MasterPage/Editing menu/pasta e salvar o arquivo .js para extensions\12\TEMPLATE\LAYOUTS\1033 servidor \Program Files\Common Files\Microsoft Shared\web.

[XML]

  <?xml version="1.0" encoding="utf-8" ?> 
- <RTE2ToolbarExtensions>
  <RTE2ToolbarExtraButton id="bgColorButton" src="CodeSample.js" /> 
  </RTE2ToolbarExtensions>

var bgColor_mnemonic = "CodeSampleButtonId";

// The button has been clicked.
function BgColor_OnClick(strBaseElementID, args)
{
var elemCell=RTE_GetNearestContainingElementOfTypes(strBaseElementID, g_aTableCellTagNames);
if (elemCell==null
|| RTE2_IsSourceView(strBaseElementID)
|| !RTE2_ElementInContentArea(strBaseElementID, elemCell) )
{
return;
}

var dialogHelper=RTE_GetDialogHelper();
if (dialogHelper !=null)
{
var initialBgColor = elemCell.bgColor;

var newBgColor=dialogHelper.ChooseColorDlg(initialBgColor);
newBgColor=newBgColor.toString(16);
if (newBgColor.length < 6)
{
var tempString="000000".substring(0,6-newBgColor.length);
newBgColor=tempString.concat(newBgColor);
}
if (newBgColor.toUpperCase() != args.transparentColor.toUpperCase())
{
                elemCell.bgColor = newBgColor;
}
else
{
elemCell.bgColor = "";
}
}
RTE_GiveEditorFocus(strBaseElementID);
}

// The current state of the editor has changed.
// Should the Cell background button remain clickable?
function BgColor_OnResetState(strBaseElementID, args)
{
var elemCell=RTE_GetNearestContainingElementOfTypes(strBaseElementID, g_aTableCellTagNames);
if (elemCell==null
|| RTE2_IsSourceView(strBaseElementID)
|| !RTE2_ElementInContentArea(strBaseElementID, elemCell) )
{
RTE_TB_SetEnabledFromCondition(strBaseElementID, false, bgColor_mnemonic);
}
else
{
RTE_TB_SetEnabledFromCondition(strBaseElementID, true, bgColor_mnemonic);
}
return true;
}

// Register the button.
{
var iconUrl = "/_layouts/" + L_Language_Text + "/images/rtebkclr.gif";
var text = "Edit Cell Background Color";
var toolTip = text;
var onClickCallback = BgColor_OnClick;
var onResetStateCallback = BgColor_OnResetState;
var args = new Object();
args.transparentColor = "FFFFFF";
RTE2_RegisterToolbarButton(bgColor_mnemonic, iconUrl, text, toolTip, onClickCallback, onResetStateCallback, args)
}

Consulte também

Outros recursos

Tarefas de personalização do site e de página comuns

Compartilhar via