JSFiddle - React, Tailwind, and code Playground

by avrelian

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://aehlke.github.io/tag-it/css/jquery.tagit.css">
<script src="https://aehlke.github.io/tag-it/js/tag-it.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/themes/flick/jquery-ui.css">
<div class="">
  <form>
        <label>Шаблон</label>
        <ul class="template">
          <li>name</li>
          <li>|capfirst</li>
          <li>|upper</li>
          <li>|cut_words_shorter:5</li>
        </ul>
    </form>
</div>

<button class="show-template">
  Показать шаблон
</button>
<input type="text" class="compiled-template">

CSS

.template-filter {
  background: yellow !important;
}

.template-tag {
  background: lightgreen !important;
}

.template-filter-parameter {
  float: right !important;
  width: 30px !important;
  margin: 1px 6px 0 6px !important;
  border: 1px dashed red !important;
  text-align: center !important;
  font-size: 0.9em !important;
  background: orange !important;
}

.compiled-template {
  width: 300px !important;
}

JavaScript

var tagit = $('.template').tagit({
	availableTags: ["name", "|capfirst", "|upper", "|cut_words_shorter:0"],
  allowDuplicates: true,
  beforeTagAdded: function(event, ui) {
  	if (ui.tagLabel.indexOf('|') == 0) {
    	// это фильтр
      ui.tag.addClass('template-filter')
      
      if (ui.tagLabel.indexOf(':') != -1) {
      	console.log("это фильтр с параметром")
      	// это фильтр с параметром
        textField = $('<input type="text" class="template-filter-parameter">');
        textField.val(ui.tagLabel.split(':')[1]);
        $(ui.tag).append(textField)
        $(ui.tag).find('.tagit-label').text(ui.tagLabel.split(':')[0])
      }
    } else {
    	// это тэг
      ui.tag.addClass('template-tag')
    }
  },
  onTagClicked: function(event, ui) {
    return false;
  }
}).sortable();

$('.show-template').click(function() {
	var tags = $('.template').tagit('assignedTags');
  tags.forEach(function(tag, index, tags) {
  	if (tag.indexOf(':') != -1) {
    	// надо заковычить аргумент
      var filterParameter = $('.template').find('li').eq(index).find('.template-filter-parameter').val();
      tags[index] = tag.split(':')[0]+':"'+ filterParameter +'"';
    }
  });

 $('.compiled-template').val('<' + tags.join('') + '>');
})

$('.template-filter-parameter').click(function(ev) {
  setTimeout(function() {
  	$(ev.target).focus();
  }, 1);
})