[QUESTION] how to create custom element

[mohammed-gaber-ramadan]

Hi guys,

I'm new in this so I'm sorry for my question.

I'm trying to use grapesjs to edit email templates.

Is it possible to have dynamic fields in the editor ? for example [first name], [last name], [email address] ..etc.

so before I send the email, I will replace those dynamic fields to the real data.

I need somehow to allow the user to use dynamic fields inside the editor.

I appreciate your help.

Thanks

[alikabeer32]

Can you give a short example of a mail that uses it so I can better understand what you mean by a "dynamic field"?

[mohammed-gaber-ramadan]

For example we have 5 dynamic fields (first name, last name, email,phone, company name) Our user will go to the page to create an email template to be used for example to welcome his clients.

So he will start using the builder to design his email template and while he is doing that he want to drop some of those dynamic fields in hos email template.

For example he will drop text component and write “Dear” and after that he want to drop the dynamic fields (first name , last name)

Thats it, then my application before send this email template to the user clients, will replace those dynamic fields with the real values from database.

[alikabeer32]

You could create a block like so

<div data-gjs-type="default" class="first_name">
    first-name
</div>

Then in your back-end you just need to replace "first-name" with the actual data every time that you need to send the mail.

[alikabeer32]

I don't know if this is the perfect solution but it's something I would do. Let me know if it works for you.

[mohammed-gaber-ramadan]

Thanks very much, it would help but I think i will need to have a block for the normal text and this block for the dynamic first name field.

a friend suggested to handle it using ckeditor. because we already have it in our application as seen in the attached snapshot. do you know how to get the ckeditor object in grapesjs and then we configure it ? this will completely handle my scenario.

[alikabeer32]

You can configure ckeditor very easily. For example - CKEDITOR.config.autoParagraph = false; https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_config.html for further reference

[mohammed-gaber-ramadan]

Thanks very much.

[alikabeer32]

Did it work out?

[mohammed-gaber-ramadan]

yes, i will do the following :

I will use the news letter plugin https://github.com/artf/grapesjs-preset-newsletter

and i will use ckeditor plugin https://github.com/artf/grapesjs-plugin-ckeditor

and I will add a custom drop down list contains the dynamic fields names in the ckeditor configuration.