Comment tirer parti des styles personnalisés et des styles de balisage dans le CEWP SharePoint 2010 (solution 100% JavaScript)

Question

En résumé, avec un RichHtmlField, nous pouvons personnaliser les styles de balisage Styles & qui apparaissent dans les listes déroulantes du ruban. En utilisant un composant WebPart Éditeur de contenu OOTB, nous ne pouvons pas. Après avoir interrogé/contrasté RichHtmlField vs CEWP (HTML/JavaScript émis), j'ai été capable de trouver une solution JavaScript.

Alors que RichHtmlField émet un script de page pour initialiser le contrôle de champ, le CEWP n'émet aucun script d'initialisation de ce type. De plus, RichHtmlField émet un nombre significativement plus élevé d'attributs HTML que le CEWP, et deux de ces attributs sont PrefixStyleSheet et StyleSheet. PrefixStyleSheet identifie le préfixe de feuille de style utilisé dans le menu déroulant

StyleSheet est une URL relative au fichier css de marque.

Donc, avec toutes ces choses étant vrai, nous devrions être en mesure d'initialiser un CEWP avec une feuille de style de marque en utilisant jQuery:

<script type="text/javascript"> 
ExecuteOrDelayUntilScriptLoaded(function() { 

// window.setTimeout(function() { 

$("div[RteRedirect]").each(function() { 

    var id = $(this).attr("RteRedirect"), 
     editSettings = $("#" + id); 

    if(editSettings.length > 0 && editSettings[0].PrefixStyleSheet != 'yourcustom-rte') { 
     editSettings[0]['PrefixStyleSheet'] = 'yourcustom-rte'; 
     editSettings[0]['StyleSheet'] = '\u002fStyle Library\u002fen-US\u002fThemable\u002fCore Styles\u002f<somecustomstylesheet>.css'; 
     RTE.Canvas.fixRegion(id, false); 
    } 

}); 

// }, 2000); 

}, "sp.ribbon.js"); 

</script> 

J'espère que cela aide quelqu'un. Ce code pourrait aller beaucoup de directions différentes. Je ne fais que présenter les fondamentaux. Si vous ajoutez ceci à une page maître à l'intérieur d'un EditModePanel, cela fonctionnera sur plusieurs sites.

Il y a une minuterie là-dedans car selon l'ordre de chargement du script, quelque chose peut gâcher ce que vous avez fait après l'avoir fait. Faites-moi savoir si cela fonctionne/ne fonctionne pas pour vous.

Serait cool de garder un compte courant des solutions à ce problème quelque part.

Cheers,

M

Answer 1

croient ou pas 4 ans de retard ce poste était serviable!

Pour le faire fonctionner, je devais changer ceci:

$("td[RteRedirect]").each(function() { 

    var id = $(this).attr("RteRedirect"); 
     editSettings = $("#" + id); 

Merci