Jump to content

How to create your own Email Template within CKEditor


turner2f

Recommended Posts

How to create your own Email Template within CKEditor


I successfully created my own custom newsletter-style template, with its own graphical header within CKEditor

This is for those of you wanting to know how to create your own custom HTML template when you go to  "Account Actions" - - > "Email Client" - - > from within your Admin panel

=========================

Within the CKEditor folder open up the Default JS file found at...
 

/vendors/ckeditor/plugins/templates/templates/default.js
 

( as of september 17, 2020 in Blesta 4.11.2 this no longer the path.
See the new path at . . .   
https://www.blesta.com/forums/index.php?/topic/10716-how-to-create-your-own-email-template-within-ckeditor/&do=findComment&comment=67645   )

================
 

Make certain to place every HTML tag and every line of text between two (2) commas ,  along with a plus-sign at the end of each of the ending-commas.

FYI - The plus-sign should NOT come after the VERY LAST HTML tag.

=========================

CODE EXAMPLE:

                        '<span style="font-size:18px">'+
                        '<strong>'+
                        '<span style="color:#003366">'+
                        '<span style="font-family:Arial,Helvetica,sans-serif">'+
                        'Here is some sample text'+
                        '</span>'+
                        '</span>'+
                        '</strong>'+
                        '</span>'

 

========================

ONLINE EXAMPLE:

https://github.com/ckeditor/ckeditor-dev/blob/master/plugins/templates/templates/default.js

=========================

 

If you do not see any changes from within the front-end  WYSIWYG for CKEditor , try clearing your browser's cache.

 

Please  " Vote this Up "  if you like it. :)

 

 

Link to comment
Share on other sites

Very nice! :D

Just FYI on the HTML-in-JavaScript where you mention adding plus-signs--the plus-sign is the JavaScript concatenation operator which appends the string before it with the string after it. You could just have one large string (contained in single-quotes or double-quotes) without any concatenation, but I think the original template is written that way for readability. I'm sure those familiar with JavaScript will already recognize that.  :blesta:

Link to comment
Share on other sites

Hello Tyson.

Feel free to give it a try.

If it works, please post a sample code.

=====

But yes, I would say that the way they have it makes it easier to read.

I also used DreamWeaver to "find and replace" all the commas and plus-signs into the code for expediency.

=======

And thanks for " Voting it up ".

 

Link to comment
Share on other sites

  • 2 years later...

As of September 16, 2020 in version 4.11.2, not able to RE-add a template after upgrading.

It's as if no code changes were made at all, even during some test trouble shooting.

Going to create a Support Ticket.

See :  https://www.blesta.com/forums/index.php?/topic/14174-can-no-longer-add-an-email-template-for-wysiwyg-in-ck-editor/

 

Link to comment
Share on other sites

Happy to say that the issue is [ RESOLVED ].

According to the Support post at . . .

https://www.blesta.com/forums/index.php?/topic/14174-can-no-longer-add-an-email-template-for-wysiwyg-in-ck-editor/#comment-67637

 

https://dev.blesta.com/browse/CORE-2871

Jono ( developer ) wrote:

" We moved ckeditor to vendors/blesta/ckeditor.  I wasn't directly involved but it looks like we did so in order to maintain some custom changes. "



___________________________________________
 

As of September 17, 2020    (  In Blesta 4.11.2 )


STEP 1 ) - So now you go to  /vendors/blesta/ckeditor/plugins/templates/templates/default.js


STEP 2 ) - Make the code changes to add in your own template.

ONLINE EXAMPLE:

https://github.com/ckeditor/ckeditor-dev/blob/master/plugins/templates/templates/default.js


STEP 3 ) - If you do not physically see your new custom template from within the front-end 
                  WYSIWYG for CKEditor , try clearing your browser's cache.




=========

Here is a bonus link see some different examples on how you can use these Custom Templates  . . .

https://youtu.be/wxTCJasKLYI


Please  " Vote this Up "  if you like it.  :)

 

...

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...