web-dev-qa-db-fra.com

Joomla 2.5, impossible de mettre un élément de toile dans un article

Sur demande, j'ai créé une petite animation HTML5 sur toile pour Noël (donc demain) et j'essaye maintenant de la mettre dans un article. J'utilise JCE et j'ai désactivé le filtrage de texte dans la configuration de Joomla et dans mon profil d'éditeur. J'ai même ajouté de la toile aux exceptions. Lorsque je copie mon code dans l'article, tout fonctionne correctement, sauf que, lors du basculement ou de l'enregistrement, l'élément de la zone de travail est supprimé et remplacé par  . JS et CSS restent et le div que j’utilise comme conteneur pour ma toile reste également.

JS se déclenche jusqu'à ALERT1.

var canvas = document.getElementById("canvas");
alert("ALERT1");
var ctx = canvas.getContext("2d");
alert("ALERT2");

Aucune suggestion?

joomla-2.5articlesjce
3
littleFlashbang

Plutôt que d'essayer d'ajouter votre javascript dans l'article qui risque de ne pas être analysé correctement, je suggère d'utiliser un plugin tiers pour l'ajouter, tel que Sourcerer .

Une fois installé, vous pouvez ajouter ce qui suit dans votre article:

{source}
    <script>
        var canvas = document.getElementById("canvas");
        alert("ALERT1");
        var ctx = canvas.getContext("2d");
        alert("ALERT2");
    </script>
{/source}
1
Lodder

J'utilise souvent un module gratuit appelé Custom HTML Advanced lorsque j'ai besoin d'ajouter du code personnalisé à Joomla. Ce module est similaire au module HTML personnalisé intégré, mais avec quelques améliorations:

  • Pas de filtrage (même pour les balises de script);
  • Remplacer la position du module chrome pour supprimer le code HTML d’emballage non désiré autour du module;
  • Ajoutez du code CSS personnalisé dans l'en-tête HTML pour les pages où le module est activé.

Créez simplement un module avec votre code, publiez-le sur une position personnalisée (par exemple MyCustomPosition ) et ajoutez le texte suivant à votre article à l'endroit souhaité du module. à charger (cela peut être fait directement dans l'éditeur TinyMCE):

{loadposition MyCustomPosition}
1
johanpw

Editeur JCE

Lorsque vous éditez l'article, cliquez sur Toggle Editor une fois et ajoutez le code incluant <canvas id="canvas"></canvas>. Alors ne cliquez PAS sur Toggle Editor encore; il suffit de cliquer sur Save bouton. L'article sera sauvegardé sans enlever la balise canvas.

JCE Editor

Le résultat devrait être:

Result

Remarque: Comme l'utilisateur @johanpw l'a mentionné, le code pourrait être nettoyé lors de la prochaine sauvegarde de l'article. Vous devez conserver une copie du code source complet ailleurs.

TinyMCE éditeur

Allez dans "Extensions" -> "Plug-in Manager". Cliquez sur "Editeur - TinyMCE". Dans "Options de base", ajoutez canvas[*] vers le champ "Eléments valides étendus".

Maintenant, vous pouvez ajouter <canvas id="canvas">-</canvas> à la source HTML de votre article.

1
Farahmand