External Javascript causing editor problems

CMSimple 4.0 und höher
Calum
Posts: 2
Joined: Sat 14. Mar 2015, 16:55

External Javascript causing editor problems

Postby Calum » Sat 14. Mar 2015, 18:36

I'll describe what I'm trying to do, before getting into what's going wrong. Running CMSimple 4.4.5.

I want to embed small fragments of music notation on my web pages. I want to be able to update and edit these regularly, so I'd prefer to not create and upload images, so I found a Javascript library that does exactly what I need:

http://moinejf.free.fr/js/index.html

This works perfectly with simple HTML pages - simply call the library and include code that describes the music - something like this:

Code: Select all

X:0
T:Hello Scale!
K:C
CD EF GA Bc


However, when I add the library into the template I ran into a few problems. Firstly, when I edit the HTML the editor starts messing around with the code, so the above gets saved as this:

Code: Select all

X:0 T:Hello Scale! K:C CD EF GA Bc


The library can't cope with this, so it ignores it. I can get round it using <pre> tags and including an HTML comment to get a new line (the X:0 must be on a newline):

Code: Select all

<pre><!-- empty comment to force newline -->
X:0
T:Hello Scale!
K:C
CD EF GA Bc
</pre>


This works, and I can live with this.

However...when I update the HTML with the above, and save it in the editor, the above HTML gets saved. I load the resulting page in a seperate browser and it works perfectly. However, the CMSimple editor loads the page HTML and tries to execute the js. Something goes wrong and some dummy/error text is written, and so I no longer have access to the code I originally wrote.

This is the resulting output, for what it is worth:

http://callingthetune.co.uk/?Resources_ ... 29___Right
http://callingthetune.co.uk/?Resources_ ... 29___Wrong

Is it possible to dissuade the editor from trying to run the library somehow?

For what it's worth, I do not need a WYSIWYG editor and would be quite happy with a textbox to just edit the HTML. I see it is possible to disable the tinymce plugin - is this safe to do or will it simply cause me more problems?

Let me know if there's other information I can add to this.

Gert
Posts: 1099
Joined: Sun 18. Nov 2012, 14:18

Re: External Javascript causing editor problems

Postby Gert » Sat 14. Mar 2015, 19:35

Hello,

I fear, it's not so easy to make that script running in CMSimple or other CMS. It's made to work in xhtml files.

You should use it in xhtml files and add them to CMSimple pages with an iframe, you can use the plugin "MagicFrames":

http://www.ge-webdesign.de/plugindemo/?Plugin_Demo_Seiten___MagicFrames

Here is a demo:

http://www.ge-webdesign.de/plugindemo/?Plugin_Demo_Seiten___MagicFrames___iframedemo

Gert
Gert Ebersbach | CMSimple | Templates - Plugins - Services

Gert
Posts: 1099
Joined: Sun 18. Nov 2012, 14:18

Re: External Javascript causing editor problems

Postby Gert » Sat 14. Mar 2015, 20:09

Hello,

I have played a little bit - disabling the editor is not necessary. You have to prevent loading the scripts in edit mode:

Code: Select all

<?php 
if(!$edit)
{
echo '<script src="http://moinejf.free.fr/js/abc2svg-1.js" type="text/javascript"></script>
<script src="http://moinejf.free.fr/js/abcemb-1.js" type="text/javascript"></script>'
;
}
?>
</head>

Than you can use the sourcecode view to insert following:

Code: Select all

<pre><!-- empty comment to force newline -->
X:0
T:Hello Scale!
K:C
CD EF GA Bc
</pre>

Should work - Gert

PS:

Works here, without disabling editor:

http://www.ge-webdesign.de/kstb/cmsimpledev/?Test
Gert Ebersbach | CMSimple | Templates - Plugins - Services

Calum
Posts: 2
Joined: Sat 14. Mar 2015, 16:55

Re: External Javascript causing editor problems

Postby Calum » Sat 14. Mar 2015, 20:27

Thanks Gert,

It was suggested that I use a simple hack of only including the JS lines when I load the template in view mode:

Code: Select all

    <?php if (!($adm && $edit)):?>
    <script src="http://moinejf.free.fr/js/abc2svg-1.js" type="text/javascript"></script>
    <script src="http://moinejf.free.fr/js/abcemb-1.js" type="text/javascript"></script>
    <?php endif?>


This seems to work very well so I will run with it for now, and if I find problems later on I will try your iframe approach.

Thanks,
Calum

PS thanks for all your work on this system, it has been a great help to me.


Return to “CMSimple 4.0 and higher”

Who is online

Users browsing this forum: No registered users and 2 guests