TinyMCE inline mode showing raw HTML rather than formatted output - asp.net-mvc

I'm attempting to use the inline mode of TinyMCE with an MVC 5 page. I created the HTML content using a TinyMCE editor in the standard mode as follows:
That data is saved back to the database and then retrieved and displayed on a different page. On that page I've set up an instance of TinyMCE to display that content in the inline view as follows:
<div id="myeditablediv">#Model.LongDescription</div>
<script src="~/scripts/tinymce/tinymce.min.js"></script>
<script type="text/javascript">
tinymce.init({
selector: '#myeditablediv',
entity_encoding: 'raw',
inline: true
});
</script>
I'd expected that to show the formatted HTML in a clickable TinyMCE control with no toolbars, but instead it's just showing the raw HTML:
Clicking on the control does switch it into edit mode and the toolbar appears etc:
so it looks like I'm not passing the data to be rendered to the control correctly when setting up the div with <div id="myeditablediv">#Model.LongDescription</div>?

I am guessing that your code is escaping the HTML when inserting it back into the page. I don't know ASP.NET but there is likely something you can do to #Model.LongDescription to have it place the raw HTML into the page.
A quick google search suggest this might be the answer:
#Html.Raw(#Model.LongDescription)

Related

Is it possible to get the html produced by a script

I have a URL from a third party site which should be the source of a script tag, something like this:
<script src="<%= #url %>"></script>
The above code shows a webform.
I would like to get the html code resulted by that code and store into a variable, something like this :
html_code = get_html('<script src="<%= #url %>"></script>')
Is that possible using Ruby/Rails (maybe using nokogiri) ?
If you're using jQuery in the browser and that code shows up in a well defined location, for example a <div> with a specific id then you can just grab it using your browser's JavaScript console:
$('#the_id').html()
That will show the raw HTML of that element presuming it dumps its content in an element with the ID the_id. You can use whatever CSS selector works.
Where that HTML goes in your document is impossible to tell from your example. A <script> can add any elements it wants anywhere in your document. You'll have to look around to see where it goes.
Load the page into a browser and then do View/Source in the browser. This will let you view the generated web page and you can find what URL was put into the <script> tag.

escape html twice in Rails

I am using Bootstrap tooltips for displaying user generated content. But i also use the option html: true because I want to enable html in the tooltip to be able to use some formatting.
Let's say i have a user content as follows:
<script>alert('e')</script>
It is escaped server side, put into the title attribute of some div, and sent to the browser like this:
<div title="<script>alert('e')</script>">Bla</div>
But the browser will unescape the html entities, and when i call the tooltip function on the div, it will have the following title attribute value:
<div title="<script>alert('e')</script>">Bla</div>
Which will cause the alert to be fired. So what I would need is to escape the content of the title attribute twice, so that it's sent like this:
<div title="&lt;script&gt;alert('e')&lt;/script&gt;">Bla</div>
And when tooltip is called, it would still look like this:
<div title="<script>alert('e')</script>">Bla</div>
So the alert would not be executed.
What is the proper way to do this in Rails? Is there something I am missing here? Please don't tell me to use the option html: false of the tooltip module as I need html formatting.
I would try for HTML:
<div title="<%= escape_javascript("<script>alert(\"e\");</script>") %>">Bla</div>
However I wonder why you want to allow users to inject script tags into the tooltips?

tweet button inside jquery template

I want to integrate tweet button inside a jquery template. Am trying the 'tweet button with javascript' (link). But my html template shows only link, it does not show the button. I tried the anchor tag outside the jquery-templ script. Then it is working fine. I am confused why this is not working inside jquery-tmpl.
code look like follows:
<script type="text/x-jquery-tmpl">
Tweet
</script>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s) [0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="http://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
Any suggestions?
Because the closing </script> tag is not parsed correctly by the browser.
You could write </scr{{= ""}}ipt> instead...
The point is, that browsers don't understand nesting of <script> tags, so whenever it parses a </script>, it closes the outermost script tag. Therefore, the closing </script> tag is matched to the template script.
You can trick the browser into ignoring the script tag, by adding the {{= ""}}, which will be used by the template engine to generate an empty string. </scr{{= ""}}ipt> will result in </script>, after templating.

Embedded HTML code being displayed rather than HTML being rendered

I am trying to use the calendar gem in my project (https://github.com/elevation/event_calendar). But when I open the calendar page, it renders the page by showing the html code of the calendar rather than rendering the html. Basically the source for the page generate is like
<div class="ec-calendar">
instead of
.
Can anyone let me know what is going on and how to resolve it.
I assume you are using Rails 3? As a security measure against XSS (Cross Site Scripting), Rails 3 renders html inside of strings as text. If you know the html in your string is safe, call html_safe on it, like
'<div class="ec-calendar">'.html_safe
or
raw '<div class="ec-calendar">'
html_safe I believe, is preferred over raw. Not sure what's different behind the scenes, if anything.

Tinymce Model Binding with ASP.NET MVC

Does anyone know how to auto-populate the tinymce editor from the ASP.NET MVC model? In other words, what code do I need to use to set the contents of tinymce?
EDITED:
My problem is that tinyMCE is hiding my textbox contents. It opens blank, even though if I view the source of the page in my browser, it shows the correct info (i.e. from the Model).
Here is my code:
Javascript:
<script type="text/javascript">
tinyMCE.init({
theme: "advanced",
mode: "textareas",
plugins: "",
theme_advanced_buttons3_add: "fullpage",
theme_advanced_toolbar_location: "top"
}
);
</script>
Text Area:
<%= Html.TextArea("PostContent", Model.PostContent,30, 68, new {id="newPost"}) %>
Thanks,
Jack
<textarea><%= Model.TextAreaContent %></textarea>
Please note that since you cannot escape the contents of your string (you need proper HTML elements for TinyMCE) you have to be sure that there's nothing nasty within your string. I'm using the HTML Agility Pack to prefilter the contents before putting it into the page.

Resources