I would like to enable html input from user on my form.
Tried: = f.input :body, :input_html => {:escape => false} and also {:disabled => false}
Right now the text shows up as a chunk.
if user puts:
Lorem Ipsum is simply dummy text `</br>` of the printing and typesetting industry.
should show up as:
Lorem Ipsum is simply dummy text
of the printing and typesetting industry.
Thank you so much for your help !!
Solved it.
in form f.text_area
added method on model
def body_enable_html
body.html_safe
end
and called method in views
= #collection_page.body_enable_html
Related
I need to compare two html pages for data. Pages are developed using React but the markup is different. However, the content in these pages is same. What is the best way to compare these pages? I am only looking to compare textual data.
I need to compare multiple pages. Is writing specific selectors, extracting values and comparing them is the only solution?
It's still unclear as to where you are going to perform the check.
Comparing textual data of 2 elements is straight forward with the help of element.innerText property.
var page1 = document.getElementById('page1');
var page2 = document.getElementById('page2');
var result = document.getElementById('result');
if (page1.innerText !== page2.innerText) {
result.innerHTML = "Pages are different";
} else {
result.innerHTML = "Pages are same";
}
<!-- Page 1 -->
<div id='page1'>
<strong style="margin: 0px; padding: 0px;">Lorem Ipsum</strong> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of
type and scrambled it to make a type specimen book.
</div>
<br><br>
<!-- Page 2 -->
<div id='page2'>
<div class="different markup"></div>
<em style="margin: 0px; padding: 0px;">Lorem Ipsum</em> <b>is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</b>
</div>
<br>
<h3 id="result" style="color:red;"></h3>
Now, when you have to compare one page to another across the internet, then it's better to compute the hash of both the pages and compare the hash for equality checking.
Object.defineProperty(String.prototype, 'hashCode', {
value: function() {
var hash = 0, i, chr;
for (i = 0; i < this.length; i++) {
chr = this.charCodeAt(i);
hash = ((hash << 5) - hash) + chr;
hash |= 0; // Convert to 32bit integer
}
return hash;
}
});
var page1Hash = document.getElementById('page1').innerText.hashCode();
var page2Hash = document.getElementById('page2').innerText.hashCode();
var result = document.getElementById('result');
if (page1Hash !== page2Hash) {
result.innerHTML = "Pages are different";
} else {
result.innerHTML = "Pages are same";
}
<!-- Page 1 -->
<div id='page1'>
<strong style="margin: 0px; padding: 0px;">Lorem Ipsum</strong> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of
type and scrambled it to make a type specimen book.
</div>
<br><br>
<!-- Page 2 -->
<div id='page2'>
<div class="different markup"></div>
<em style="margin: 0px; padding: 0px;">Lorem Ipsum</em> <b>is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</b>
</div>
<br>
<h3 id="result" style="color:red;"></h3>
References
Comparing long strings - https://stackoverflow.com/a/40014929/3284379
Generating hash from a string in JS - https://stackoverflow.com/a/7616484/3284379
json data is coming from rest API with html tag like
(content: {rendered: "<p><strong>Destination Covered:</strong> Lorem Ipsum; Dolor</p>↵", protected: false})
how we convert HTML tag to text in angular7
{{x.content.rendered}} in angular 7
<p><strong>Destination Covered:</strong> Lorem Ipsum; Dolor</p>
display code in HTML format
The result should without HTML tag in angular6-7
Destination Covered: Lorem Ipsum; Dolor
Could you use this ? Worked for me
var f = '<p><strong>Destination Covered:</strong> Lorem Ipsum; Dolor</p> ';
var e = document.createElement("div");
e.innerHTML = f;
document.getElementById("foo").innerText = e.innerText;
Please do leme know
simply you can use databinding for innerHTML like this
componenet
hello = "<h1>Hello from 🌍 </h1>"
template
<div [innerHTML]="hello"></div>
demo 🧙♂️
here's my solution:
in the file ts
bypassSecurityTrustHtml(text: string) {
return this.sanitized.bypassSecurityTrustHtml(text)
}
and in the html you should implement this html code :
<p> <span [innerHTML]="bypassSecurityTrustHtml(myForm.value.pageContent)"></span></p>
enter code here
As you can see at following picture, tooltip is to narrow, it should be wider, because I want to be able to see all data of database. Any ideas how to extend tooltip?
Here is code of tooltip
[
'attribute' => $dummy,
'label' => Yii::t('app', 'Charakterisierung'),
'format' => 'raw',
'value' => function($model) {
if (!empty($model->person->personentypDominant->typ_name)) {
$tag = Html::tag('span', 'Tooltip-Touch Me!', [
// html-tags will be rendered in title using jquery
'title' => $model->person->personentypDominant->typ_empfehlung,
'data-placement' => 'left',
'data-toggle' => 'tooltip',
'style' => 'white-space:pre;border:1px solid red;'
]);
return $tag . "<br>" . $model->person->personentypDominant->typ_verhaltensmerkmal_im_team_1 . "," . $model->person->personentypDominant->typ_verhaltensmerkmal_bei_stress_3 . "," . $model->person->personentypDominant->typ_verhaltensmerkmal_am_arbeitsplatz_4;
}
}
],
You can always add a css class to override the max-width property set on the .tooltip-inner class which shows your content as tooltip it is set to default at 200px;
for example, consider the below HTML with ul li, as the tooltip content
<ul>
<li>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</li>
<li>some point</li>
<li>some point</li>
<li>some point</li>
<li>some point</li>
<li>some point</li>
</ul>
add the following css classes to the view
$css = <<<CSS
.tooltip-inner ul{
list-style-type:none;
padding:0;
margin:0;
width:100%;
}
.tooltip-inner{
max-width:700px !important;
}
CSS;
$this->registerCss($css);
this will show you the tooltip like below
HI, I am using Angular 2 for frontend with wordpress rest api backend.
I am getting a json response from service. But Wp rest api send the content along with HTML tags and images. I am unabale split it and use it in my HTML.
I want use image and text should be at different places. also I need to remove tag from the content.
service Like:
#Injectable()
export class VtkraHomeService {
private url = 'http://myapplication.com/wp-json/wp/v2/posts';
private headers = new Headers({'Content-Type': 'application/json'});
constructor (private http : Http){
}
getFeeds(){
return this.http
.get(this.url)
//.then( (res) => res.json);
.map((res: Response) => res.json());
}
and ComponentLike:
export class HomeComponent implements OnInit {
homefeed: any;
showLoader = false;
constructor( private VtkraHomeService: VtkraHomeService ) { }
getHomeFeeds(){
this.showLoader = true;
this.VtkraHomeService
.getFeeds()
.subscribe(data => {
this.homefeed = data;
console.log(this.homefeed);
this.showLoader = false;
});
}
ngOnInit(){
this.getHomeFeeds()
}
}
I am getting a Json response something like this:
[
{
id: 15953,
date: '2016-10-22T07:55:34',
title: {
rendered: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum',
protected: false
},
content: {
rendered: '<p><img src="https://www.w3schools.com/css/paris.jpg" alt="w3c" />Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. Link</P>',
protected: false
},
link: 'htts://www.w3schools.com/css/paris',
type: 'post',
author: 1
},
{
id: 15954,
date: '2016-10-22T07:55:34',
title: {
rendered: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum',
protected: false
},
content: {
rendered: '<p><img src="https://www.w3schools.com/css/paris.jpg" alt="w3c" />Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. Link</P>',
protected: false
},
link: 'htts://www.w3schools.com/css/paris',
type: 'post',
author: 1
},
{
id: 15955,
date: '2016-10-22T07:55:34',
title: {
rendered: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum',
protected: false
},
content: {
rendered: '<p><img src="https://www.w3schools.com/css/paris.jpg" alt="w3c" />Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. Link</P>',
protected: false
},
link: 'htts://www.w3schools.com/css/paris',
type: 'post',
author: 1
}
];
I wanted to get html and text separate from "content (rendered)"
content: {
rendered: '<p><img src="https://www.w3schools.com/css/paris.jpg" alt="w3c" />Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. Link</P>',
protected: false
},
My Html code should be like:
<md-list class="home-feed-list">
<div *ngFor="let item of homefeed">
<md-list-item routerLink="/Story">
<img md-list-avatar src="item.content.rendered(image url)" alt="" class="list-avatar">
<h4>{{item.title.rendered}}</h4>
<p>{{item.content.rendered(remaining text)}}</p>
</md-list-item>
<md-divider></md-divider>
</div>
</md-list>
Please help me to get it proper: I am beginner in angular2 and Typescript
You can use the DOM API to create an object and retrieve the bits and pieces from the rendered string. You can do it in your view-model, after you receive the data from service, and construct your model accordingly in the view-model (i.e. construct homefeed containing objects having this image and text property).
A simple example is shown below.
var contentRendered = '<p><img src="https://www.w3schools.com/css/paris.jpg" alt="w3c" />Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\'s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. Link</P>'
// create a DOM object from the rendered text
var template = document.createElement("template");
template.innerHTML = contentRendered;
// use DOM API to retrieve the data you need from the object
var imgPart = template.content.firstChild.querySelector("img");
var text = template.content.firstChild.innerText;
console.log(imgPart);
console.log(text);
Alternatively, you can put this logic in custom AngularJS filter(s), and tweak the rendering accordingly. Though, I am not an AngularJS user, but from this link it seems that such things can be used for this purpose.
Hope this helps.
I have a custom html file, with the below code with custom tag "TBD:comment". I want to get content from this tag.
<HTML>
<BODY>
<h1> This is a heading </h1>
<P id='para1'>First Paragraph with some Random text</P>
<P>Second paragraph with more random text</P>
Cool Powershell blog
<TBD:comment name="Title"><h3>Katamma katamma loge kathamma</h3>
</TBD:comment>
<TBD:comment name="content"><h3>Lorem Ipsum is simply dummy text of the
printing and typesetting industry. Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s, when an unk</h3> </TBD:comment>
</BODY>
</HTML>
The below code does not seem to work with the custom tag.
enter code here
$html = Get-Content "C:\Users\sahuBaba\Desktop\ht.html" -Raw
$doc = New-Object -com "HTMLFILE"
$doc.IHTMLDocument2_write($html)
$text = $doc.body.getElementsByTagName("TBD:comment")
"Inner Text: " + $text[1].innerText
no output. Can someone please help? Thanks in advance.
Try with regex:
$regex = New-Object Text.RegularExpressions.Regex "<TBD:comment.+?(>.+?)<\/TBD:comment>", ('singleline', 'multiline')
$content = "<your html>"
foreach($m in $regex.Matches($content)) {
# remove leading '<'
$m.Groups[1].Value.Substring(1)
}