Is it possible to inject a HTML, CSS and JavaScript into a block in EPIServer?
I tried to add some HTML and it disappear after saving.
I do not have development access to the CMS but only as a Editor.
In the case a developer have implemented and configured TinyMCEPluginNonVisual it would be possible. Otherwise no.
Allow custom HTML attributes in TinyMCE in EPiServer
Related
I'm making a script to preview email templates so I'm getting a full HTML page (with ) and I'm willing to make a popup with this page.
I'm getting the result from an API that gave me the full code inside a variable.
How to display this page inside my app without surcharging the styles ?
Thank you
Ps: I can't use an iframe since I can't get the preview from a simple get query (without header)
You can try one of these options (all of them have drawbacks)
ng-bind-html (AngualrJS directive) - doesn't provide styles encapsulation
iFrame - provides styles encapsulation, browser compatibility is not a problem. Still, you may need to set up or adjust your CSP policies if you are worried about security or have it already in place.
Shadow DOM - provides styles encapsulation, but you need to make sure it fits your supported browsers, and it's quite tricky to implement for AngularJS
UPD: based on your recent update, I guess you can proceed with ng-bind-html directive (HTML content will be sanitized, but you will have to cope with styles intersection and head & body tags warnings). If it doesn't work - try iFrame based on the approach referenced above (you don't need to make any external queries/requests for that).
iframe is the tag which you can use for call other html pages into your web page
<iframe src="http://www.page.com" name="targetframe" allowTransparency="true" scrolling="no" frameborder="0" >
</iframe>
I have a content slot in which I need to add custom css file from Business Manager. I want to add the custom file in the head section. Is there any way by which I can do it?
I tried adding a custom css file in Content Asset and linked that asset to Content slot but it was not working.
This functionality exists for Content Assets as a customization to the Page-Show controller in older Site Genesis reference applications and sites. Unfortunately, if you want to do this via a Slot, you'll need to have some JavaScript execute to inject the CSS into the head of the page from either the slot configuration rendering template or from within the slot content itself. Slots are loaded and rendered by the Web Adapter layer which sits between the Internet and the Application Servers. This all happens after the rest of the page is rendered by the App Server.
Also, at this point, I'd consider using Page Designer components instead. Page Designer is expected to be globally available sometime this month. That said, if you need all the features of Slots, PD is not yet at feature parity with Slots. (In terms of scheduling, targeting groups of customers, etc)
We simply bake style tag into the body of the content asset or content slot (content type - HTML). You are not gaining much by having a style tag in the head of the page. Having style tag inside your div makes your markup less valid but none of the browsers even old IE will complain about it.
<style>
p{color: pink;}
</style>
The use of Custom CSS File in content asset and link asset to your slot should have worked may I know what was the error you were facing with this approach?
I need to add Call tracking for a Marketing campaign on my site that is currently housed in Joomla. It requires a certain script to be added inside the <body> tag only on designated pages.
I know I can add the script tag to the template but that would make it apply to every page. I am still new to Joomla, so can you tell me if there's a way to apply the script below to only the pages we want to track calls from? It needs to go before the </body> tag.
<script type="text/javascript" src="//cdn.callrail.com/companies/808848127/e001797b95eaf41026e7/12/swap.js"></script>
The easiest way to add a script to selected pages is to use an extension such as the professional version of the EasyScript plugin, the Flexi Custom Code module or similar.
It looks like you could also do this with Blank Module which is free. Publish the module to a non-display module position such as "debug" or similar and enable the module only on the required pages by selecting these under the Menu Assignment tab.
I made a little chrome extension with angularjs and bootstrap. I have a alert like this:
<div class="alert alert-danger" role="alert" ng-show="errorMailZR">error</div>
and in angularjs controller :
$scope.errorMailZR = false;
i put it to false because i see the alert by default, it's not hidden :/ but in single web page when i go on it with browser, everything is ok. So, what i need for it's works in chrome extension ?
ng-show="false" doesn't work too in chrome extension...
UPDATE:
https://docs.angularjs.org/api/ng/directive/ngCsp#!
In order to run angular on an extension page, you have to use the ng-csp directive, or satisfy the ng-csp policies. I'm assuming you've done this, or nothing would be working at all.
Doing so turns off inline style insertion, this line in particular in angular.js (showing for reference, not for modification!):
!window.angular.$$csp().noInlineStyle && window.angular.element(document.head).prepend('<style type="text/css">#charset "UTF-8";[ng\\:cloak],[ng-cloak],[data-ng-cloak],[x-ng-cloak],.ng-cloak,.x-ng-cloak,.ng-hide:not(.ng-hide-animate){display:none !important;}ng\\:form{display:block;}.ng-animate-shim{visibility:hidden;}.ng-anchor{position:absolute;}</style>');
To get directives that rely on classes like ng-hide, ng-animate, ng-cloak, to work, manually link to the classes using:
<link rel="stylesheet" href="path/to/angular/angular-csp.css">
That's all there is to it.
OLD HACKY STUFF
Immediate fix, add this to your document head:
<style type="text/css">#charset "UTF-8";[ng\:cloak],[ng-cloak],[data-ng-cloak],[x-ng-cloak],.ng-cloak,.x-ng-cloak,.ng-hide:not(.ng-hide-animate){display:none !important;}ng\:form{display:block;}.ng-animate-shim{visibility:hidden;}.ng-anchor{position:absolute;}</style>
Ng-show and hide work by angular adding the class ng-hide to items that are hidden and removing it when they are shown.
Why doesn't it work in extensions?
Good question. For whatever reason (will update when I find the reason) chrome extensions prevent that style tag from being added to the head. It's probably some kind of security thingy, and there's probably a way to turn off that security bit, I'll update when I find out more.
You can debug chrome extension in chrome, just click right on extension popup. my guess is that angularjs isn't loaded or bootstraped in your extension, from my experience you should rather load angular from local files rather than CDN
I am using the Routing and Multiple Views feature of AngularJS but I don't see the HTML partial file (or the embedded Javascript) in Chrome's "Sources" tab of the Developer Tools.
In my index.html file, it includes all the tags for AngularJS, jQuery and Bootstrap along with my custom app/controller Javascript file. These files all appear in the Sources tab.
My application works correctly. As I click around between the links on the page, the partial HTML files are loaded and displayed and the files are listed in the Network tab.
The problem is that the partial HTML files do not appear in the Sources tab. How can I debug the Javascript in those partial files?
It looks like the closest thing to a debugger is Zone.js from the Angular team, especially since it will be built right into AngularJS in the future.
This means adding some more code, but the benefits seem to outweigh the cost.