In my admin panel i got tinymce textarea. I want to preview all my changes.
i get html from tinymce
$scope.text_in = tinymce.get('myTextAreaName').getContent();
and it looks like:
<h1 style="text-align: center;">AAA</h1>
<h3 style="text-align: center;">BBB</h3>
I'm using ngSanitize and my element where i want to inject HTML
<div class="new" ng-bind-html="text_in"></div>
Thats looks ok, BUT. I got html markup without inline styles. All other styles from css works fine.
When i inspecting element there are
<h1>AAA</h1>
<h3>BBB</h3>
What am i doing wrong?
According to Angular documentation you can by pass the sanitize.
http://docs.angularjs.org/api/ngSanitize.$sanitize
Related
You can customize the JqxScheduler's edit dialog by appending the existing containers in the editDialogCreate method like this:
var titleSelector = $(`
<div>
<div class='jqx-scheduler-edit-dialog-label'>Előadás</div>
<div class="jqx-scheduler-edit-dialog-field">
<div><v-select :options="options"></v-select></div>
</div>
</div>`);
fields.subjectContainer.append(titleSelector);
I understand that this HTML inside won't be rendered in my Vue file, but I cannot add the rendered this rendered version by copy-paste as far as I know:
<div data-v-0a61aa6a="" dir="auto" class="v-select vs--single vs--searchable">
<div id="vs1__combobox" role="combobox" aria-expanded="false" aria-owns="vs1__listbox" aria-
label="Search for option" class="vs__dropdown-toggle"><div class="vs__selected-options">
...
</div>
</div>
My question is: How can I render this HTML and add it to the dialog?
I am using webpack and vue-router.
PS: I have read about the Vue.Compile method, but if I am correct, I cannot use it here.
You have several options:
Iclude this code into your html markup and put v-if directive on it, to hide/show it if necessary: v-if docs
Also you can try to create separate component for your title selector with Vue.component('component-title', {...}), docs
I'm trying to implement Redcarpet Markdown in my Rails project.
I have a class 'camp-description' which styles the paragraph. My problem is that when I add the markdown() inside my ERB tag then the styles of camp-description is not applied anymore.
This is my code:
<div class="panel">
<h5>TRAINING CAMP PROGRAM</h5>
<p class="camp-description"><%= markdown(#camp.agenda) %></p>
</div>
The output html looks like this:
How do I make sure that the markdown stays inside the 'camp-description' class and hence keep applying its styles?
I am parsing the html from a site and I encountered this tag: <div data-alert class="alert-box success radius">
What attribute does 'data-alert' represent?
These are custom attributes new in HTML 5. See http://www.w3schools.com/tags/att_global_data.asp
Seems like the page you are talking about uses Foundation CSS framework:
http://foundation.zurb.com/docs/components/alert_boxes.html
See this page:
http://foundation.zurb.com/docs/components/alert_boxes.html
It's a div container that, according to the site, conforms to 100% of the container width you put them in.
I have recently started writing some server side code for our new bootstrap themed administrative site.
In the markup I can not find where/how/why bootstrap is adding random anchor tags to some of the HTML divisions.
Example from chrome developer tools below... these exist nowhere in the markup.
Is there a way to disable this?
How does it silently create these anchor tags?
What is the reason behind this?
Here is the html , it adds a partial view with Razor to render the body, but before that you can see where the anchor from the image above is not written.
<div class="page-content-wrapper">
<div class="page-content" style="overflow:auto;">
#RenderBody()
</div>
</div>
<!-- END CONTENT -->
so I have a strange request. I've been working on some security project for school, and I've been able to successfully inject some html code using a form on our test site. What's interesting is that it only accepts the html code as one line and with no spaces. This brings me to my question, so far I've only been able to get text and font color changes to work. But I want to see if someone could inject images/audio/video.
I'm trying to figure out how to turn this:
<img src="http://www.rtur.net/blog/image.axd?picture=2011%2F12%2Fcss.png"/>
Into this:
<imgsrc="http://www.rtur.net/blog/image.axd?picture=2011%2F12%2Fcss.png"/>
but add a space with code.
I've tried adding the but that only works with actualy text and not the tag itself. Any help is appreciated.
Interesting note: I was able to inject <font size="50" color="red"></font>
But I have no idea why that works but the image doesn't.
Have you tried the following?
A slash:
<img\ src="http://www.rtur.net/blog/image.axd?picture=2011%2F12%2Fcss.png"/>
Using a non-traditional closing tag:
<img src="http://www.rtur.net/blog/image.axd?picture=2011%2F12%2Fcss.png"></img>
Injecting a blank <img> tag:
<img src=""/>
Here's another solution: Try inline CSS:
<div style="background:url(http://www.rtur.net/blog/image.axd?picture=2011%2F12%2Fcss.png);height:400px;width:400px"></div>
See this fiddle: http://jsfiddle.net/9MYrM/