I am using draft js to create email templates in a reactJs application.
I implemented custom block types and with css I was able to align my columns properly (left, center, right). I used RichUtils to toggle block type.
However, my problem is when I am exporting the editor state into html, only the tags are exported, but I need the style too, so that the text-align style remains the same.
I use stateToHtml from draft-js-export-html when exporting the html.
I was also thinking about adding custom attributes, but I was not successful with it yet.
I appreciate every answer and thank you for the help in advance.
you can try this way:
import { ContentState, convertToRaw } from 'draft-js';
import draftToHtml from 'draftjs-to-html';
const currentContent = this.state.editorState.getCurrentContent();
return draftToHtml(convertToRaw(currentContent));
As an extension on #ArtemZubarev , there will be a problem when exporting it to html because it will contain no styles. So this requires 2 answers
How to get state to html: credits to #ArtemZubarev
import { ContentState, convertToRaw } from 'draft-js';
import draftToHtml from 'draftjs-to-html';
const currentContent = this.state.editorState.getCurrentContent();
return draftToHtml(convertToRaw(currentContent));
However, this will return unstyled elements, for example: <h1>Hello World</h1>.
This raises the question: How to keep the styling?
Option 1: CSS
Option 2: Create a render function that will inject the styles as inline
private injectHTML = (html?: string) => {
return `<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>
${
html
}
</body>
</html>`
}
Related
I want to allow all Alpine JS components (x-data, x-init, etc.) as attributes for all HTML tags in TinyMCE 4.
I tried to add them via a rule for extended_valid_attributes in different ways, but everything fails. Either they are still stripped from the code or they become valid, but all other attributes are then stripped.
Here are some examples of what I already tried, most of it I found in answers to other tinyMCE questions here (e.g. TinyMCE 4 - add custom styles/classes/attributes to any HTML tag) and read in the tinyMCE docs (https://www.tiny.cloud/docs-4x/configure/content-filtering/#extended_valid_elements, https://www.tiny.cloud/docs-4x/configure/content-filtering/#controlcharacters):
$alpineAttributes = 'x-data|x-init|x-show|x-text|x-html|x-model|x-for|x-transition|x-effect|x-ignore|x-ref|x-cloak|x-teleport|x-if|x-id';
$settings['extended_valid_elements'] = '*['. $alpineAttributes .']';
-> select all elements via *: doesn't work, the alpine attributes still get stripped
$settings['extended_valid_elements'] = '#['. $alpineAttributes .'],div,a,p';
-> here at least the attributes don't get stripped anymore for div, a and p tags, but all other attributes that would normally be allowed for each of those three now get stripped, because the list of allowed attributes doesn't get extended but overriden with my attributes.
$settings['extended_valid_elements'] = '#['. $alpineAttributes .'],*';
-> doesn't work, the alpine attributes still get stripped
$settings['extended_valid_elements'] = '#['. $alpineAttributes .']';
-> doesn't work, the alpine attributes still get stripped
Is there really no way to just EXTEND the list of allowed attributes for each element instead of completely overriding it with my rules in extended_valid_elements?
We can solve this issue using different strategy. We can change Alpine prefix from x- to data-x-.
As per the HTML standard x-data, x-init ... are not valid "custom attributes". The attributes need to have prefix data-.
TinyMCE allows data-* custom data attributes by default, without having to specify them in any rules. So instead of forcing Alpine prefixes on TinyMce we can simply change the prefix on Alpine, using Alpine.prefix("data-x-").
Demo: on codepen
<!DOCTYPE html>
<html>
<head>
<style>
#output {
font-family: monospace;
font-size: 0.9em;
color: rgb(83, 23, 23);
}
</style>
</head>
<body>
<script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>
<script src="https://unpkg.com/alpinejs#3.8.1/dist/cdn.min.js"></script>
<script>Alpine.prefix("data-x-");</script>
<p data-x-data="{date:'Date: '+ new Date().toISOString()}" data-x-text="date">date place holder</p>
<textarea id=editor>Tiny!</textarea>
<input type="button" id="btn" value="Show editor HTML content" />
<div id=output></div>
<script type="text/javascript">
let content = `<br><p data-x-data="{date: 'Date: '+new Date().toISOString()}" data-x-text="date">date place holder</p>`;
tinymce.init({
selector: '#editor',
schema: 'html5',
setup: function (editor) {
editor.on('init', function (e) {
editor.setContent(content);
setTimeout(() => Alpine.initTree(editorDOM()), 200);
});
}
});
btn.onclick = function () {
output.innerText = tinyMCE.activeEditor.getContent();
}
function editorDOM() {
return (editor_ifr.contentWindow
? editor_ifr.contentWindow.document
: editor_ifr.contentDocument).body;
}
</script>
</body>
</html>
The alpine x-text attribute works inside the editor as well, and it shows current date. This is because TinyMce allows our data-x-text attribute.
Note:
In the demo I've used TinyMce latest version 5. It works on version 4 as well. Tested using following CDN:
<script src='https://cdn.tiny.cloud/1/no-api-key/tinymce/4/tinymce.min.js'></script>
TinyMCE doesn't work on StackOverflow because of iframe restrictions that is why I've provided the codesandbox link.
I have a really special issue. I am using AngularTS with C# on serverside and Typescript on clientside.
I want to add to our application the possibility, that the customer can add css styles in a textbox or add file locations (external).
In a custom component I want to add the html code from the official site of the customer. The customer should add the css files or text in order to show the content on our page like the content of the official site.
Unfortunately I could not find a possibility to add the css files.
#Component({
selector: 'customer-footer',
templateUrl: './customer-footer.component.html'
styleUrls: getCSS()})
export function getCSS(): string [] {
var styles: string[] = [];
styles.push("https://");
return styles;}
This doesn't work because AOT is not compatible with static refs.
I tried to add the css Content in styles Tag (Body-Area):
<style type="text/css">
{{footerCSS}}</style>
My best result was to add a Object (css) in ngStyle to the displaying .
<div *ngIf="!fixedBottom"
[innerHtml]="footerHtml"
[ngStyle]="footerCSS"></div>
Unfortunately I could not find a way to convert css code like this one:
.flatWeatherPlugin {
font-size: inherit;
width: 100%;
}
.flatWeatherPlugin p, .flatWeatherPlugin h2, .flatWeatherPlugin h3, .flatWeatherPlugin ul, .flatWeatherPlugin li {
padding: 0;
margin: 0;
color: inherit;
}
To a functional object. Has someone an idea or a helpful message?
In typescript you can use this to load css dynamically
require('css/stylesheet.css')
I have a Html page which has anchor tag, I Need to remove certain style applied already in html page for anchor tag while the html page is opened throw Iframe.
HTML Content as below:
<html>
<body>
<div>some content<a href="http://www.website.com" name="test1"/> some content </div>
</body>
</html>
I tried as below:
a[name^="test1"]:before{
content:"[prefix text]";
display:inline;
color:red;
}
a[name^="test1"]:after{
content:"suffix text";
display:inline;
color:green;
}
iframe a[name^="test1"]:before{
display:none;
}
iframe a[name^="test1"]:after{
display:none;
}
But inside "iframe" also these styles has been applying.
You have to first detect if your page is rendered inside an iframe and in that case apply an alternative CSS. It' can't be done with vanilla CSS then it has to be done with some JavaScript:
<script type="text/javascript">
function getTopWindow() {
try {
return window.top;
} catch {
// If we can't access window.top then browser is restricting
// us because of same origin policy.
return true;
}
}
function isRendererdInFrame() {
// If top window is null we may safely assume we're in iframe
return window.self !== getTopWindow();
}
function loadCss(location) {
if(document.createStyleSheet) {
document.createStyleSheet('http://server/stylesheet.css');
} else {
var styles = "#import url('" + location + "');";
var newSS=document.createElement('link');
newSS.rel='stylesheet';
newSS.href='data:text/css,'+escape(styles);
document.getElementsByTagName("head")[0].appendChild(newSS);
}
}
</script>
Code to load CSS from JavaScript is from How to load up CSS files using Javascript?.
With all that code you may simply write (even just after that inside <script> block):
var cssToLoad = isRendererdInFrame() ? "iframe.css" : "not-iframe.css";
loadCss("http://server/" + cssToLoad);
Of course same technique can be applied to patch CSS with iframe specific styles:
if (isRenderedInFrame())
loadCss("http://server/iframe-patch.css");
i dont know how to detect if page is opened in iframe or not, but there is one possible(not very nice) workaround, you can set iframe to width which is not commonly used by devices (example 463px) and then set media query for this resolution which apply when content is shown in this iframe. This is really nasty way since its not 100% and i would not recommending that.
Using import.io connector, I was able to extract a segment of html from the source web site. This result is returned as "html" type. The result is a single table of data with styles defined in the body html but not extracted. This resulted in the html segment extracted displayed with NO style and looking terrible.
Is there a way to INCLUDE extracting CSS styles, i.e. multiple css hrefs included in the source html, like
<link rel="stylesheet" href="http://cdn.ideamelt.com/1.3/css/ideamelt.min.css">
Also at the same time to include dynamic css like the following:
<style type="text/css">
#financials-iframe-wrap {
width: 635px
}
.td_genTable table {
border: none
}
tr.net {
font-weight: bold;
border-top: 1px solid #009EC2
}
.td_genTable td {
border: 0;
padding: 0
}
a.h3-link {
color: #ffffff;
text-decoration: underline;
float: right
}
</style>
... in the connector extract so that the resultant html segment can be properly styled and displayed?
Thanks in advance!
This is a fairly interesting use case.
You can extract the link and style elements as html using a custom xpath such as //link and //style
You can then output them into your page HTML and that will import the css documents from the pages and should include the styling.
(Be aware that the website in question may not want you to be taking their css and using it on a different website, so they may block downloads of css to websites hosted in different domains)
Sorry, I'm not familiar with Import.io.
Is there way to get refs from links and content from styles? Are you using javascript?
If so, then you may use the folowing js functions to include your styles into the target document:
// Include css from 'style' tag
function include_css (src) {
var _head = document.head || document.getElementsByTagName('head')[0] || document.documentElement,
style = document.createElement ('style');
style.setAttribute ('type', 'text/css');
if (style.styleSheet){
style.styleSheet.cssText = src;
} else {
style.appendChild (document.createTextNode (src));
}
_head.appendChild (style);
}
// Include css referred by 'link' tag
function include_link (ref) {
var _head = document.head || document.getElementsByTagName ('head')[0] || document.documentElement,
style = document.createElement ('link');
style.setAttribute ('rel', 'stylesheet');
style.setAttribute ('type', 'text/css');
style.setAttribute ('href', ref);
_head.appendChild (style);
}
I' like to add a different background image to certain pages - is there a way to adjust the following notation:
body {background: url('someimage.jpg');
to
someselector body:url('somedifferentimage.jpg');
perhaps a way to select based on the title or the html doc name?
Normally what you'd do is make a different stylesheet for each page and add the declaration. So just:
body {
background-image: url('somedifferentimage.jpg');
}
Linked to by the page you want to override. If that's not possible and a little more progressive enhancement is an option, you could try JavaScript of some ilk:
document.body.style.backgroundImage = "url('" + document.title + ".jpg')";
for example.
Add a class to your body tag where you want the custom style.
css:
.customBody {
background-image: url('somedifferentimage.jpg');
}
html:
<body class="customBody">
The more commonly-accepted way is to put a class on the body element:
<body class="specialpage">
And then apply the background only to <body>s of that class.
body.specialpage { background-image: url(...); }