Prevent Rails from escaping saved html to database - ruby-on-rails-3

I'm trying to save the following inside a textarea to one of my models:
<iframe width="560" height="315" src="http://www.youtube.com/watch?v=Ar7PxP76o28" frameborder="0" allowfullscreen></iframe>
However this is what it actually ends up saving:
<iframe width=\"560\" \r\nheight=\"315\" src=\"http://www.youtube.com/watch?v=Ar7PxP76o28\" \r\nframeborder=\"0\" allowfullscreen></iframe>
Is there any way I can prevent it from escaping the html? I'm trying to render a youtube embeded video inside of the show view using the following code:
= #foo.content.html_safe
However the html_safe helper doesn't seem to work if the html is escaped like this. I also tried swapping out html_safe with a raw wrapper but that didn't seem to work either.

As Zabba suggested there was actually a third-party involved that was causing this issue and not Rails itself. In my case I was using the Aloha WYSIWYG editor which was sanitizing any custom HTML that I added to my form without my permission.

Related

jquery featherlight on dynamic content from DataTalbes

I am using jquery featherlight (https://github.com/noelboss/featherlight) after trying to get jquery lightbox (https://lokeshdhakar.com/projects/lightbox2/) to work. I am using DataTables to generate a list. One of the items in the table is a link to a php page that returns links. The problem is I am calling an external PHP page that generates a list of links. So my link code is like this:
<i class="fas fa-link fa-lg"></i>
The page "lenker.php" does a search and outputs html code. It looks fine in the chrome inspector. But the popup is empty. If I link to another page with the code hardcoded it shows fine. Why does it not show when it is generated on the fly? The html code looks just fine like this:
<div><a class="external" href="http://databank.artsdatabanken.no/FremmedArt2012/N63753" data-featherlight="ajax">fremmedartsvurdering 2012 for edelgran</a></div>
<div><a class="external" href="http://eol.org/pages/1033070" data-featherlight="ajax">edelgran hos Encyclopedia of Life</a></div>
<div><a class="external" href="http://linnaeus.nrm.se/flora/barr/pina/abies/abiealb.html" data-featherlight="ajax">edelgran i Virtuella floran, Sverige</a></div>
but the popup opens and then resizes to almost nothing since there is no content. Featherlight does not need any other initialization since it looks for data-featherlight="ajax".
Is the problem that datatable is dynamic content?
jQuery ajax expects one object so I solved this with enclosing my content in one DIV.

how to properly embed a JW Player script into VueJS?

I'm new to VueJS and trying to setup a simple page and embed a script to play HLS video using JW Player the script provided by JW Player dashboard <script src="https://cdn.jwplayer.com/players/4oE5ZjIY-MoGLPkuA.js"></script>
What would be the proper way to embed that script into .vue file
Knowing .vue files should have template, script and style elements and my understanding is it has to go inside script as a part of data but I'm quite confused on how I would do that and call it inside the template to view it in the browser??
Any help would be appreciated
As you've discovered, <script> tags cannot be embedded in Vue.js. However, <iframe> is a valid tag. The JW Platform allows for you to embed videos via a script tag OR an iframe tag.
Change this:
<script src="https://cdn.jwplayer.com/players/4oE5ZjIY-MoGLPkuA.js"></script>
Into this:
<iframe src="https://cdn.jwplayer.com/players/4oE5ZjIY-MoGLPkuA.html"></iframe>
Notice that the .js changes into .html and script changes into iframe
You may need to customize the iframe to fit your usage properly, some reference docs for how to do that can be found here.

DHTML - Change text on page using input field

I need to create a code to change an example text to a user-defined value when the user types in an input field (Similar to the preview field when writing a question on Stack Overflow).
This needs to be achieved without the use of HTML5 or Flash as the users will be running IE8, not all will have Flash plug-ins installed.
As such I have started by looking at DHTML to achieve the desired effect. Currently I can change the example text when a user types in the input field but only to a pre-defined value ("Example" in the code below), how should I edit this code to display the user-defined value?
JS
function changetext(id)
{
id.innerHTML="Example";
}
HTML
<form>
Content:<input type="text" id="input" onkeyup="changetext(preview)" />
</form>
<p id="preview">No content found</p>
You need to have something like this in the function:
function changetext(id){
var info = document.getElementById('input').value();
id.innerHTML = info;
}
This js is not fully correct. I would highly recommend you start using a javascript library like jQuery. It makes this a menial task.
Edited:
jQuery will work in IE8 just fine. in jQuery you will not need to attach js to your input. The code would look like this.
$('#input').click(function(){
$('#preview).html(this.val());
});
It is a lot cleaner and doesnt have js in the html.

Rails partial template using a custom handler is escaping html

I'm working on a Rails 3.1 app using JavascriptMVC and ejs templates within the client to do some complicated features on my application. Unfortunately ejs syntax is very similar to erb syntax, to the point where I can't keep the code in the same file (although if someone knows of a good way to do this, I'd be ecstatic). Ultimately I want to be able to apply some rails code within the ejs template (say for I18n) but at this point I will just settle for getting this to work
Following the example from this question I have created a custom template handler that looks like this:
module CommonModel
class Handler < ActionView::Template::Handler
include ActionView::Template::Handlers::Compilable
def compile(template)
template.source.inspect
end
end
end
ActionView::Template.register_template_handler :ejs, CommonModel::Handler
Then I created a partial template that has my ejs code in it:
_jmvc_templates.html.ejs
<script type="text/ejs" id="my_ejs_template">
<div>Some ejs here</div>
</script>
Within my existing template, I attempt to include my partial:
<%= render 'path/to/my/ejs/templates/jmvc_templates' %>
At this point, the file is included and my handler is used, but everything is escaped, so my div in my template gets rendered to the page like this:
<div%gt;
I'm sure I'm missing something obvious here, but I don't know what it could be... How can I get this template handler to just include my ejs based template without escaping all of the html in it?
Edit:
I've found that calling render with html_safe works:
<%= render('path/to/my/ejs/templates/jmvc_templates').html_safe %>
This seems like a kludge though - there has to be a way to get the erb renderer to treat text from my handler as html safe text.
Maybee you should be using raw. Check this
def compile(template)
raw template.source.inspect
end

How can I make the HTML5 iframe seamless attribute work within my Rails 3 app?

I've setup my Rails 3 app with only
<%= yield %>
in the application.html.erb and pages.html.erb layout files (Pages is my controller), and I have a view with only the following:
<!DOCTYPE html>
<html>
<title>My Title</title>
<body>
<iframe src="http://myiframesource.com" seamless="seamless" width="100%" height="1949px"></iframe>
</body>
</html>
But the iframe still has a border around it and does not completely fill the page when I look at it in my browser (I tried several). According to W3Schools http://www.w3schools.com/html5/att_iframe_seamless.asp
the seamless attribute should have no borders nor scrollbars and " should look like it is part of the parent document."
I'd also like to not have to tell the iframe what width/height to be, and just have it take up as much space as it needs.
Why does the seamless attribute seem to not be working right?
That's probably because your browser doesn't support seamless iframes. As far as I know it doesn't work in either Firefox 4 or Google Chromium 11, you'll have to wait until someone actually implements it. As for the iframe taking as much space as it needs I don't think that there is currently a way to do this without JavaScript. For a JavaScript solution just search the web, there are several tutorials about this.