Procédure : Ajout d'un bouton au contrôle du champ HTML Editor

Article
02/01/2010

Le contrôle de champ Éditeur HTML fournit des boutons intégrés qui permettent aux utilisateurs d'insérer des éléments HTML tels que des tableaux et des listes, et d'appliquer des styles sans typer de code HTML et CSS. Cette rubrique explique comment ajouter un bouton personnalisé à cet éditeur pour fournir une nouvelle fonctionnalité.

Procédure

Ajouter un bouton personnalisé au contrôle de champ Éditeur HTML

Ouvrez le fichier RTE2ToolbarExtension.xml dans le dossier Menu Modification de la galerie Pages maîtres. Toutes les personnalisations au contrôle de champ Éditeur HTML doivent être référencées dans ce fichier.
Ajoutez une balise <RTE2ToolbarExtraButton> sous <RTE2ToolbarExtensions>. Par exemple, modifiez le fichier de la manière suivante :
```
<?xml version="1.0" encoding="utf-8" ?>
<RTE2ToolbarExtensions>
     <RTE2ToolbarExtraButton id="extraButtonTestId" 
        src="RTE2ToolbarExtraButtonTest.js" />
```
Cela ajoute un nouveau bouton avec l'ID extraButtonTestId. Vous devez également spécifier un fichier source contenant le code JavaScript qui effectue les actions désirées lors d'un clic sur le bouton.
Créez et transférez le fichier JavaScript référencé à l'étape 2. Ce fichier doit contenir les éléments suivants :
- Implémentation d'une méthode onClickCallback pour votre bouton.
- Implémentation d'une méthode onResetStateCallback pour votre bouton. Ce code s'exécute lorsque l'état de la barre d'outils de l'éditeur est réinitialisé. Par exemple : un appel de la fonction RTE2_RegisterToolbarButton(mnemonic, iconUrl, text, toolTip, onClickCallback, onResetStateCallback, arguments).
  
  Cette fonction utilise les sept paramètres suivants :
  
  mnemonic    Un mnémonique pour le bouton.
  
  iconUrl    Chemin d'accès au fichier d'icône utilisé pour l'affichage du bouton.
  
  Text    Texte à afficher en regard de l'icône du bouton.
  
  toolTip    Info-bulle à afficher lors d'une pause au-dessus du bouton.
  
  onClickCallback    Méthode appelée lors d'un clic sur le bouton.
  
  onResetStateCallback    Méthode appelée lors du changement d'état de l'éditeur. Cette méthode est notamment utilisée pour activer et désactiver un bouton en fonction du texte que l'utilisateur a mis en surbrillance dans la fenêtre de l'éditeur.
  
  arguments    Objet qui est passé aux méthodes onClickCallback et onResetStateCallback lorsqu'elles sont exécutées.
Exemple du contenu éventuel de RTE2ToolbarExtraButtonTest.js :
```
[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"));
```
Transférez ce fichier dans le chemin spécifié à l'étape 2. Les emplacements dans le paramètre src sont relatifs au répertoire \Program Files\Common Files\Microsoft Shared\Web Server Extensions\12\TEMPLATE\LAYOUTS\1033\. Pour cet exemple, RTE2ToolbarExtraButtonTest.js doit être transféré directement dans ce répertoire.

Maintenant, tous les contrôles de l'éditeur HTML que vous ouvrez possèdent le bouton supplémentaire que vous avez créé.

Notes

Vous pouvez afficher la source JavaScript pour la source du contrôle de champ Éditeur HTML intégré dans le fichier.

Pour mieux comprendre comment ajouter de nouvelles fonctionnalités d'éditeur puissantes, accédez au fichier HtmlEditor.js dans le chemin d'accès \Program Files\Common Files\Microsoft Shared Debug\Web Server Extensions\12\TEMPLATE\LAYOUTS\1033\HtmlEditor.js.

Exemple

L'exemple suivant ajoute un bouton au contrôle de champ Éditeur HTML. Lors d'un clic, le bouton change la couleur d'arrière-plan d'une cellule de tableau.

Pour utiliser l'exemple, enregistrez le code XML ci-dessous sous le fichier RTE2ToolbarExtension.xml dans le dossier /_catalogs/masterpage/Editing Menu/, puis enregistrez le fichier .js file dans \Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\LAYOUTS\1033.

[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)
}

Voir aussi

Autres ressources

Tâches courantes de personnalisation des pages et des sites

Partager via