Is it possible to reneder value from any external source (database, files, etc.) like 'some text' on page as pure HTML with using LIT-HTML? I'm trying to do it by assinging this value to variable like that:
var variable = html `{$database.value}`
but it doesn't work. I still see text on the page instead of HTML tags (div, a)
You can use the unsafeHTML directive for this: https://lit-html.polymer-project.org/guide/template-reference#unsafehtml
Related
consider that I have several HTML templates and they have custom HTML tags. For ex: c-icon, c-text, c-button etc.
For some usecase(Display other content along with innerHTML), I need to access c-icon tag HTML inside c-text and append it to some text so that I can render it with some other html text. In future, I may have another component called c-badge and even I want to refer and render.
Could you please provide any suggestions for achieving the same?
I am using the following code that should write a HTML body for an outlook email, but where I am using a variable, the HTML uses the variable tag instead of the value. How do I get it to use the value instead of thinking it's part of the HTML?
Code
<p class="MsoNormal"><span style='color:#1F497D'> NameOfPerson has added AmountOfNewEntries to the database</span></p>
NameOfPerson and AmountOfNewEntries should display their values and not the actual text.
I've tried using <#%NameOfPerson#%> but it errors saying that the tag needs to be closed, assuming it is a HMTL tag.
Thanks
Assuming that the variables refer to XElement objects, and you need to pass the value of those elements as strings into HTML to form part of the body of the email, maybe you could use String.Format and the Value property of XElement as below?
String.Format("<p class=""MsoNormal""><span style='color:#1F497D'> {0} has added {1} to the database</span></p>", NameOfPerson.Value, AmountOfNewEntries.Value)
So I have this textarea in my website. By default, it has something like this as its contents:
Name : Sample Value
Age : Sample Value
Location : Sample Value
It is editable before the user hits the button and inserts it into the database, although I am not using a rich text editor since it's nothing but a simple text.
Since basic HTML codes are not browser readable inside the textarea tag, I used
to separate lines.
Now my problem is that I am not able to include the HTML code when I'm reading the value of the textarea tag in the server side.
Thus, the value inserted to the database is not HTML formatted as well, and when it is once again fetched into a web browser, it has no format at all.
What alternatives do I have? Thanks.
Not possible using textarea, use contenteditable DIV instead.
<div contenteditable="true"></div>
You can use getters and setter as shown below:
//Get content
var contents = document.getElementById("divId").innerHTML;
//Set content
document.getElementById("divId").innerHTML = contents
Here is the browser support for this approach.
Why don't you use JQuery and do this $(textarea).val() to get the value of the textarea as a string and use it server side. you might have to consider using Ajax to make a call to the server side method you want to pass the Html data.
The answer is very simple.
Use contenteditable DIVs instead of TextBox and TextArea.
But remember to add contenteditable="false" to all your inner HTML tags.
This worked for me.
How can I set the title attribute of an HTML tag via knockoutjs in a way that will cause any HTML entities in the tag contents to be evaluated and displayed (i.e. not escaped)?
Example:
<div data-bind="attr: { title: titleObservable }"></div>
In the above example, if titleObservable contains an HTML entity, it will not be rendered, rather the entity name will be displayed. See this fiddle for a working example. Notice that when you hover over the div, the title text contains ' instead of the apostrophe symbol.
I know that when setting the contents of an HTML tag with the knockoutjs text binding that HTML is escaped for security reasons (see this thread). I am assuming that this is what is happening to the entity in my title attribute. I also know that I can just embed the apostrophe directly into the title attribute, but I would like to know if there is a way that I can do this with the HTML entities (due to certain limitations on the project I am working on).
The only way to use HTML entities within Javascript (which Knockout bindings use) is through innerHTML. All other access to the DOM uses UTF-8 text.
I suggest that you update your code to use plain text within your model and only use HTML entities within actual HTML documents. But if you cannot do so, you can use a custom binding handler that converts from HTML to text before setting the DOM property. Here's one I just made that sets the title.
ko.bindingHandlers.myTitle = {
update: function(element, valueAccessor) {
var value = ko.utils.unwrapObservable(valueAccessor());
var d = document.createElement('div');
d.innerHTML = value;
element.title = d.innerText;
}
};
Example: http://jsfiddle.net/mbest/TMSHB/2/
i am trying to set HTML data in tinymce using jquery. But i have some problem in it.
my html data is as :
var data = "<div><img src='http://localhost/images/test.png' /><div>Image Title</div></div> html";
tinyMCE.activeEditor.setContent(data , {format : 'raw'} );
It renders the div and image properly. but i get additional tag with html in it
If i remove the html word the data is not properly rendered in editor
I also tried various below combination, but it did not helped:
tinyMCE.activeEditor.dom.setHTML(tinyMCE.activeEditor.id, str);
tinyMCE.activeEditor.setContent(data );
Tinymce and the browser taking care of the validity of the html entered.Can you show me the editor content after you entered your data?
tinyMCE.activeEditor.setContent(content);
is the usual correct way to replace the current editor content with the text that the content variable hold.