I am using knockoutjs and need a way to display raw html inside a text area. Is is stored in my database as encoded html e.g.
<object width="640" .....
But I want it to be displayed as
<object width="640"
for the user to edit.
I guess you are using text or value binding in textarea if you change it to html it will work as you needed:
<textarea data-bind="html: data"></textarea>
Here is an example: http://jsfiddle.net/vyshniakov/qTRSX/
If your html is already escaped then you're all set, see demo
Related
I have created a wysiwyg text editor using an iframe and am trying to save the contents of this.
The HTML for my iframe is:
<iframe name="richTextField" id="wysiwyg" src="page?page_id=3"></iframe>
I am then using a hidden input to submit this to the database:
<input type="hidden" id="text_content" name="text_content" value="">
I am trying to get the contents of this into the value of the input field using JS like this:
$text_content = #wysiwyg.document.getElementsByTagName('body')[0].textContent;
$("#text_content").attr("value", $text_content);
If I set $text_content to just a random string it will work but it won't get the contents of the iframe.
I have tried $("#wysiwyg document body").textContent, #wysiwyg.document.getElementsByTagName('body')[0].textContent and richTextField.document.getElementsByTagName('body')[0].textContent.
richTextField.document.getElementsByTagName('body')[0].textContent is actually what I used in the JS for toggling to the source but it will not work when trying to set it as a variable.
Should I be trying to do something like php serialize() to get this as a variable I can work with? Or are the terms I've tried as my selectors just wrong? Any help with this will be greatly appreciated.
For future reference, this is what I used:
richTextField.document.getElementsByTagName('body')[0].innerHTML;
I am not able to figure this out for a while now.
I want to use super script in Alt attribute of an image. The code that I have made works fine when I use it with
document.write
innerHTML
because I understand that the HTML parser when reads the script reads the <sup></sup> tags and makes the text between it as superscript. But how to make the Alt attribute or rather an <input> tag have a superscript value.
I want something like this:
<input type="text" value="Hi, this is my 1<sup>st</sup> award">
to output on the screen as an input box with pre-filled text
I have made the following code, but cannot figure it out to put it in place:
<body>
<img src="test.jpg" height="400px" width="500px" alt=''>
<script type="text/javascript">
var title = "Test String having 1st";
var one = "st";
one='1'+one.sup();
title = title.replace(/1st/g, one);
document.getElementsByTagName('img')[0].setAttribute('alt',title);
</script>
</body>
For easier solution you can use an editor and remove the toolbar and set the html content of it, here is an example editor https://mindmup.github.io/bootstrap-wysiwyg/ , you can easily turn off the toolbar and then add your desired html to it.
For alt you can use the on error attribute and call a custom attribute on it. Let me know if you need any further elaboration.
I am generating iframe and putting this generated iframe code into a textfield so that user can copy and use it.
iframe first created here:
<div id="iframecode">
<iframe src="http://www.page.com/?arg1=A&arg2=B"> </iframe>
</div>
i am taking it with jquery like this:
var snippet = $('#iframecode').html();
snippet.replace('&','%26');
$('#wsnippet').val(snippet);
and putting here:
<textarea id="wsnippet"></textarea>
but snipper is still:
<iframe src="http://www.page.com/?arg1=A&arg2=B"> </iframe>
But even if i encode the ampersand, it still ends being &. how can I encode this so that user can copy and paste and use it?
The user can copy and paste and use that already. & is the correct encoding for an ampersand in an HTML attribute.
If you don't need to grab all the code from the div, and can just get the src and manually create the code for the iframe you could do the following:
var src = $('#iframecode iframe').attr('src');
var snippet = "<iframe src=\"" + src + "\"></iframe>";
$('#wsnippet').val(snippet);
If I have a textarea including some HTML code, how can I write a JavaScript function to show the HTML output instead of HTML code itself, for example:
<textarea id="mytextarea">
<table border=1><tr><td>cellone</td>td>celltwo</td></tr></table
</textarea>
<input type=button onclick="HTMLoutput();"/>
<script>
HTMLoutput()
{
//Code to show html output instead of html code in textarea
}
</script>
How can I do this? What is the suggested code to write inside the HTMLoutput()?
So to convert the the html code to a formated html you need to do:
$('resultDiv').append($('<div/>').html($('.txtArea').val()+"<br>");
here's an example that use div with contentEditable set to true.
It sounds like you're asking how to take some HTML and display its rendered result in your document.
That's exactly what the innerHTML property does.
Simply pick a DOM element to display the result in, and set its innerHTML to the HTML to display.
I have an asp:Literal on my page (which cannot be converted to a Label or any other control) that I need to change the text of via JavaScript. I have the following code that works for a Label. Can anybody help?
<script type="text/javascript">
function changeText() {
document.getElementById('<%= Test.ClientID %>').innerHTML = 'New Text';
}
</script>
<a href="#" onclick='changeText()'>Change Text</a>
<asp:Label id="Test" runat="server" Text="Original Text" />
Thanks
UPDATE:
I cannot change from a literal as the code behind writes HTML/CSS to it for an Information Message e.g:
LITMessage.Text = "<div class='success'>Information Successfully Updated</div>"
<asp:Literal> controls don't create their own HTML tag.
Therefore, there is no element that you can manipulate.
Instead, you can wrap the <asp:Literal> in a <div> tag with an ID.
An ASP.NET Literal doesn't add any markup to the page. Therefore you have to wrap your content in some container so that you can edit it via JavaScript:
Assuming you had the following Literal on the page:
<asp:Literal runat="server" Id="literalControl" />
And were setting the text via code behind (because if you're not, you could just create the span/div in the markup to begin with and not have this issue):
literalControl.Text = "Some text you want to change";
The code behind becomes:
literalControl.Text = "<span id='myId'>Some text you want to change</span>";
And the JavaScript would be:
document.getElementById('myId').innerHTML = 'New Text';
Does the literal contain html markup?
if not, you could wrap the literal control in a div and give it an id. Then use js to replace the text within that div.
in response to your update:
In that case, since you are rendering a div with a class of success, I would use jQuery to update the html in that div...it would be as simple as:
$('.success').html('new html goes here');
Wrap the <asp:literal> control in a <div> and then use jQuery if needed to clear the contents like shown below:
<div id="divMyText">
<asp:Literal ID="MyText" runat="server"></asp:Literal>
</div>
Here is how to clear the text using jQuery:
//Clear the html inside of the div
$("#divMyText").html("");
A Literal is a direct render of text to the page. The only HTML it will render will be the HTML markup you include in the text string you set to the Literal. Instead of using a Literal surrounded by a div (unless you specifically want that functionality) you can use an ASP Label and perform operations on it.