Rendre le ruban « Format text » disponible dans une page d’application SharePoint

En travaillant sur l’intranet d’un client dans SharePoint, j’ai eu besoin de permettre d’éditer du texte avec le ruban de SharePoint dans une page d’application. J’ai pensé que ça pourrait être utile à d’autres personnes alors j’ai décidé de partager la solution.

Premièrement, il est important de noter que le comportement désiré s’applique sur un div et non une boîte de texte. Donc, une fois la page d’application créée, il faut ajouter un div à l’endroit où on veut le champ pour éditer le texte. Ce div doit avoir les classes suivantes : « ms-rtestate-field ms-rtestate-write ms-inputuserfield ms-long ».  Il faut aussi lui assigner « this.contentEditable=’true’; » pour l’événement onclick.

Div éditable - html du div

Lors d’un postback, le div perd le texte saisi. Il faut donc implémenter une façon de conserver le contenu. Il faut donc ajouter un contrôle hidden dans la page et l’utiliser pour conserver le texte. J’ai donc ajouté les fonctions JavaScript suivantes :

Code js pour conserver le contenu du div au reload

La fonction « TransfererHtmlDansControleCache » est appelée par l’événement onclick du bouton « Enregistrer » dans ma page d’application. Dans mon cas, j’ai besoin de conserver le contenu dans le property bag afin que l’utilisateur puisse l’éditer à nouveau quand il retourne dans la page d’application et afin de pouvoir y accéder de partout.

Il est important aussi de rendre le ruban visible dans la page en ajoutant le code suivant dans la fonction « Page_Load » :

Code c# pour afficher le ruban

Et voilà, c’est maintenant prêt à être utilisé !

Div éditable - Pas le focus

Afin que l’utilisateur puisse rapidement repérer la zone d’édition, j’ai ajouté un contour au div. Comme vous pouvez le constater, le ruban n’est pas disponible au départ. Il faut cliquer dans le div pour que celui-ci apparaisse. L’onglet pour insérer certains contrôles est également disponible.

Div éditable - Onglet Format textDiv éditable - Onglet Insert

Le bouton « Aperçu » permet d’afficher le contenu qui a été enregistré dans le property bag. Comme vous pouvez le constater, les styles s’appliquent bien lorsque le texte est affiché dans une autre page.

Exemple du popup

Bon développement !

Référence

http://blog.bonzai-intranet.com/analysthq/2014/09/cross-browser-richtext-editor-solution-for-sharepoint/

Advertisements

Laisser un commentaire

Entrer les renseignements ci-dessous ou cliquer sur une icône pour ouvrir une session :

Logo WordPress.com

Vous commentez à l’aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l’aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l’aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l’aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s