I am trying to append a textarea with some text containing a piece of javascript code. But it deletes all the tags automatically. How can I fix this problem?
Here is an example text from the database, and I stored it in blogObject['blog_content']:
<div data-configid="0/10000221" style="width: 525px; height: 292px;" class="issuuembed">
</div><script type="text/javascript" src="//e.issuu.com/embed.js" async="true"></script>
Some text here.
<a class="fancybox" href="http://ab5b871380c75ebbed44-0d6294cd72219e531b9ba85132078296.r10.cf2.rackcdn.com/userprofiles/2012/09/19/1/images/2014/11/04/org_1415121954_3b445d4fac6b78703bcf272307ac59f0.gif"><img src="http://ab5b871380c75ebbed44-0d6294cd72219e531b9ba85132078296.r10.cf2.rackcdn.com/userprofiles/2012/09/19/1/images/2014/11/04/org_1415121954_3b445d4fac6b78703bcf272307ac59f0.gif" width="190" /></a>
Some text here 2.
When I use $("#blog_content").html(blogObject['blog_content']) to add the above text, here is what I see:
Some text here.
Some text here 2.
as #Musa in the comment said, I should use .val() instead of .html(). It worked for me.
Related
I want to build some function in JavaScript, that sends text from textarea to a div.
I want it do the following
If the user tries to send html source to a textarea, it will show the
text, and not the actual html source.
For example:
If the user tries to send: <img src='aa.png'>
I want to see in the div the text: <img src='aa.png'>, and don't want to see the actual image: aa.png
Use .innerText or .textContent instead of .innerHTML
eleme.innerText="<img src='aa.png'>"; where eleme is your div
DEMO:
document.getElementById('test1').innerHTML="<img src='aa.png'>";
document.getElementById('test2').innerText="<img src='aa.png'>";
document.getElementById('test3').textContent="<img src='aa.png'>";
<div id="test1"></div>
<div id="test2"></div>
<div id="test3"></div>
You can read more for differences between this three commands and others Here
I'm new to making Chrome extensions. I'm trying to read text between a class tag, such as:
<div id="AssetThumbnail" class="thumbnail-holder" data-3d-thumbs-enabled data-url="/thumbnail/asset?assetId=111795617&thumbnailFormatId=6912&width=320&height=320" style="width:320px; height:320px;">
<span class="thumbnail-span" **data-3d-url=**"/asset-thumbnail-3d/json?assetId=111795617" data-js-files='http://js.rbxcdn.com/a552a24cb2c7a47ad748fd129a2e9624.js.gzip' ><img class='' src='http://t7.rbxcdn.com/7cfa58047697662d12f33d68b71e5f42' /></span>
<span class="enable-three-dee btn-control btn-control-small"></span>
</div>
I'd like to get the text from data-3d-url=. I have surrounded it with asterisks in my code so you can see what I'm referring to.
Using jQuery you could retrieve an attribute like that with the following snippet.
alert($('.thumbnail-span').attr("data-3d-url"));
You can then change the alert function to set a variable or whatever else you want to use that value for.
Here's a JSFiddle example: http://jsfiddle.net/r1umr3s5/1/
I want to change the text of a link using javascript. The problem is this particular link does not have an id. I am unable to change the html, as this is a SharePoint page, and this particular link is created by a page layout, which I do not have access to. Using IE Developer Tools, I see that the HTML surrounding the link is this:
<span id="DeltaPlaceHolderPageTitleInTitleArea">
<span>
<a href="#ctl00_PlaceHolderPageTitleInTitleArea_ctl00_SkipLink">
<img width="0" height="0" style="border-width: 0px;" alt="Skip Navigation Links" src="" /></a>
<span>
<a title="State-Compliance" href="/sites/tax/Compliance/SitePages/State-Compliance.aspx">State-Compliance</a>
</span>
<a id="ctl00_PlaceHolderPageTitleInTitleArea_ctl00_SkipLink"></a>
</span>
The link I wish to change is the second one, the one with "State-Compliance" for the tooltip.
I looked at jQuery, and found I could use $('#DeltaPlaceHolderPageTitleInTitleArea').find("a").text("Test"); to change the text, but it changes the text of all three links. How can I change just the one? Do I need to iterate through the three, or is there an easier way of getting the link I wish to change?
Sorry if this is a stupid question, I'm a c# developer, and this is my first experience using javascript.
Let me know if you need more information.
Warren
Use .eq():
$('#DeltaPlaceHolderPageTitleInTitleArea').find("a").eq(1).text("Test");
jsFiddle example
How about this, using the attribute equals selector:
$('#DeltaPlaceHolderPageTitleInTitleArea a[title="State-Compliance"]')
I've crated html template file, I put some elements inside that template are non editable.
template.html contains
<body>
<div>This is a sample template </div>
<div contenteditable="false" style="color:red">Read Only Text</div>
</body>
on inserting this template file into the textarea the second div is editable, while inspecting over that div I've seen that the attribute contenteditable="false" is not there on insert, but its there on the preview before the insert of template.
Any help gratefully received!
From this page: http://www.tinymce.com/tryit/noneditable_content.php
Its using a textarea:
<textarea name="content" style="width:100%">
<p>Text with a <span class="mceNonEditable">[non editable]</span> inline element.</p>
<p class="mceNonEditable">Noneditable text block with <span class="mceEditable">[editable]</span> items within.</p>
<p>Text with tokens that isn't [[editable]] since they match the noneditabe_regexp.</p>
</textarea>
The key here is putting a class of mceNonEditable in your element:
span class="mceNonEditable"
Then whatever non-editable content you have, wrap it in greater than and less than:
>You cannot edit me<
Then finally close the element:
/span
I think you can also change the mode (in the example they're using textareas, so I guess you can also use divs or spans) when initializing tinymce:
tinyMCE.init({
mode : "textareas",
noneditable_regexp: /\[\[[^\]]+\]\]/g
});
There's also noneditable_regexp which lets you specify a regular expression of non-editable contents.
I think this is easier than using html entities.
I haven't actually tried it but that's the way I interpret the example in the page.
I have a 'preview' written in JQuery, which when I write in a textarea, it is written in HTML so that I can see what the output will look like before submitting a post.
One problem though, is that while the main behaviour I want is for the preview to be written in HTML (so that i can see images in real-time), I need to configure it so any text written in the textarea, within <'code'> tags, should be written as text, instead of HTML.
Can this be done?
Thanks in advance guys!
To give an example:
This is text, displayed as text. The following image is nice: <img src="" />
Below is the code to display this image:
<code><img src="" /></code>
Once you create the preview, you could just run this to replace the HTML inside of the code tags with text, like this:
$("#preview code").each(function() { $(this).text($(this).html()); });