External Javascript causing editor problems

Questions about how to use the online - editors and suggestions how to improve them
Post Reply
Calum
Posts: 2
Joined: Sat Mar 14, 2015 1:35 pm

External Javascript causing editor problems

Post by Calum » Sat Mar 14, 2015 5:33 pm

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.

cmb
Posts: 14225
Joined: Tue Jun 21, 2011 11:04 am
Location: Bingen, RLP, DE
Contact:

Re: External Javascript causing editor problems

Post by cmb » Sat Mar 14, 2015 6:03 pm

Calum wrote:I found a Javascript library that does exactly what I need:

http://moinejf.free.fr/js/index.html
Interesting. I have not been aware that there is a standard textual musical notation (and there seem to be even several). Thanks. :)
Calum wrote: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.
Well, a simple solution might be to include the JavaScript library only in view mode, but not in edit 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?>
Calum wrote:Firstly, when I edit the HTML the editor starts messing around with the code, so the above gets saved as this:
[...]
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):
[...]
This works, and I can live with this.
TinyMCE has a config option protect. I suppose this is suitable to prohibit the editor to mess around with the musical notation. How to change the configuration of TinyMCE in CMSimple_XH is described on http://www.cmsimple-xh.org/wiki/doku.ph ... tomization (work identical in CMSimple 4.x).

However, personally I would prefer a PHP based solution, because not everybody has JavaScript available/enabled. I couldn't find a readily available script, though.

PS:
Calum wrote: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?
No, that is supposed to work fine -- just leave Editor -> External blank in the CMS configuration. There is also Codeeditor_XH which offers some advanced features for editing the HTML directly (I'm using it myself), but it requires CMSimple_XH 1.6+.
Christoph M. Becker – Plugins for CMSimple_XH

Calum
Posts: 2
Joined: Sat Mar 14, 2015 1:35 pm

Re: External Javascript causing editor problems

Post by Calum » Sat Mar 14, 2015 7:24 pm

Thank you VERY much. You have solved my problem(s) entirely, much appreciated. I had not even realised there was a distinction between CMSimple and CMSimple_XH...
cmb wrote:I have not been aware that there is a standard textual musical notation
Yes, there are a few. This one, abc, is very good for simple Western music, especially folk music (and, crucially, bagpipe music!), and is used by several different tools. Lilypond is another option for more complex scores and has very good output as well.
Well, a simple solution might be to include the JavaScript library only in view mode, but not in edit mode:
This solved my problem entirely. If I run into formatting problems I will disable TinyMCE and just work with the HTML but it all looks good :) Many thanks again.

cmb
Posts: 14225
Joined: Tue Jun 21, 2011 11:04 am
Location: Bingen, RLP, DE
Contact:

Re: External Javascript causing editor problems

Post by cmb » Sat Mar 14, 2015 7:32 pm

Calum wrote:Thank you VERY much. You have solved my problem(s) entirely, much appreciated.
Fine. :)
Calum wrote:I had not even realised there was a distinction between CMSimple and CMSimple_XH...
Well, there is, and there's an even greater distinction between CMSimple >= 4.0.0 and < 4.0.0. It's a long story...
Calum wrote:Yes, there are a few. This one, abc, is very good for simple Western music, especially folk music (and, crucially, bagpipe music!), and is used by several different tools. Lilypond is another option for more complex scores and has very good output as well.
Ah, thanks for the explanation. :)
Christoph M. Becker – Plugins for CMSimple_XH

Post Reply