Skip to main content

This site requires you to update your browser. Your browsing experience maybe affected by not having the most up to date version.

General Questions /

General questions about getting started with SilverStripe that don't fit in any of the categories above.

Moderators: martimiz, Sean, biapar, Willr, Ingo, swaiba, simon_w

SyntaxHighlighter an Javascript in the CMS


Reply


3 Posts   586 Views

Avatar
benjamin-smith

Community Member, 17 Posts

18 January 2012 at 2:45pm

Edited: 18/01/2012 2:46pm

I have SyntaxHighlighter working in the CMS (using the [url="https://github.com/RichGuk/syntaxhl"]SyntaxHL plugin for TinyMCS[/url]). It's all fine and dandy and code shows perfectly on the front end.

The problem is Javascript. TinyMCE reformats all of my Javascript, adding multiple CDATA's to the point where the code is invalid (the problem is well documented in the forums, for example [url="http://www.silverstripe.org/general-questions/show/13542"]here[/url]).

But I have seen other SilverStripe sites that display Javascript on the front end without problem, such as the [url="http://doc.silverstripe.org/sapphire/en/topics/javascript"]SilverStripe documentation[/url].

Is there something I am missing? How can I display Javascript in formatted code blocks on the front end using SyntaxHighlighter. Bonus points for anyone that can get me to run executable JS that has been inserted into TinyMCE in the backend (I realize the security risks, just looking for proof of concept).

BTW, I have tried to modify 'valid_elements' in _config.php with no success; javascript is still rewritten to include CDATAs.

Thanks to all!

Avatar
martimiz

Forum Moderator, 1132 Posts

20 January 2012 at 6:07am

Edited: 20/01/2012 6:07am

Hi,

I use the SyntaxHighlighter and the plugin on my site, and so far I haven't had any of the problems you describe. What it generates is something like this:

<pre class="brush: jscript;fontsize: 100; first-line: 1; ">
&lt;script type="JavaScript"&gt;
alert('hi');
&lt;/script&gt;</pre>

This is SilverStripe 246. It's definitely the <pre tag that prevents tinyMCE from messing with it - if I add it to HTML plain, without <pre, all javascript gets stripped away in my case... You do have the 'pencil' button installed and otherwise working in your editor, I presume?

Avatar
benjamin-smith

Community Member, 17 Posts

25 January 2012 at 8:50am

Thanks for the reply martimiz.

I've got it working, I was using the wrong brush. I was mixing HTML and JavaScript (and SS template code), so I should have used the XML/HTML brush instead:

<pre class="brush: xml;fontsize: 100; first-line: 1; ">
&lt;% control Store %&gt;

   &lt;h2&gt;{$Title}&lt;/h2&gt;
   
   &lt;h3&gt;Address:&lt;/h3&gt;
   &lt;p&gt;
      {$Address}&lt;br&gt;
      {$City}, {$State} {$Zip}
   &lt;/p&gt;

   &lt;script type="text/javascript"&gt;
      var MapJSON = jQuery.parseJSON('{$Top.StoreGeolocationJSON}');
   &lt;/script&gt;
   
   &lt;div id="map_canvas" style="width:500px;height:300px;"&gt;&lt;/div&gt;

&lt;% end_control %&gt;
</pre>

Thanks again!