Create dynamic form with tags

Question

Before you read the description below, know that I’m looking for a direction, not for you to code for me. Library references that might help me, some technique I need to know.

What I need to do

To illustrate the case, better use an image. Let’s say we have the form above (tinymce Editor), and below it I have some tags. The user can pull this tag and put it in the text form, thus leaving.

The user could pull the same tag as many times as he wanted into the form, appearing more than once with different names: nome da empresa,nome da empresa1,nome da empresa2 and so on.

Later, using a backend language, I would need to read these tags and replace with a database content, which in this case is the company name.

Answer 1

The section below presents some problems, such as the possibility of the cursor after inserting a tag, among others.

but basically you will have to send the contents of the div to the server

var textarea = document.getElementById("textarea");
textarea.addEventListener("keydown", function (event) {
  console.log(event);
});

var tags = document.querySelectorAll(".tag");
[].forEach.call(tags, function (tag, indice) {
  tag.addEventListener("click", function (event) {
    var novaTag = tag.cloneNode(true);
    var espaco = document.createTextNode("\u00A0");
    textarea.appendChild(novaTag);
    textarea.appendChild(espaco);
  });
});

var enviar = document.getElementById("enviar");
enviar.addEventListener("click", function () {
  var texto = [].map.call(textarea.childNodes, function (node, indice) {
    if (node.nodeType == 3)
      return node.textContent;
    if (node.nodeType == 1)
      return "{" + node.id + "}"
    return "";
  }).join("");
  
  alert(texto);
});

#textarea {
  -moz-appearance: textfield-multiline;
  -webkit-appearance: textarea;
  border: 1px solid gray;
  font: medium -moz-fixed;
  font: -webkit-small-control;    
  overflow: auto;
  padding: 2px;
  resize: both;
  
  width: 100%;
  height: 120px;
}

.tag {
  display: inline-block;
  padding: 0px 5px;
  margin: 5px;
  border-radius: 5px;
  background-color: whitesmoke;
  box-shadow: 0px 0px 5px black;
  cursor: pointer;
}

#nome_empresa:before {
  content: 'Nome da Empresa';
}

#nome_pessoa:before {
  content: 'Nome da Pessoa';
}

<div>
  <span class="tag" id="nome_empresa"></span>
  <span class="tag" id="nome_pessoa"></span>
</div>
<div id="textarea" contenteditable>
</div>
<button id="enviar">Alert(Texto a ser enviado)</button>

if type Meu nome é [Nome da Pessoa] e trabalho na [Nome da Empresa] and click to send, the string will be formatted to Meu nome é {nome_pessoa} e trabalho na {nome_empresa}

on the server side you can use a regular expression... an example with Avascript:

var _tmpl = "Meu nome é {nome_pessoa} e trabalho na {nome_empresa}";
var model = { nome_pessoa: "Toby", nome_empresa: "Contoso S.A." };

var texto = _tmpl.replace(/{(\w+)}/g, function (str, prop) {
  return model[prop];
});

console.log(texto);

Answer 2

Allan, since you are using Tinymce you can use a feature of it which are the Custom Toolbar menu button.

Within init you can declare the setup and use the editor parameter to insert into the chosen position.

Example:

setup: function(editor) {
     editor.insertContent("Minha Empresa");
}

See working: http://codepen.io/gabrielr47/pen/yObyNv