How to show preview of an html document within an ember app - ember.js

How to show an html document within ember template without affecting the css styles of ember app ?
The html document has a style tag which conflicts with the css of ember application.

Got a workaround using YUI css reset.
href="http://yui.yahooapis.com/3.18.1/build/cssreset-context/cssreset-context-min.css">
<div class="yui3-cssreset"></div>

Related

Django CMS CSS styling

so I’m working with Django and I’m trying to figure out how in the edit the CSS using nothing but Django CMS?
Is there a way?
Anything would be helpful.
Django CMS does not have any inline editing features of CSS or any other markup. This is by design and it is not something like Wordpress.
To edit CSS you will need to create your own css files as part of your project.
If you need to add eg an HTML or CSS snippet into a page, there's an offical plugin for that 👌 - https://github.com/django-cms/djangocms-snippet
And as #Aiky30 said, the global CSS code is better to place in static in accordance with django best practices.

Does Django render JS on server side?

I know that Django has default config of SSR (server-side rendering) but all the articles I have gone through mention that the Django-forms are rendered on server side and then sent to the browser. No specific information on the use case when javascript is mixed in the template.
I want to know if I use jquery tables in my Django template. Does that still render on server side? If yes then how does it render Javascript/jquery on the server-side?
I'd be glad if someone corrects me if my question itself has invalid argument.
JavaScript is for browsers so it doesn't matter if you write it in your template or add a link to it. The only way to render JS on the server-side is to actually have an engine doing that for you which Django doesn't.
What Django's template engine does is it will render the template based on the tags and HTML you provided and sends a valid HTML to the user containing the js code or js files alongside CSS and then browser runs those js and CSS codes and renders the final webpage.

TinyMCE Python Flask Script Tag Issue

So I'm in the process of creating a flask application which utilises both CodeMirror and TinyMCE as a Rich Text Editor to render any HTML/CSS input.
The user's code is entered in CodeMirror, and using a Post Request, the input from CodeMirror is sent to the TinyMCE StringField. I've been able to implement this fine for standard HTML and CSS however I've been having some issues with script tags. The script tags in TinyMCE are being changed from
<script>
</script>
to
<script type='mce-no/type'>
</script>
This stops the javascript from being rendered in TinyMCE, and I was wondering if there was any solution for this issue in Flask?
You would only see that if you get the "raw" content from TinyMCE using its getContent({format: 'raw'}) API call. If you use the normal getContent() API call you won't see that odd type value.
TinyMCE won't execute JavaScript during an editing session.

The file application.hbs is the main template in ember js?

I don't understand how it works !? The template application.hbs appear first on every page that I create.
The container has a div#ember365 how is created and were?
The application.hbs is the template rendered and contains a {{yield}} tag. Ember is a Single Page Application (SPA) so the template doesnt reload on clicks. Instead whats inside dynamically changes similar like you would see in jquery partial page updates. Everything is rendered in that template. You should be nesting in that components or other routes. Other routes will appear in your {{yield}} tag.
docs: https://guides.emberjs.com/v2.2.0/templates/handlebars-basics/
in the docs, make sure youre looking at the same version as the version of ember youre working with.

In Ember, should I put my theme layout in application.hbs or index.html?

I started working on Ember js using ember-cli and I want to migrate an existing code written in html, jquery and css. I am not sure if its best to put it in the index.html or application.hbs ?
Probably your application.hbs file. As mentioned in the Ember CLI guide, the index.html file is mostly for addons to inject their scripts. You don't need to go that route though. You can manage your legacy Javascript and CSS using the Broccoli asset pipeline and you can put any legacy/common HTML in your application.hbs file.
It's best to put your code in application.hbs, except of tags which need to be put in <head> tag.
You can see that in index.html you have HTMLBars expression:
{{content-for 'body'}}
It's where your generated HTML application code is put, but first, it's wrapped in ember wrapper div, inside of which your application events are handled.
Imagine that you have put one of your divs in index.html - let's call it .main-div, then - in application.hbs - you've put code which has some Ember logic(so you can't put it in index.html too). Now, imagine you write CSS code to target one of children of .main-div. You target it like this in your CSS: .main-div > .dynamic-div, but it won't work. Why? Ember wrapped contents of application.hbs in its div and it's one level down. That's why it would be against developer intuition to put application HTML code in index.html - it could bite you if you forget that you have one layer more of Ember code even if in your editor you see it should be straight: .main-div > .dynamic-div.
Example of Ember.js wrapper div:
<div id="ember463" class="ember-view">