Background
We're exporting HTML content generated by React into MS Word documents using plain Javascript. We came up with a solution to page break where necessary and that is working on Print (+ Print as PDF). To export HTML into MS Word we're using this tutorial.
However, we're failing because MS Word is not understanding CSS classes. So we tried inline CSS to the holder instead of using a class. As it's still not working, one of our colleagues came up with a solution after some searching that MS Word understands the <br /> tag instead of page-break... etc. So he tried editing the rendered HTML on the browser with:
<br style="page-break-before: always" />
and it just worked in MS Word.
In React
But when he tried to generate the same code from React, he added:
<br style={{ pageBreakBefore: 'always' }} />
but React rendered the code into:
<br style="break-before: page;">
This is completely desired/expected from React, as page-break-before etc. are deprecated and the successor is break-before.
In MS Word
But MS Word doesn't understand the latest break-before styling.
So we need to bypass React compiler to generate the exact same deprecated code in this case to break the pages on MS Word.
How can we achieve that?
Related
I am accustomed to using the "#" character in Vue 3 so the location will still be referenced after Vite build, as in the following example:
<img src="#/assets/picture.jpg" />
With custom components from UI Frameworks, I can't figure out how to reference my images anymore! The "#" no longer works, since it is rendering out the custom component.
Element Plus example:
<el-image src="#/assets/picture.jpg" />
I tried using various permutations without the "#" sign. I couldn't readily find the answer in Vue 3 docs or docs for Element Plus or Chakra UI frameworks, and it is a hard question to search for here.
Okay, I found out how this can work, but it's hardly a solution
<script setup>
import imageUrl from "#/assets/picture.jpg";
</script>
<template>
<div>
<el-image :src="imageUrl" />
</div>
</template>
I am using VSCode's Prettier extension and trying to work on some html for a Salesforce Lightning Web Component. In my html, I have a div like so
<div class={someVar}</div>
This is the correct syntax for this, however, whenever I save Prettier adds quotes like this
<div class="{someVar}"
which causes a syntax error. I can't seem to find this setting anywhere in the prettier settings or anything online about how to disable this addition.
I have some other html files that this doesn't happen to when I save, just this new html file I just added.
I have a React app embedded in Wordpress page. It pulls content from a JSON api and displays it in various areas.
My problem is that all of the text content that comes from the api displays as escaped charachters i.e & displays where an ampersand should be.
My wordpress page has <meta charSet="utf-8" /> which I would normally expect to convert this, but is having no effecton the React content. Is it because the rendering is done within React? In which case do I need to set React somehow to be using UTF-8?
HTML (including entities) will be rendered as a string when being rendered as an expression:
{htmlString}
In order to parse HTML, there is dangerouslySetInnerHTML prop:
<span dangerouslySetInnerHTML={{__html: htmlString }} />
As the name says, it's unsafe and should be generally avoided. If a string comes from untrusted source or a source that could be exploited, malicious code can be rendered to a client.
The preferable way is to decode entities specifically, e.g. with html-entities:
import { Html5Entities } from 'html-entities';
const htmlEntities = new Html5Entities();
...
{htmlEntities.decode(htmlString)}
The problem could be avoided by not storing HTML entities in the first place if possible.
I can embed a YouTube-video by just putting the URL in the HTML-code with some space around it (see: http://codex.wordpress.org/Embeds), like:
<tr><td>
http://www.youtube.com/watch?v=xxxxxxxxx
</td></tr>
This works. But if I open the page with the visual editor and save it the code is deformated like:
<tr><td>http://www.youtube.com/watch?v=xxxxxxxxx</td></tr>
and a link is shown in the webpage instead of the (embedded) video. How can I prevent this?
Proper HTML note here - You should NOT be using blank lines for formatting anyway. The correct way to put in multiple blank lines would be
<div style="clear:both;"></div>
or
<br style="clear:both;" />
If you're using the GUI text editor, TinyMCE Advanced may help, as it supposedly has an option to kill that.
This is what I've found on the wordpress forum. Hope it helps.
In Tridion 2011 ( with UI 2012) I have a component with a field that is a list of Component Links. I'd like to enable inline editing on one of the fields that is being brought in via the Component Link. Is this possible?
I was able to enable inline editing for other non-Component Link fields, but the CL's seem to be an issue. I first tried the tcdl syntax, but that did not generate working SiteEdit Component Field markup. Finally I tried to edit the Start Component Field comment on the page to see if I could find a working syntax, but didn't come up with anything that worked.
Any ideas?
Nick's solution calling RenderComponentPresentation on your linked Components should work fine. Calling RenderComponentPresentations for linked Components should in general be considered a good practice, since you are after all rendering another Component Presentation.
But if you want to take control over the exact tags that are generated, you can do that too. When I needed that level of control, I created some custom functions that output the comments directly instead of fiddling with tcdl.
A DWT snippet that uses these functions:
<div class="ContentArea">
<div class="ContentFull">
##MarkComponentPresentation()##
<h1>##MarkComponentField('Title')####Component.Fields.Title##</h1>
<div>##MarkComponentField('Image')##<img src="##Image.ID##"/></div>
<div class="FullDescription">
<div class="FullDescriptionText">##MarkComponentField('Description')####Component.Fields.Description##</div>
</div>
...
So this uses MarkXxx instead of the regular RenderXxx to output just the comments.
You can find the code for these functions on the Tridion Practice wiki on Google code:
http://code.google.com/p/tridion-practice/wiki/TridionUI2012FunctionsForUseInHtmlTemplates
If you render this linked component using ##RenderComponentPresentation(componentTcmId, comonentTemplateId)## then the Enable Inline Editing for Components TBB will add the proper UI tags and you'll be able to edit your nested component.
The approach you've tried to render the Inline Editing commands manually should work. I suspect that the reason it did not work for you is because of some syntax error or invalid/missing parameter values.
If you share your entire rendered HTML document we may be able to help further.