API :
{
"id": 1,
"text": "<p>\r\n \\u2022\r\n Lorem ipsum dolor sit amet, consectetur adipiscing elit: <br />\r\n sed do eiusmod <br />\r\n tempor incididunt ut <br />\r\n labore et dolore magna aliqua\r\n</p>\r\n<p>\r\n \\u2022\r\n </p>"
}
HTML :
<div [innerHTML]="agreementData.text"></div>
when I try to display like this Unicode characters like \u2022 display same as \u2022, it doesn't convert in anything, I cant change API I need to handle requests like this
found solution
pipe:
#Pipe({
name: 'unicodeStringFormat',
})
export class UnicodeFormatPipe implements PipeTransform {
transform(value: any, args?: any): any {
return value.replace(/\\u[\dA-Fa-f]{4}/g, match => {
return String.fromCharCode(parseInt(match.replace(/\\u/g, ''), 16));
});;
}
}
HTML:
<div [innerHTML]="agreementData.text | unicodeStringFormat"></div>
I have a group for one module example login. This group contains module.ts, html, spec.ts and page.ts.
I have to write one function in page.ts which will have parameter as a complete HTML page. So I have to write something like this.
func replacingHTMLPlaceHolde(<pass html page here>) <return same html page after replacing>:{}
How can I do this? I have to call this function from ionViewDidEnter() method.
One option I see you could go with is use the server-side html as a string, and use a pipe to replace as you need.
So something along this example (of course, replace what's needed for your own use case):
your-component.ts
export class YourComponent {
public serverHtml: string =
"<div><h2>Block 1</h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div><div><h2>Block 2</h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>";
}
your-component.html
<div [innerHTML]="serverHtml | replacePlaceHolder"></div>
replace-placeholder.pipe.ts
import { Pipe } from "#angular/core";
#Pipe({ name: "replacePlaceHolder" })
export class ReplacePlaceHolderPipe {
transform(value: string): string {
return value.replaceAll("ipsum", "ipsos");
}
}
I have a small problem. I'm getting a text from the server with innerHtml which is inserted in Angular component. Inside of this text, there are possibly some links. Example text block looks like this:
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<a href="some.link.com">Link<a/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Is there a way to insert a bind there a click action like this?
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<a href="some.link.com" (click)="methodName('http://domain.tld/page.html')">Link<a/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Thanks.
If I get you right, you render html loaded from server with innerHtml, in this case you can't use Angular directives inside of this template. But you can add listeners with common JS (document.addEventListener) after content rendering.
#Component({
template: `<div #wrapper [innerHTML]="sanitizedHtml"></div>`
}) class MyComp {
#ViewChild('wrapper') wrapper: ElementRef<HtmlElement>;
ngAfterViewInit() {
const links = this.wrapper.naviveElement.querySelectorAll('a[href]');
links.forEach(link =>
link.addEventListener('click', this.linkClickHandler.bind(this));
);
}
linkClickHandler(event: MouseEvent) {
...
}
}
For dynamic links you can bind your desired url link in you a tag like the following
<a [href]="some.url">Link</a>
If some is an object.
For click event you can have something like
method(url: string) {
window.location.href = url;
}
then you'll pass your url string like (click)="method('http://domain.tld/page.html')"
I was wondering couple days ago if its possible to do the following.
Lets say we have a basic HTML code with the following in it:
<p class="someinfo"> basic text </p>
<p class="someinfo"> some other information </p>
And we also have some CSS files that are included in the header of the HTML with basic styling like:
.someinfo{
font-size:32px;
color:red;
}
So here comes my question.
If I edit the HTML and put inside the first Paragraph (style="color:black") like down below it will change the color only for that div element.
By changing the style like this is it somehow possible to make the changes appear to all elements with that class name?
<p style="color:black" class="someinfo"> basic div </p>
<p class="someinfo"> some other information </p>
I hope you understand what I'm asking and apologise if it's a stupid question.
P.S. I am asking this because I have the following situation. There is a website that i don't have the access to any of the files on the server, cannot upload any new files. All i can do is create new pages from a text editor which doesn't recognise < style > and < script > tags. All I want to do is change some css on the navigation and on some other items that are part of every page in the website.
This is what CSS is for :) If you want all elements of a given class name to change to black you could change the CSS style to:
.someinfo{
font-size:32px;
color:black;
}
Doing it inline manually wont work.
If you really want to do it inline you could do so programatically with js:
var someInfoElements = document.getQuerySelectorAll(".someinfo");
for(i = 0; i < someInfoElements.length; i++) {
someInfoElements[i].style.color = "black";
}
Option 1
You could define the first element with a style attribute and use JS to make the rest for you, as long as all elements have the same selector.
const someInfo = document.querySelectorAll('.someinfo');
const style = someInfo[0].getAttribute("style");
someInfo.forEach((s) => s.style = style);
<p style="color:red; font-size:32px" class="someinfo"> basic text </p>
<p class="someinfo"> some other information </p>
Option 2
You could add style attributes to each element.
Here is an example:
const someInfo = document.querySelectorAll('.someinfo');
let style = '';
someInfo.forEach((s) => {
if (typeof s.getAttribute("style") === 'string') {
style += s.getAttribute("style");
if (style.slice(-1) !== ';') {
style += ';';
}
}
});
someInfo.forEach((s) => s.style = style);
<p style="color:red;" class="someinfo"> basic text </p>
<p style="font-size:32px" class="someinfo"> some other information </p>
<p style="color:blue" class="someinfo"> and more information </p>
<p class="someinfo"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam, soluta animi, optio repellat eius consectetur! Iure repudiandae, architecto doloremque, dolorum totam consequatur minima placeat recusandae nisi earum dignissimos, illum culpa. </p>
As you see I am using color:red and color:blue. Just like in CSS the last attribute wins. In this case the color of your element with the class someinfo is blue and all other CSS attributes and values will be added.
yes you can, if you want to change all paragraph in the div just put "p" in your css code like this: your both elements will change
p {font-size:32px;color:red;}
instead of
.someinfo{font-size:32px;color:red;}
your code will be like this
<style> p { font-size:32px;color:red;} </style>
I'm trying to put my company logo on the right corner of my html document
Here my code:
<script>
$(document).ready(function() {
$head = $('#header');
$head.prepend('<div class="knitr source"><img src="logo.png" width="220px" align="right" ></div>')
});
</script>
---
title: "Title"
author: "Author"
date: "Date"
theme: bootstrap
output: html_document
keep_md: true
---
```{r echo=FALSE, include=FALSE}
knitr::include_graphics('./logo.png')
```
<br>
## 1) Header
<br>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.
However, because the logo.png is a local file when sharing the html document people are not able to see it.
Additionally, I tried the following approach
---
title: "Title"
author: "Author"
date: "Date"
output:
html_document:
css: markdown.css
includes:
in_header: extLogo.html
---
where extLogo.html
<div class="logos"><img src="logo.png" width="220px" align="right"></div>
But it creates a div outside the div where the Title is (<div class="container-fluid main-container">). Can anyone help on this?
You can use htmltools::img with a little inline CSS for positioning. src can take a path directly, but when images aren't just handled like plots, sometimes knitting fails to convert images to a URI properly, which in turn causes them to fail to render. Using self_contained: false in the YAML is a quick solution, but it's not much harder to use knitr::image_uri to manually convert the image:
---
title: "Title"
author: "Author"
output: html_document
---
```{r, echo=FALSE}
htmltools::img(src = knitr::image_uri(file.path(R.home("doc"), "html", "logo.jpg")),
alt = 'logo',
style = 'position:absolute; top:0; right:0; padding:10px;')
```
---
# 1. Header
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
The accepted answer works if you are using classical html output. If like me, you also work with bookdown, the logo need to appear on every pages. So, in case somebody find this answer but want to add a logo with bookdown, I give my proposition:
We need to create an external file with a script to be called in header, thankfully we can create it directly in the rmarkdown script.
We also use htmltools::img to allow including the image without external image file.
Here is my rmarkdown script to be used as an example:
---
title: "Logo with Bookdown"
author: "Author"
date: '`r format(Sys.time(), "%d %B, %Y")`'
output:
bookdown::gitbook:
includes:
in_header: header.html
---
```{r setup, include=FALSE}
knitr::opts_chunk$set(echo = TRUE)
```
```{r htmlTemplate, echo=FALSE}
# Create the external file
img <- htmltools::img(src = knitr::image_uri(file.path(R.home("doc"), "html", "logo.jpg")),
alt = 'logo',
style = 'position:absolute; top:50px; right:1%; padding:10px;z-index:200;')
htmlhead <- paste0('
<script>
document.write(\'<div class="logos">',img,'</div>\')
</script>
')
readr::write_lines(htmlhead, path = "header.html")
```
# Page 1
This is an R Markdown document. Markdown is a simple formatting syntax for authoring HTML, PDF, and MS Word documents. For more details on using R Markdown see <http://rmarkdown.rstudio.com>.
When you click the **Knit** button a document will be generated that includes both content as well as the output of any embedded R code chunks within the document. You can embed an R code chunk like this:
```{r cars}
summary(cars)
```
# Page 2
You can also embed plots, for example:
```{r pressure, echo=FALSE}
plot(pressure)
```
Note that the `echo = FALSE` parameter was added to the code chunk to prevent printing of the R code that generated the plot.
I took a quite different approach to the answers above, using only CSS and without absolute positioning. I added the following CSS code chunk to my document, but you can also create a standalone CSS file and include that in the Rmd YAML header.
```{css, echo=FALSE}
#header {
background-image: url("data: BASE64 encoded string for image");
background-repeat: no-repeat;
background-position: 95%;
padding: 5px;
}
#header > * {
max-width: calc(100% - 225px);
}
#media only screen and (max-width:600px){
#header > .title {
margin-top: 105px;
}
#header > *
max-width: 100%;
}
#header {
background-position: 10px 10px;
}
}
```
There's a few things going on here. To address the original question about the image, you need to base64 encode the image yourself and put the string into the background-image URL.
It also handles the issue of overlap of logo and header content in a reactive way, setting max-width on all header elements, and placing the logo above the title on narrow windows (less than 600px).
If you don't care about overlap at all, then you only really need the first #header selector code. If you don't care about the narrow device reactive layout then you can keep the first two selectors and drop the #media block.
The two pixel values 225px and 105px are based on my logo, and will need to be changed to fit your image plus some padding.
#alistaire's accepted answer was really useful. However in my case the title and the logo were overlapping, since the title in my markdown is really long.
Looking around I came up with the following solution, and I post it in case is useful for anybody.
```{js logo-js, echo=FALSE}
$(document).ready(function() {
$('#header').parent().prepend('<div id=\"logo\"><img src=\"www/xxxxx.png\" style=\"position:absolute; top:0; right:0; padding:20px; height:120px\"></div>');
$('#header').css('margin-right', '120px')
});
```
This should be added anywhere in the markdown, and of course it only works for HTML output. The idea is to add a new div for the logo, and then add a margin-right to the title so that it does not overlap.
Note that I don't think this is really optimal; my use of css is clumsy and if somebody figures out a better way I'm glad to hear. Anyhow it seems works ok.
As a complement to alistaire answer, and answering the question from Marco. One can use width, and height to select the size of the figure. For example,
---
title: "Title"
author: "Author"
output: html_document
---
```{r, echo=FALSE}
htmltools::img(src = knitr::image_uri(file.path(R.home("doc"), "html", "logo.jpg")),
alt = 'logo',
style = 'position:absolute; top:0; right:0; padding:10px;',
width = "300px",
heigth = "300px")
```
---
# 1. Header
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor
In case you make a rmarkdown website and you would like to add a logo to the right in the navbar:
In the _site.yml include a before_body:
include:
before_body: logo.html
In the html template:
<script type="text/javascript">
$(function() {
$('.navbar-right').before($('.logo'));
})
</script>
<div class="logo pull-right">
<img src="logo.png" alt="logo" width="150" style="margin-top: 15px;">
</div>
Key is to include the pull-right class in the div you insert.
To get the logo top right aligned inside the header div, do this:
Make file called header-logo.html containing:
<script>
$(document).ready(function() {
$('#header').prepend('<img src="https://via.placeholder.com/350x350" style="float:right" width="30%"/>');
});
</script>
Update your .Rmd with:
output:
html_document:
includes:
in_header: header-logo.html
base64 encode the logo manually and replace the url in src if you want the .HTML be self contained.