Add template items in TinyMCE

Question

I'd like to add "template items" in tineMCE editor. The template items act like a placeholder for dynamically inserted data.

An example:

Instead of writing: "Hi {firstname}, you are {years} years old." I'd like to insert a object instead of the "{firstname}" that gets replaced to "{firstname}" when saving against the server. It should also translate back when loading it into the editor. The object should be selected from a dropdown (but that should be easy once the other things are fixed).

Answer 1

In this case you eighter need to replace the placeholder when saving:

tinymce.activeEditor.onSaveContent.add(function(ed, o) {
  console.debug(o.element.nodeName);
  // do your replacement here using a regular expression and the saved value from the dropdown selection
});

or when selecting a name from the dropdown select box of your own plugin.

To return it back when loading you will need to store the replacement string in the satabase too and replace it on startup of tinymce using a regular expression.

  // Andreas from db should be placed in a custom initialisation paramter like this:
db_firstname_save: '<?php echo $value_from_db; ?>', // $value_from_db = 'Andreas'

Replace the value from DB using a regular expression

tinymce.activeEditor.onInit.add(function(ed) {
  console.debug('Editor is done: ' + ed.id);
  // do your replacement here using a regular expression
  ed.setcontent(ed.getContent.replace(ed.getParam('db_firstname_save'),'{firstname}'));
});

In order to select the Firstname to be saved to db from a dropdown you will need to create your own plugin. How to do that is to be found on the tinymce documentation wiki.