Trying to support field tokens

[gordon-matt]

I am trying to figure out how I can insert "field tokens" in the templates. For example:

Dear {FirstName} {LastName},

Obviously my own backend will replace these tokens with real values before sending the emails. Currently, we will have to ask the users to manually type these tokens.. but that is a problem because they don't know what the possible tokens are. What I want is for a way to pass an array of possible tokens into GrapesJS editor and then the user can choose a token and it will insert at the cursor position. I think I know 95% of the solution already.. I will probably do something like this:

1. Add a custom button:

editor.Panels.addButton('options', [{
	id: 'show-tokens',
	className: 'fa fa-token',
	command: 'show-tokens',
	attributes: { title: 'Tokens' }
}]);

2. Add the command

editor.Commands.add('show-tokens', {
	run: function (editor, sender) {
		sender && sender.set('active', 0); // turn off the button
		// TODO: Show some list of tokens (like modal dialog or something...)
	}
});

3. From modal dialog of tokens, user will select a token (example: {FirstName})

4. On button click, I want to insert that selected token into the GrapesJS editor at the current cursor position.

So I think I only need help with step 4. How can I insert at current cursor position? Thanks in advance.

[gordon-matt]

Actually.. I just found that issue 481 in the main repo answers this question, here: GrapesJS Issue 481.

That looks perfect.. except I have 1 quick question... because I am new to Grapes.. What if I replace your RichTextEditor with CKEditor or TinyMCE? Will this solution still work?

[gordon-matt]

Sorry, never mind... I see there's a solution using a block instead of a rich text editor.. that looks perfect. I will close this issue and try to implement something like I see in that issue I previously mentioned. If I get any problems, I will mention it there, as I see it's still an open issue.