I have an app that needs to render the HTML tags like <bold>abc<bold>
but when I do <span data-win-bind='innerText: newText'></span>
then the output comes some thing like
<bold>abc</bold> instead of abc . what to do in order to achieve this ??
Rendering here is being done wrong
Try binding innerHTML rather than innerText
InnerText retrieves and sets the content of the tag as plain text, whereas InnerHtml retrieves and sets the same content but in HTML format.
Here's a microsoft site with same discussion
inner text and html
go through it :)
Related
Is it possible to use ckeditor on a form input instead of textarea, i am building a CMS and now trying to add ckeditor and majority of of fields are form input not textarea
Thanks in advance
You can use CKEditor on an element (a div, say) that has contenteditable set. In fact, by default contenteditable elements will have CKEditor editors instantiated. It seems unconventional to use a rich text editor on an input of type text but I imagine it could be done.
As far as I know CkEditor has to be created using a textarea. In saying this, I am using it in a Razor MVC view and its one of the classes in my form..
The request will be blocked though and you will get this error;
A potentially dangerous Request.Form value was detected from the
client
To get around this, you need to get the value of the CKEditor text and html encode it. You can do this
when submitting your form, intercept it on the onsubmit function:
<form id="myform" onsubmit="javascript:onFormSubmit(this);return false" >
...
</form>
Then in this onFormSubmit function
Get the value,
Set the property value to the url encoded value
Do a ajax call to your server with the data
Your function will get the CKEditor encoded value like so:
function onFormSubmit(form)
{
var editor = CKEDITOR.instances["EditorId"];
var richtextValue = editor.getData();
var urlEncodedValue = encodeURIComponent(richtextValue);
// TODO rest of code doing ajax post to submit your form and its data
// Here you need to do an ajax call to your server pass it the form data along with the url encoded CKEditor value for that property
}
Please bear with me as I am a newbie in gwt and front end stuff.
I have a html string:
String s=
"<html><head><title>Hello World</title></head><body><b>Hello World</b></body></html>";
(I am using spaces in the tags to prevent the text from displaying "htmlized".)
//and gwt RichTextArea control->richTextArea
richTextArea.setHTML(s);
//So far so good as the document String displays as desired.
//Now comes the problem...
String transformed = richTextArea.getHTML();
The rich text area strips the outer and returns the inner html only. i.e. The body, html and the head tags are stripped.
Q How do I get the html string returned with only the modifications which occur in the rich text area showing.. i.e. The original "outer" tags do not get lost.
Hope I am adequately clear.
You don't have to set them in setHTML <b>hello world<b/> is enough.
Also if you set the outer tags you can't get them, as they don't add anything in the formatting of the text.
#UiField Hyperlink historyLink;
this.historyLink.getElement().setAttribute("rel", "nofollow");
This sets the rel attribute of the containing div.
<div class="gwt-Hyperlink" rel="nofollow">history</div>
How do I get at the a tag?
You can get a element this way
Element a = historyLink.getElement().getFirstChildElement();
Maybe you can use an InlineHyperlink instead (if you don't want the div wrapper at all), but actually I don't understand the use of rel=nofollow on a link with a #hash-only href: if that's for Google AJAX crawling, can't you simply avoid outputting the link in the HTML snapshot you send in response to an _escaped_fragment_ request?
I have this xml as part of the responseXml of an Ajax call:
<banner-ad>
<title><span style="color:#ffff00;"><strong>Title</strong></span></title>
</banner-ad>
When I used this jQuery(responseXml).find("title").text(); the result is "Title".
I also tried jQuery(responseXml).find("title:first-child") but the result is [object Object].
I want to get the result:
<span style="color:#ffff00;"><strong>Title</strong></span>
Please let me know how to do this in jQuery.
Thanks in advance for any help.
Regards,
Racs
Your problem is that you cannot simply append nodes from one document (the XML response) to another (your HTML page). The issue is two-fold:
You can use jQuery to append nodes from the XML document to the HTML page. This works; the nodes appear in the HTML DOM, but they stay XML nodes and therefore the browser ignores the style attribute, for example. Consequently the text will not be yellow (#ffff00).
As far as I can see, jQuery offers no built-in way to get the XML string (i.e. a serialized node) from an XML node. jQuery can handle XML documents quite well, but there is no equivalent to what .html() does in HTML documents.
So to make this work we need to extract the XML string from the XML document. Some browsers support the .xml property on XML nodes (namely, IE), the others come with an XMLSerializer object:
// find the proper XML node
var $title = $(doc).find("title");
// either use .xml or, when unavailable, an XMLSerializer
var html = $title[0].xml || (new XMLSerializer()).serializeToString($title[0]);
// result:
// '<title><span style="color:#ffff00;"><strong>Title</strong></span></title>'
Then we have to feed this HTML string to jQuery so new, real HTML elements can be created from it:
$("#target").append(html);
There is a fiddle to show this in action: http://jsfiddle.net/Tomalak/QWHj8/. This example also gets rid of the superfluous <title> element.
Anyway. If you have a chance to influence the XML itself, it would make sense to change it:
<banner-ad>
<title><span style="color:#ffff00;"><strong>Title</strong></span></title>
</banner-ad>
Just XML-encode the payload of <title> and you can do this in jQuery:
$("#target").append( $(doc).find("title").text() );
This would probably work:
$(responseXml).find("title").html();
I have a php page which contains a large amount of HTML in it. One part of the HTML has a div in the following format:
<div class="reusable-block" id="xyzabcwy">there is a lot of HTML here which may be in any format</div>
Keep in mind, this div is contained within the DOM at any location however, I do know the div ID programatically.
I was originally finding this string within my database, since a record of it exists there however, the format between the data in the database record and the page are sometimes different due to whitespace but other than the white space, the strings are exactly the same. The problem is, I don't know what format the whitespace is in.
It seems it is better to write a regular expression to find this div and replace it entirely.
I could use a hand though.
Other ideas are also welcome.
Many thanks!
If you are using jQuery,
$('#xyzabcwy').html(new_data);
if not
document.getElementById('xyzabcwy').innerHTML = new_data;
otherwise, here is a PHP example.
Edit: PHP
<?php
$id = "xyzabcwy";
$html = "<div id=\"" . $id . "\">this is html</div>";
$newdata = "test";
echo preg_replace("#<div[^>]*id=\"{$id}\".*?</div>#si",$newdata,$html);
?>
This should output
<div id="123">test</div>
Answer from: Replace a div content with PHP