I have a couple objects created using the React-Quill editor and some contain images while others contain videos. The ones containing images are rendered back in my app without issue but the ones with videos end up rendering while ignoring all video tags.
For example this is one set of data:
<p>Some text</p><video class="quill-upload-video" src="https://res.cloudinary.com/hidden-bucket/video/upload/v1670504722/InspirationMedia/hvnctjls3jpglucerfso.mov" controls="true" controlslist="nodownload" width="100%"></video><p>Some more text</p>
Quill renders both paragraph tags and absolutely ignores the video tag as though it isn't there. This is not an issue for images.
Is there an explanation for this? How can I troubleshoot the problem?
Related
I'm a new user of TinyMCE, and i'm trying to incorporate it in my React App. But i'ma actually getting an output problem. When try "format:text" in the tiny component, and try to create a post in my blog using bold and italic options, when the post is posted, the displayed text is just normal, without bold or italic properties. So, I've tried the "format:html" but in this case, I get my text without any styles at all, AND we see the <p> balises.
So, it can looks like a stupid question but, how do we output the posted text correctly ?
As always, thx in advance !
This happened to me as well. If you do not want to see the attributes on your output then go to the React Component which is responsible for output and in your React component when you use the return() keyword you should create a div use the
dangerouslySetInnerHTML attribute inside.
Example:
Here's [a link] (https://blog.logrocket.com/using-dangerouslysetinnerhtml-in-a-react-application/)
I'm developing a website where a Search box can return a lot of results in a dropdown list and each result has a clickable internal link to a webpage within the same site.
I initially followed Gatsby's advice and implemented these as <Link> elements, . However, this seems to be causing an issue when scrolling in the search results shortly after performing a new search - the scrollbar jumps back to the top of its own accord 3 or 4 times before then settling down afterwards. This is repeatable for the same search only after clearing the browser cache, which makes me suspect it is somehow related to Gatsby's pre-loading of pages.
If the links are changed to be HTML <a> tags instead, the problem goes away... but am concerned that this is going against Gatsby's advice and there may be other issues I don't know about yet (haven't seen anything so far...)
Could anyone advise whether it is advisable to use anchor tags for internal links in these circumstances?
Of course, you can always use the standard <a> tag for internal routing, however, you will be outside of React's scope (#reach/router's scope). In your case, since you are not creating internal navigation per se (meaning navigation through internal pages) I think that your workaround is the lightest and most native approach, without adding extra dependencies which will increase the bundle size, with a functionality that can be handled natively.
As you said, <Link> component is compiled into an <a> tag with some React's vitamins in the end so, to me, it's the best approach.
Gatsby <Link> Issue When Using Tailwind Elements offCanvas
I had a similar issue using Gatsby <Link> inside an offCanvas component causing the page scroll to completly freezeon all devices untill navigating away. Guess the element using an event that conflicts with how the triggers.
Replacing all <Link> tags that go to internal pages inside the component solve the problem. Refering to 'Ferren' answer, eventually tags with to attributes compiled into tags with href.
<div className={'offcanvas'} id={id} aria-labelledby={`#${id}Label`} tabIndex={-1}>
<div className={'offcanvas-header'}>
<a href={'/about'} className={'offcanvas-title'} id={'#offfcanvasLabel'}>
About Us
</a>
<button type={'button'} data-bs-dismiss={'offcanvas'} aria-label={'Close'} tabIndex={-1}></button>
</div>
...
Here's the background:
I want to be able to save rich text blog posts to Firebase to then display them, including code snippets, on a Posts page.
Right now, I'm simply saving a single string of html to Firebase, retrieving that per post, and setting it with dangerouslySetInnerHtml. I'm the only one adding posts.
However, this means that I lose tabbing information when displaying code snippets in blocks. I don't think I can use solution since I'm using dangerouslySetInnerHtml: Formatting code with <pre> tag in React and JSX
Any tips on how to store, retrieve, and display rich text using React and Firebase? Thank you for your help.
I was able to use the following to convert rich text to html, and then minify it:
https://4html.net/Online-HTML-Editor-Text-to-HTML-Converter-870.html
http://minifycode.com/html-minifier/
I'm using Contentful for storing content for articles and React markdown for parsing and it works very well. But i don't know what what exat to do when it comes to alignment of images like two images side by side.
Is there there a way to see in the markdown how many images are renderad? Then i could do alignment based on how many images there is in the markdown
You could style images using the next-sibling selector.
Perhaps something like this:
img + img { /* styles for any image directly after another image */ }
You can insert some HTML (which is not the ideal solution) in the markdown like <img='img' class='align-left' /> you can also have a separate field of type asset list and you get these image separately and add them to your HTML
I want to show PDFs in my angular application. It should be possible to show multiple pages at once and to search inside the PDF.
I tried angularjs-pdf to do so, but it lacks these features. Is there a angular wrapper for pdf.js that can do this? Or can somebody get me startet on how to implement pdf.js in my angular application without a wrapper?
Assuming this statement:
"I want to show PDFs in my angular application"
Anyone searching for this, could ought to check out ng2-pdf-viewer, for more information on this module, can check this out ng2-pdf-viewer PdfShowcase
Basically, this module could somewhat allow one to display more than one PDF in a single screen.
app.component.ts
// Declare the pdf as an empty array
pdfs = [];
// Assuming requesting PDFs from server through MVC style
getPdfs(){
this.getPdfService.getPdfs().subscribe(response => {
response.body.forEach((value, index) => {
this.pdfs.push({
id: index,
obj: window.URL.createObjectURL(value);
});
});
});
}
app.component.html
<div *ngFor="let pdf of pdfs, index as i;">
<div *ngIf="pdf[i]">
<pdf-viewer
[rotation]="0"
[original-size]="true"
[show-all]="true"
[fit-to-page]="true"
[zoom]="0"
[zoom-scale]="'page-width'"
[stick-to-page]="true"
[render-text]="false"
[external-link-target]="'blank'"
[autoresize]="true"
[show-borders]="true"
[src]="pdf.obj"
(after-load-complete)="onPdfComplete($event)"
(error)="onPdfError($event)"
style="width: 100%; height: 800px;">
</pdf-viewer>
</div>
</div>
If this library is not suitable for your use case, you may try with other libraries which uses iframe or similar strategy. Refer here is a useful source worth checking it out.
I know I'm a little bit late for this post but thought of posting here might help some folks who is looking for the same thing. Hope it helps.
From ng2-pdf viewer page, it recommends your desire "angular wrapper for pdf.js", There are a ton of built in functionality Mozilla's viewer supports; such as print, download, bookmark, fullscreen, open file, zoom, search,......
If you need to display multiple PDF files simultaneously and if you don't mind using iFrames, I recommend ng2-pdfjs-viewer. https://www.npmjs.com/package/ng2-pdfjs-viewer