3

Upon request I created a little HTML5 canvas animation for Christmas (so, tomorrow) and now I am trying to put it into an article. I am using JCE and turned off textfiltering in the configuration of Joomla itself and also in my editor profile. I even added canvas to the exceptions. When I copy my code to the article everything works fine, except that on toggle or save, it removes my canvas-element and replaces it with  . JS and CSS stay and the div I use as a container for my canvas also stays.

JS fires until ALERT1.

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

Any suggestions?

1

Rather than trying to add your Javascript in the article which may not parse correctly, I would suggest using a 3rd party plugin to add it such as Sourcerer.

Once installed, you can add the following into your article:

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

I often use a free module called Custom HTML Advanced when I need to add custom code to Joomla. This module is similar to the built-in Custom HTML module, but with a couple of improvements:

  • No filtering (even for script tags);
  • Override module position chrome to remove unwanted wrapping HTML code around the module;
  • Add custom CSS code into HTML header for pages where the module is enabled.

Simply create a module with your code, publish it to a custom position (e.g. MyCustomPosition), and add the following text to your article wherever you want the module to be loaded (this can be done directly in the TinyMCE editor):

{loadposition MyCustomPosition}
| improve this answer | |
1

JCE Editor

When you are editing the article, click on Toggle Editor once and add the code including <canvas id="canvas"></canvas>. Then do NOT click on Toggle Editor again; just click on Save button. The article will be saved without stripping the canvas tag.

JCE Editor

The result should be:

Result

Note: As user @johanpw mentioned, the code may be cleaned up next time you save the article. You'd have to keep a copy of the entire source code elsewhere.

TinyMCE Editor

Go to "Extensions" -> "Plug-in Manager". Click on "Editor - TinyMCE". Inside "Basic Options" add canvas[*] to "Extended Valid Elements" field.

Now you can add <canvas id="canvas">-</canvas> to your article's html source.

| improve this answer | |
  • I have used that first trick (saving from code view) sometimes, but it's not a good idea because if you ever need to change the article contents, the code is cleaned up next time you save. You'd have to keep a copy of the entire source code elsewhere. – johanpw Dec 23 '14 at 15:06
  • @johanpw - Good point. I am going to edit my answer. I considered the special situations: small canvas tag and small period of time (Christmas). – Farahmand Dec 23 '14 at 15:15
  • Well, not toggling the editor basically did it, but now the script ignores my loop. I will try Sourcerer. – littleFlashbang Dec 23 '14 at 16:32
  • 1
    Sourcerer is overkill for this. If you are still having trouble just select none as your editor. – TryHarder Dec 23 '14 at 21:29

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.