textpattern | A flexible , elegant , fast and easy-to-use content | Content Management System library

I declared var_valid=['var1']; before the tinymce object and pass in the variable var_valid to variable_valid key in tinymce object. In onSubmit: function (api) {}, I clear the element in var_valid array by var_valid.length = 0; and add in new value to var_valid by var_valid.push('input');. In this way, editor did change variable_valid after user submit the dialog box. Now, when user type new variable ({{input}}),it show in span blue block and when user type the old removed variable({{var1}}) no more show in blue block .But, the old variable that has been inserted into the editor before user submit the dialog box remain in blue block. I add tinymce.triggerSave() after reset and close dialog. This refresh the changes and convert old removed variable that exist on editor to display as {{var1}}.

This setting.setup work when we insert whole function in without calling by variable

In the end this is what I ended up with:

What you are really asking here are two separate questions...

1. How do I take Base64 binary images from TinyMCE and store them in an appropriate format?
2. What is the best way to include images in an HTML email?

How do I take Base64 binary images from TinyMCE and store them in an appropriate format

TinyMCE has a built in mechanism to address this via its images_upload_url configuration option. There is an entire page in the TinyMCE documentation on how this works:

https://www.tiny.cloud/docs/advanced/handle-async-image-uploads/

The net is that you can have TinyMCE send the image files to an endpoint of your choosing and then convert it to whatever format you need. You don't need to keep it as a Base64 binary and it is very rare that you want the Base64 binary as the permanent format.

As for the other question...

What is the best way to include images in an HTML email?

Ultimately, the real question you need to answer is "what is the best way (for my use case) to insert an image in an email". This is a very broad topic that has been answered many times - a little research should lead you to the most common approaches and their pros/cons:

https://sendgrid.com/blog/embedding-images-emails-facts/ https://www.campaignmonitor.com/blog/how-to/2008/08/embedding-images-in-email/ https://www.quora.com/Whats-the-best-practices-for-embedding-images-into-HTML-emails

As there are multiple options it really comes down to how the pro/cons of each stack up against your requirements.

If you want TinyMCE to style bootstrap elements you need to pass the Bootstrap CSS to the editor itself via content_css. Here is a simple example:

https://fiddle.tiny.cloud/d6haab

In specific please note the inclusion of this configuration option:

In taking your configuration and using TinyMCE Fiddle these things seem to be working fine:

http://fiddle.tinymce.com/zwhaab

Do they work for you there? If so there is likely something else in your application impacting things.

Finally I found the answer. This is working for me. I used the same technique like Chrome. Thank you @stuartd

You can listen to the Tab key and add 4 spaces. Check the fiddle for a working example. Documentation

That is part of the quickbars plugin: https://www.tiny.cloud/docs/plugins/quickbars

There are two types of quick bars and if you want either of them to not appear you need to set them to an empty string like this: