I'm using react-quill as a text editor and then sending its delta.ops object to my backend.
Now I want to generate HTML from that delta.ops in the frontend without using any external package/library.
I tried some PHP approach from one of the solutions available but the problem is that by doing so I'm not able to add my custom styling to those elements.
suppose I have <strong>hello</strong> now I want to change its font-size and maybe color but unable to do so.
Any help would be appreciated.
Related
I'm working on a website where I want to add the settings of my Slick Slider trough the data-attribute. This is possible with the 'data-slick' attribute. The format for this looks like this: data-slick='{"slidesToShow": 4, "slidesToScroll": 4}'.
In my WordPress CMS I'm using the plugin 'Data Attributes' to add data attributes to a Gutenberg Block. Trough this plugin all double and single quotes are converted to and therefor changes on the frontend to data-slick="{"slidesToShow": 4, "slidesToScroll": 4}"
This is not working. The Slick Slider doesn't use these settings.
Is there another way to add a JSON object into a data-attribute so it will work with the Slick Slider?
Thanks already for your help!
Kind Regards,
Nick
I think storing a JSON value in HTML is a bad idea. There are too many conditions which you have to take into consideration - backend returning page, WEB server encoding (it can add a custom encoding header), and browser compatibility. For this task, I'd prefer 2 ways: bitwise mask or simple function-for example, define a few data attributes -data-s1, data-s2, data-sn. In the JS code, add an array [ data-s1, data-s2, data-sn]. And finally, add a loop with an in-condition (if data.contains(element of array) - read and then parse the data inside of the attribute). I never worked with wordpress but for JS it is a easy task. If you need example write comment below. I can update my answer
I am trying to write a bit of code to read a sensor and, with my ESP32 make a webpage that will display the value.
But on a gauge with a "needle" ( think speedometer type of thing ) like output, I can make variables in CSS and I can make the gauge in CSS and display in HTML fine.
I can change the value of the gauge by changing the CSS variable BUT I want to be able to pass this varibale to CSS from my HTML file.
This is so I can process the HTML page on my ESP32, updating the value of the sensor and display it, I can't seem to get an option of updating CSS varible through HTML.
I would like to rather stay away from JavaScript to be hoest, I'm already learning CSS and HTML to make this work, but if need be I will do it.
Or could I do this in PHP perhaps ?
Any advice ?
If you want to make this dynamic, you have no other option rather than to recur to JavaScript in combination with what you are using. From what I understand it's something like either a percentage value or a rotation degree value you are toying around with.
What I can recommend for your specific case is to use an inline style to change the position of your indicator.
Something like:
<div style="width: 99%;"></div>
It would help if you share with us what you have as code till now.
Also, from what I understand you are still new to this sort of coding, but something that would probably work really well for you could be Socket.io you just assign a port that receives information and configure it, and you could configure your ESP32 to send info to that port I suppose, not really familiar with that part though.
If you want really real time value refreshing with esp32 on its own web you have to use websockets.
I don't know what server library you using, but there are a couple of websocket libaries out there.
I recommend ESP32_AsyncWebserver from Me_no_Dev. This is a fully async webserver implementation, and it is containing the async websocket too.
If you succesfully implemented that to your project, and loaded your static html file with the gauge you mentioned, on runtime of the esp32 you can send websocket text messages to the front-end javascript code. Once you received the messages on the javascript side you can easily update anything from there.
If you interested in this more, i will write some code for you in here. Just let me know.
Currently I am working in a project in which Admin is saving the html code as a whole as a string which will later be used in the front end. It is saved so that user can put their own custom css like placing of whole div, size etc. It was working for some time, but now they want the saving part as it is, but when viewing it should look little differently. Like placement of images(it's just a part of whole div), grid system.
Following is a part of html admin saves:
<img src="http://localhost:3001/api/v1/images/image_454812039.jpeg" style="float:none;height:170.17142857142858px;width:301px;" /><p><span style="color:rgb(0,0,0);background-color:rgb(237,237,237);">Other names of Marshall Bruce Matters</span></p>
as you can see, that's what I get from backend. Now in the front when user is viewing, the span should be at the top, and image should be at bottom of it in a grid.
First of all to answer your question I will propose you to go and look at this loader react-jsx-parser -> https://github.com/TroyAlford/react-jsx-parser
But I would like to warn you that this method is not really recommended. It is better to have the structure in the code. Then call the source to the backend and then integrate it into your DOM.
This will make your frontend and backend easier to understand and therefore maintain
The only problem there is that the styles are not like jsx styles. They should be like:
style={{float:'none', height: '170.17142857142858px', width:'301px'}}
or
style={{float:'none', height: 170.17142857142858, width:301}}
But there is a npm package which helps getting the job done. react-html-parser
Hope it helps!
Currently, I am working on a program that converts an html page into a PDF using the iText Library.
The Checker that I am using is PAC3 -->PDF Accessibility Checker 3 which is described by the following link (https://section508.gov/blog/check-pdf).
One of the issues is the “Alternate description missing for an Annotation”
An excerpt from the following link explains it:
http://www.uottawa.ca/respect/sites/www.uottawa.ca.respect/files/fss-fixing-accessibility-errors-in-pdfs.pdf
Alternative description missing for an annotation This usually happens when the link is not clear enough. To fix this error, add alternative text to the link tags. To add the alternative text, please do the following;
In the tag tree, select the tag for the link, and select Properties
from the options menu.
In the Touchup Properties dialog box, select
the Tag Tab.
Type alternate text for the link, and click close
I have been trying to use iText to fix this problem, but googling, looking at the source and reading the documentation does not help.
Does anybody have any suggestions on how to either write the HTML or use the itext problem to get rid of the “Alternate description missing for an Annotation”
Thank you for your help
You did not specify whether you using old code (XMLWorker, HTMLWorker) or new iText code (pdfHTML).
This of course impacts the proposed solution.
In my answer I am going to assume you are using pdfHTML
There are several options:
edit the incoming HTML using a library like JSoup
convert the incoming HTML to iText IElement objects, and edit those, setting properties where needed
write your own custom TagWorker that handles all instances of a specific tag, and write custom logic to deal with the missing annotations.
An example of a custom tag worker can be found here:
https://developers.itextpdf.com/content/itext-7-examples/converting-html-pdf/pdfhtml-custom-tagworker-example
I have a angular2 component which is generating data to populate my ng2-table, but I cannot seem to put HTML tags into a cell. Instead the cell renders as such:
https://github.com/valor-software/ng2-table/issues/51
I've tried to modify the js file that is coming down as indicated as an older fix but changing the markup to the [innerHtml] angular2 element does not appear to be accepted.
It seems that others are having this problem as well, has anyone else found a solution? I'm aware that ag-grid is capable of doing this, but we need to use ng2-table as it supports bootstrap pagination which ag-grid does not appear to.