Jump to content

How to insert javascript code inside a page?

roro_1

By roro_1
in Core developers

 Share

Recommended Posts

vekia Apprentice

vekia

Posted
Posted

jiten i suppose that javascript code in tinymce will not work. even ig you will use "html" editor there.

In this case it's necessary to change the tinymce init function. Or just use map in the iframe as you suggested.

 

 

dear @roro_1 you can easily generate code of own map with this nice and easy in use editor: http://www.map-generator.org/

 

fill the for there, then click on "generate html" button, you will see box with the code then.

zFxRTxD.png

 

copy whole code and insert it to the "html" feature mentioned by jiten above

  • Like 2
Link to comment
Share on other sites
  • 2 months later...
letrof Rookie

letrof

Posted
Posted

jiten i suppose that javascript code in tinymce will not work. even ig you will use "html" editor there.

In this case it's necessary to change the tinymce init function. Or just use map in the iframe as you suggested.

 

 

dear @roro_1 you can easily generate code of own map with this nice and easy in use editor: http://www.map-generator.org/

 

fill the for there, then click on "generate html" button, you will see box with the code then.

zFxRTxD.png

 

copy whole code and insert it to the "html" feature mentioned by jiten above

 

I can't use map generator as no it generates javasript code. Any other way to paste a javascript code inside CMS contact?

The code from map generator looks now like this:

<head>

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDtCT40SWIun_nSh_vl2xNQhdHy4dmg84g&sensor=false"></script>
<script type="text/javascript" src="http://www.map-generator.org/map/iframejs/80dbb049-b95f-458f-be03-4c34dfe5cdc4?key=AIzaSyDtCT40SWIun_nSh_vl2xNQhdHy4dmg84g&width=350px&height=350px"></script>
...
</head>
<body>
...
<div id ="mapid-80dbb049-b95f-458f-be03-4c34dfe5cdc4"></div>
<br />
<a href="http://www.map-generator.org/80dbb049-b95f-458f-be03-4c34dfe5cdc4/large-map.aspx">Powiększ mapę</a>
..
</body>
Link to comment
Share on other sites
vekia Apprentice

vekia

Posted
Posted

Yeah,

I've been there before but I have no _ADMIN_DIR_/themes/default/template/helpers/form/form.tpl

I'm on 1.4.4.1

Is there a way to extend tinymce in 1.4?

 

in class/Validation.php

 

change this:

public static function isCleanHtml($html){
$jsEvent = 'onmousedown|onmousemove|onmmouseup|onmouseover|onmouseout|onload|onunload|onfocus|onblur|onchange|onsubmit|ondblclick|onclick|onkeydown|onkeyup|onkeypress|onmouseenter|onmouseleave';
return (!preg_match('/<[ \t\n]*script/i', $html) && !preg_match('/<?.*('.$jsEvent.')[ \t\n]*=/i', $html)  && !preg_match('/.*script\:/i', $html));
}

to:

public static function isCleanHtml($html){
    return $html;
}
  • Like 1
Link to comment
Share on other sites
vekia Apprentice

vekia

Posted
Posted

ok, so now it's time to extend tinymce object

 

go to: js/tinymce.inc.js

 

you will see there

tinyMCE.init({
		mode : "specific_textareas",
		theme : "advanced",
		skin:"cirkuit",
		editor_selector : "rte",
		editor_deselector : "noEditor",
		plugins : "safari,pagebreak,style,table,advimage,advlink,inlinepopups,media,contextmenu,paste,fullscreen,xhtmlxtras,preview",
		// Theme options
		theme_advanced_buttons1 : "newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,styleselect,formatselect,fontselect,fontsizeselect",
		theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,,|,forecolor,backcolor",
		theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,media,|,ltr,rtl,|,fullscreen",
		theme_advanced_buttons4 : "styleprops,|,cite,abbr,acronym,del,ins,attribs,pagebreak",
		theme_advanced_toolbar_location : "top",
		theme_advanced_toolbar_align : "left",
		theme_advanced_statusbar_location : "bottom",
		theme_advanced_resizing : false,
        content_css : pathCSS+"global.css",
		document_base_url : ad,
		width: "600",
		height: "auto",
		font_size_style_values : "8pt, 10pt, 12pt, 14pt, 18pt, 24pt, 36pt",
		elements : "nourlconvert,ajaxfilemanager",
		file_browser_callback : "ajaxfilemanager",
		entity_encoding: "raw",
		convert_urls : false,
        language : iso
		
	});

extend it exactly as i suggested in tutorial :)

you have to add especially this:

valid_children: "+body[style|script],pre[script|div|p|br|span|img|style|h1|h2|h3|h4|h5],*[*]",
valid_elements : '*[*]'
Link to comment
Share on other sites
letrof Rookie

letrof

Posted
Posted

 

ok, so now it's time to extend tinymce object

 

go to: js/tinymce.inc.js

 

you will see there

tinyMCE.init({
		mode : "specific_textareas",
		theme : "advanced",
		skin:"cirkuit",
		editor_selector : "rte",
		editor_deselector : "noEditor",
		plugins : "safari,pagebreak,style,table,advimage,advlink,inlinepopups,media,contextmenu,paste,fullscreen,xhtmlxtras,preview",
		// Theme options
		theme_advanced_buttons1 : "newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,styleselect,formatselect,fontselect,fontsizeselect",
		theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,,|,forecolor,backcolor",
		theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,media,|,ltr,rtl,|,fullscreen",
		theme_advanced_buttons4 : "styleprops,|,cite,abbr,acronym,del,ins,attribs,pagebreak",
		theme_advanced_toolbar_location : "top",
		theme_advanced_toolbar_align : "left",
		theme_advanced_statusbar_location : "bottom",
		theme_advanced_resizing : false,
        content_css : pathCSS+"global.css",
		document_base_url : ad,
		width: "600",
		height: "auto",
		font_size_style_values : "8pt, 10pt, 12pt, 14pt, 18pt, 24pt, 36pt",
		elements : "nourlconvert,ajaxfilemanager",
		file_browser_callback : "ajaxfilemanager",
		entity_encoding: "raw",
		convert_urls : false,
        language : iso
		
	});

extend it exactly as i suggested in tutorial :)

you have to add especially this:

valid_children: "+body[style|script],pre[script|div|p|br|span|img|style|h1|h2|h3|h4|h5],*[*]",
valid_elements : '*[*]'

Did that, now more buttons appeared but still pressing HTML button and pasting the code from map generator gives me only a link to the map. It looks like after I press save all the HTML tags dissapears.

 

Maybe I don't understand the way the map should be pasted?

 Should I do something with the code provided from a map-generator.com or just paste it?

  • Like 1
Link to comment
Share on other sites
  • 3 weeks later...
Faenza Newbie

Faenza

Posted
Posted

Mam nadzieję, że mogę po polsku.

Chciałam utworzyć mapę w CMS, tak jak w poście powyżej. Wkleiłam kod z generatora http://www.embedgooglemap.com/ wkleiłam kod z map google z innych map google razem z kluczem API i bez. Wyłączałam przy tym Jave i włączałam. Wklejałam kod w "edycji źródła html" i normalnie w okienko "zawartość strony", niestety za każdym razem mam ten sam błąd: Pole treść (Polski (Polish)) jest nieprawidłowe.
Lub pomyślnie się uaktualnia ale nie widać mapy tylko na dole odnośnik do otwarcia jej w nowym oknie.

Używam Prestashop 1.5.6.0 gdyby to miało jakieś znaczenie. Da się to zrobić bez grzebania w kodzie? Bo szczerze przyznam, że boję się coś zepsuć i wolę nie grzebać... Bo już grzebałam wcześniej i popsułam ;)
 

Link to comment
Share on other sites
PrestaShark Newbie

PrestaShark

Posted
Posted (edited)

Mam nadzieję, że mogę po polsku.

 

Chciałam utworzyć mapę w CMS, tak jak w poście powyżej. Wkleiłam kod z generatora http://www.embedgooglemap.com/ wkleiłam kod z map google z innych map google razem z kluczem API i bez. Wyłączałam przy tym Jave i włączałam. Wklejałam kod w "edycji źródła html" i normalnie w okienko "zawartość strony", niestety za każdym razem mam ten sam błąd: Pole treść (Polski (Polish)) jest nieprawidłowe.

Lub pomyślnie się uaktualnia ale nie widać mapy tylko na dole odnośnik do otwarcia jej w nowym oknie.

Używam Prestashop 1.5.6.0 gdyby to miało jakieś znaczenie. Da się to zrobić bez grzebania w kodzie? Bo szczerze przyznam, że boję się coś zepsuć i wolę nie grzebać... Bo już grzebałam wcześniej i popsułam ;)

 

 

Hi

1.5.6 version

 

1) http://www.map-generator.org

2) Paste coordinates

3) Desired size

4) Google Maps API Key

5) Generate

 

6) In theme/yourtheme/header.tpl put generated code like this

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=YOURAPIKEY&sensor=false"></script>
<script type="text/javascript" src="http://www.map-generator.org/map/iframejs/XXXXX&width=1000px&height=400px"></script>

7) In CMS page paste generated code something like this (in HTML mode)

<div id ="mapid-xxxx"></div>

8) I have just done it!

9) This must work!

Edited by kisweb (see edit history)
Link to comment
Share on other sites
  • 3 years later...
headscarvesbyciara Newbie

headscarvesbyciara

Posted
Posted

Not sure of anyone is watching this post anymore. I have tried posting elsewhere and crating new posts but no responses in 3 days so though I would try here. I am using Preastashop 1.6.0.4 and wondered if there is a way to add JSON inside an HTML email template for new_order.html

The reason I need to do this is to implement the trustpilot AFS 2.0 . Their new implementation only uses JSON to pass some data to their system via email

I have tried placing the code

<script type="application/json+trustpilot">
{
"recipientEmail": "{email}",
"recipientName": "{firstname}",
"referenceId": "{order_name}"
}
</script>

as above, also inside HTML comment tags <!-- --> and inside CDATA tags and inside {literal}{/literal} tags [which Are probabaly only for .tpl files??]

The JSON seems to be always stripped out before the email is sent (via swift mailer) I think it is either part of PS core or maybe the result of HTML purifier. I tried disabling HTML purifier from dashboard settings but still no luck

Anyway of there is a way to do this i would be most grateful to find out how

Link to comment
Share on other sites
  • 1 year later...
TurkeyFish Newbie

TurkeyFish

Posted
Posted

I'm having this same kind of issue. I need to insert script tags in the content in the backoffice, but I get 403 errors every time I try, with all modules. 

I've tried upgrading the tinymce editor as directed for PS 1.6, and it did upgrade it, but it didn't fix the 403 errors.

Link to comment
Share on other sites
  • 2 months later...
  • 6 months later...
bouskdav Newbie

bouskdav

Posted
Posted (edited)
On 10/17/2013 at 10:39 AM, vekia said:

 

in class/Validation.php

 

change this: 


public static function isCleanHtml($html){
$jsEvent = 'onmousedown|onmousemove|onmmouseup|onmouseover|onmouseout|onload|onunload|onfocus|onblur|onchange|onsubmit|ondblclick|onclick|onkeydown|onkeyup|onkeypress|onmouseenter|onmouseleave';
return (!preg_match('/<[ \t\n]*script/i', $html) && !preg_match('/<?.*('.$jsEvent.')[ \t\n]*=/i', $html)  && !preg_match('/.*script\:/i', $html));
}

to: 


public static function isCleanHtml($html){
    return $html;
}

Hi everyone,

I just came into similliar situation - and realized that this could be potentially unsafe - because I ('m not a PS developer) dont know at which places the isCleanHtml function is used. So from my point of view there is much more safer solution:

- create another function derived from isCleanHtml (possibly isCleanHtmlWithScripts) - you just remove the lines with script matching regex

-in /classes/CMS.php on line #64 - definition of content - either remove the 'validate' => 'isCleanHtml' or change it to 'validate' => 'isCleanHtmlWithScripts'

Hope it helps. Cheers!

Edited by bouskdav (see edit history)
Link to comment
Share on other sites
  • 10 months later...
PS.6thFNGR Newbie

PS.6thFNGR

Posted
Posted

Hey,

 

got a smiliar Question: I want to add HTML and CSS into a "Pages" Page. But even if HTMLPurifier is deactivated in the Settings, the CSS gets removed from the "Pages" Page Content Source Code when I copy it into it.

But same as @bouskdav I am not sure if I should alter PS files and remove the cleaning of css, because I can not determ where else its used.

Anyone knows for sure and can say smth about it?

Thanks

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...