The options that i am aware of are,
Get the content of the quilljs from getContents api which gives the JSON structure. I can post this to server and store it in server.
Get the innerHTML of the div which is passed to Quill editor and store it.
Approach 1:
While displaying it back I need to write the content in my buffalo template in a variable like
<script> var contentJSON = "<%= content %>"</script>
Then once the page loaded I need to set the contents like quillInstance.setContents(contentJSON)
Approach 2:
Incase the request is compromised then the html may contain scripts unescaped. So if I try like this
c.Set("getContent", func(content string) template.HTML {
return template.HTML(html.EscapeString(content))
})
This escapes all the html entities. So all the div, styles introduced by quill js also gone with this. So the whole content looks just like a plain string.
Whats the right approach in storing the content? I am looking for a way to get this rendered in the server.
Finally i end with the following,
Helpers: render.Helpers{
"quil_for": func(content string) template.HTML {
content = strings.ReplaceAll(content, "<script>", "<script>")
content = strings.ReplaceAll(content, "<a>", "<a>")
content = strings.ReplaceAll(content, "</a>", "</a>")
content = strings.ReplaceAll(content, "</script>", "</script>")
return template.HTML(content)
},
},
instead of this
c.Set("getContent", func(content string) template.HTML {
return template.HTML(html.EscapeString(content))
})
This escapes only the script and the anchor tag and the res of html as it is.
Related
I have some angular expressions that contain data coming from a database. Some of this data contain HTML tags in the database and should be decoded as such in the HTML.
Javascript function:
vm.showTechnicalSupport = function () {
$http.get('Navigation/GetTechSupportInformation').success(function (data) {
vm.techSupportHours = data.techSupportHours;
})
}
HTML:
<span>{{ vm.techSupportHours}}</span>
The problem is techSupportHours is displaying raw HTML tags instead of rendering markup.
For example, there are br tags being displayed visibly on the page. Is there a way to modify my angular expression to decode this data?
There is a directive called ng-bind-html which is what you are looking for.
So just change your html template to be:
<span ng-bind-html="vm.techSupportHours"></span>
I have a file which contains lots of tags like follows
<script type="text/template" id="template-1">
</script>
<script type="text/template" id="template-2">
</script>
I want to load the file and than load all the content inside the script tags in memory.
I am trying the below code but its not working.
tpl = {
// Hash of preloaded templates for the app
templates : {},
loadTemplates : function(name) {
var that = this;
$.get(name, function(data) {
$(data).find('script').each(function (_, entry) {
that.templates[$(this).attr('id')] = $(this).text();
});
});
},
// Get template by name from hash of preloaded templates
get : function(name) {
return this.templates[name];
}
};
any help?
call is made like this
tpl.loadTemplates('/templates/templates-home.html');
In general you seem like you're on the right track. The browser will load (but ignore) script tags marked with type=text/template and you can later select the contents of those tags and process them with javascript.
I think your problem is likely with the order of your procedure.
You haven't posted the javascript that uses your templates so I can only assume. I suspect your trying to load the templates before the document is ready, thus, the script tags aren't actually on the page when you load them. To fix, your can move your javascripts below the templates in the document OR execute your code in a window.onLoad handler.
EDIT
Okay, now I have a better idea of what you're trying to do. You still haven't told me what part of this is broken, but my gut tells me that this bit is the problem: $(data).find('script'). jQuery expects to be traversing the DOM. At this point in time, data is just a string returned from the server, it's not actually loaded in the DOM. So jQuery won't actually find ANY script tags. Try appending your result to the body before querying the DOM for script elements. Maybe something like this:
$('body').append(data);
$('script[type="text/template"]').each ...
I'm not really thrilled about that though. Can you just inject them into the page on the server side? Why do you need to delay the loading?
EDIT 2
If you don't want your script tags to be visible in the html document, then I suggest you don't use them. Instead you can have your template endpoint just return a bundle of javascript and evaluate it directly. Something like:
$.get(name, function(data) {
// data is a string that sets up your window.template variable
eval(data);
});
When i parse the JSON data i have saved in my database directly in HTML i get some messed up chars and basically it looks encoded?
Here is a sample from the HTML file:
'{"web_rendition":{"#xmlns":"","content":
How do i encode this mess or load it into a JSON object?
View class:
content = Cond.objects.get(pk=pk).con_con.con_chron
context['new_content'] = content
return context
My template:
<script>
content = "{{new_content}}";
</script>
If this is happening in the template layer, you may need a 'safe' filter to keep it from getting encoded like this.
content = "{% my_json_variable|safe %}"
safe filter in django docs
My scenario is this - the user asks for the home page and then the javascript code of the page executes an ajax GET request to the same server to get some object.
The server keeps the home page as a jade template.
So, right now it takes two roundtrips to load the home page:
GET the home page
GET the JSON object
I am OK with it, but just out of curiosity - what are my options to incorporate the object requested later into the initial GET request of the home page?
I see one way is to have a hidden html element, which inner HTML would be the string representation of the object. A bit awkward, but pretty simple on the server side, given that the home page jade template is preprocessed anyway.
What are my other options?
Please, note that I am perfectly aware that sparing this one roundtrip does not really matter. I am just curious about the techniques.
Another option is to always return a JSON object, then the HTML for your home page would be the value of some property on this object. This would probably require some changes on your client-side logic, though.
One more option: instead of a hidden HTML input/textarea containing a JSON string, the home page code could contain a script block where an object literal is declared as a variable. Something like this:
<script>
var myObj = ... // Your JSON string here.
// myObj will be an object literal, and you won't need
// to parse the JSON.
</script>
The initial GET request will retrieve just that document. You can have additional documents loaded defined as scripts at the bottom of your page, so you don't need to do a XHR, for the initial load.
For instance:
GET /index.html
//At the bottom you have a <script src="/somedata.js"></script>
GET /somedata.js
//here you define you var myObj = {}.... as suggested by bfavertto
Depending on which server side technology are you using, this could be for instance in MVC3
public partial class SomeDataController : BaseController
{
public virtual ContentResult SomeData()
{
var someObject = //GET the JSON
return Content("var myObj = " + someObject, "application/javascript");
}
}
You can embed the Json data inside a hidden tag in your HTML. At runtime, your javascript reads the data from this hidden tag instead of making a Json call (or make the call if this data is not available).
<!--the contents of this div will be filled at server side with a Json string-->
<div id="my-json-data" style="display:hidden">[...json data...]</div>
on document ready:
var jsonStr = document.getElementById( "my-json-data" ).innerHTML;
I'm using restclient and nokogiri to parse some html which works great, but there is one piece of information stored in a js (jquery) variable which I need to return and I'm not sure how to parse it. I can use Nokogiri to parse the javascript block, but I need one subset of it which is probably simple but I'm not sure how to do it. I could probably regex it but I'm assuming there's an easier way to just ask for it using JS.
#resource = RestClient.get 'http://example.com'
doc = Nokogiri::HTML(#resource)
doc.css('script').each do |script|
puts script.content
end
What I'm trying to get:
<script type="text/javascript">
$(function(){
//this is it
$.Somenamespace.theCurrency = 'EUR';
//a lot more stuff
not sure if that fits, but you could retrieve it as follows:
irb(main):017:0>
string
=> "<script type=\"text/javascript\"> $(function(){$.Somenamespace.theCurrency = \"EUR\"}); "
irb(main):018:0>
string.scan(/\$\.Somenamespace\.(.*)}\);/)
=> [["theCurrency = \"EUR\""]]
Nokogiri is an XML and HTML parser. It doesn't parse the CDATA or text content of nodes, but it can give you the content, letting you use string parsing or regex to get at the data you want.
In the case of Javascript, if it's embedded in the page then you can get the text of the parent node. Often that is simple:
js = doc.at('script').text
if there is the usual <script> tag in the <head> block of the page. If there are multiple script tags you have to extend the accessor to retrieve the right node, then process away.
It gets more exciting when the scripts are loaded dynamically, but you can still get the data by parsing the URL from the script's src parameter, then retrieving it, and processing away again.
Sometimes Javascript is embedded in the links of other tags, but it's just another spin on the previous two methods to get the script and process it.