Unable to edit button styles and content
wasifnaeem opened this issue · comments
Muhammad Wasif Naeem commented
I am using Angular 17
. In the following component, I am unable to edit the content and styles for the button. How to solve this? Also mj-attributes
not working for button and text styling generally.
import { Component, OnInit } from '@angular/core';
import grapesjs, { Editor, usePlugin } from 'grapesjs';
import gjsMjml from 'grapesjs-mjml';
@Component({
selector: 'app-email-builder-test',
template: '<div id="gjsTest"></div>',
styleUrl: './email-builder.component.scss'
})
export class EmailBuilderComponent implements OnInit {
masterTemplate: string
editor: Editor
constructor() { }
ngOnInit(): void {
this.initGrapesJS()
this.editor.setComponents(`
<mjml>
<mj-head>
<mj-font name="Poppins" href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap" target="_blank" rel="nofollow" />
<mj-title>Subscription Cancelled</mj-title>
<mj-attributes>
<mj-all font-family="Poppins, sans-serif" />
<mj-text font-size="16px" color="#333" line-height="24px" />
<mj-button background-color="#007bff" color="white" />
</mj-attributes>
<mj-style>
.highlight {
color: #007bff;
}
</mj-style>
</mj-head>
<mj-body background-color="#f0f0f0">
<mj-section>
<mj-column>
<mj-image width="100px" src="https://via.placeholder.com/100/CDDDDD/666666?text=Logo" />
</mj-column>
</mj-section>
<mj-section background-color="#ffffff" padding="20px">
<mj-column>
<mj-text font-size="20px" font-weight="600">Subscription Cancelled</mj-text>
<mj-divider border-color="#dddddd" />
<mj-text>
Hi there,
<br/><br/>
We're sorry to see you go! Your subscription has been successfully cancelled. You will not be charged moving forward.
</mj-text>
<mj-text>
If you decide to come back and enjoy our services again, you can resubscribe at any time by clicking the button below.
</mj-text>
<mj-button href="https://www.yourwebsite.com/resubscribe" font-family="Poppins, sans-serif">
Resubscribe Now
</mj-button>
</mj-column>
</mj-section>
<mj-section background-color="#ffffff" padding="20px">
<mj-column>
<mj-text>
If you have any questions or need help, our support team is here for you. Contact us at
<a class="highlight" href="mailto:support@yourwebsite.com">support@yourwebsite.com</a>.
</mj-text>
</mj-column>
</mj-section>
<mj-section background-color="#eeeeee" padding="20px">
<mj-column>
<mj-text color="#999999" font-size="12px">
You're receiving this email because you had a subscription with our service. If you believe this is a mistake, please ignore this email.
</mj-text>
</mj-column>
</mj-section>
</mj-body>
</mjml>
`)
}
private initGrapesJS() {
this.editor = grapesjs.init({
container: '#gjsTest',
storageManager: {
type: 'remote'
},
plugins: [gjsMjml]
})
}
}
Olivier Monnier commented
Hi, same issue on Vue js 3 for edit text in mj-button.