Create dynamic form with tags

Question

Create dynamic form with tags

Navigation

#1 by (3 votes)
#2 by (3 votes)

-2

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

What do I need to do

Toillustratethecase,itisbettertouseanimage.Let'ssaywehavetheformabove(tinyMCEEditor),andbelowitIhavesometags.Theusercanpullthistagandputitinthetextform,thusleavingit.

The user could pull the same tag as many times as he wanted to 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 them with a database content, which in this case is the company name.

javascript front-end tinymce

asked by anonymous 22.03.2016 / 14:58

2 answers

3

Allan, since you are using TinyMCE you can use a feature of it that is Custom toolbar menu button .

Inside the init you can declare the setup and use the editor parameter to insert in the chosen position.

Example:

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

See it working: link

22.03.2016 / 17:23

how do I get this page error with this code? How do I repeat a sentence that the user typed in n times in js?

score 3 · Accepted Answer

The following section 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 you 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 javaScript:

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);