on ajoute une gestion des urls par tag, recup du plugin de fip

css/jquery.tag-editor.css

@@ -0,0 +1,45 @@
+/* surrounding tag container */
+.tag-editor {
+    list-style-type: none; padding: 0 5px 0 0; margin: 0; overflow: hidden; border: 1px solid #eee; cursor: text;
+    font: normal 14px sans-serif; color: #555; background: #fff; line-height: 20px;
+}
+
+/* core styles usually need no change */
+.tag-editor li { display: block; float: left; overflow: hidden; margin: 3px 0; }
+.tag-editor div { float: left; padding: 0 4px; }
+.tag-editor .placeholder { padding: 0 8px; color: #bbb; }
+.tag-editor .tag-editor-spacer { padding: 0; width: 8px; overflow: hidden; color: transparent; background: none; }
+.tag-editor input {
+    vertical-align: inherit; border: 0; outline: none; padding: 0; margin: 0; cursor: text;
+    font-family: inherit; font-weight: inherit; font-size: inherit; font-style: inherit;
+    box-shadow: none; background: none; color: #444;
+}
+/* hide original input field or textarea visually to allow tab navigation */
+.tag-editor-hidden-src { position: absolute !important; left: -99999px; }
+/* hide IE10 "clear field" X */
+.tag-editor ::-ms-clear { display: none; }
+
+/* tag style */
+.tag-editor .tag-editor-tag {
+    padding-left: 5px; color: #46799b; background: #e0eaf1; white-space: nowrap;
+    overflow: hidden; cursor: pointer; border-radius: 2px 0 0 2px;
+}
+
+/* delete icon */
+.tag-editor .tag-editor-delete { background: #e0eaf1; cursor: pointer; border-radius: 0 2px 2px 0; padding-left: 3px; padding-right: 4px; }
+.tag-editor .tag-editor-delete i { line-height: 18px; display: inline-block; }
+.tag-editor .tag-editor-delete i:before { font-size: 16px; color: #8ba7ba; content: "×"; font-style: normal; }
+.tag-editor .tag-editor-delete:hover i:before { color: #d65454; }
+.tag-editor .tag-editor-tag.active+.tag-editor-delete, .tag-editor .tag-editor-tag.active+.tag-editor-delete i { visibility: hidden; cursor: text; }
+
+.tag-editor .tag-editor-tag.active { background: none !important; }
+
+/* jQuery UI autocomplete - code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css */
+.ui-autocomplete { position: absolute; top: 0; left: 0; cursor: default; font-size: 14px; }
+.ui-front { z-index: 9999; }
+.ui-menu { list-style: none; padding: 1px; margin: 0; display: block; outline: none; }
+.ui-menu .ui-menu-item a { text-decoration: none; display: block; padding: 2px .4em; line-height: 1.4; min-height: 0; /* support: IE7 */ }
+.ui-widget-content { border: 1px solid #bbb; background: #fff; color: #555; }
+.ui-widget-content a { color: #46799b; }
+.ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus { background: #e0eaf1; }
+.ui-helper-hidden-accessible { display: none; }

formulaires/gamumail.html

@@ -1,3 +1,5 @@
+<link rel="stylesheet" href="[(#CHEMIN{css/jquery.tag-editor.css}|timestamp)]" type="text/css" media="screen" charset="utf-8">
+
 <div class="formulaire_spip formulaire_#FORM">
 
 [<p class="reponse_formulaire reponse_formulaire_erreur">(#ENV*{message_erreur})</p>]
@@ -13,7 +15,7 @@
 			<div class="editer editer_[(#GET{name})][ (#GET{obli})][ (#GET{erreurs}|oui)erreur]">
 				<label for="#GET{name}">Pour</label>
 				[<span class="erreur_message">(#GET{erreurs})</span>]
-				<input required type="text" class="text " name="#GET{name}" id="#GET{name}" value="#ENV{#GET{name}}" >
+				<input required type="text" class="text tagEditor" name="#GET{name}" id="#GET{name}" value="#ENV{#GET{name}}" >
 			</div>
 		</div>
 
@@ -24,7 +26,7 @@
 			<div class="editer editer_[(#GET{name})][ (#GET{obli})][ (#GET{erreurs}|oui)erreur]">
 				<label for="#GET{name}">Copie à</label>
 				[<span class="erreur_message">(#GET{erreurs})</span>]
-				<input type="text" class="text mail_cc" name="#GET{name}" id="#GET{name}" value="#ENV{#GET{name}}" >
+				<input type="text" class="text mail_cc tagEditor" name="#GET{name}" id="#GET{name}" value="#ENV{#GET{name}}" >
 			</div>
 		</div>
 
@@ -35,7 +37,7 @@
 			<div class="editer editer_[(#GET{name})][ (#GET{obli})][ (#GET{erreurs}|oui)erreur]">
 				<label for="#GET{name}">Copie cachée à</label>
 				[<span class="erreur_message">(#GET{erreurs})</span>]
-				<input type="text" class="text mail_cc" name="#GET{name}" id="#GET{name}" value="#ENV{#GET{name}}" >
+				<input type="text" class="text mail_cci tagEditor" name="#GET{name}" id="#GET{name}" value="#ENV{#GET{name}}" >
 				<p class="explication">Liste d'emails séparée par une virgule</p>
 			</div>
 		</div>
@@ -110,3 +112,21 @@
 	</div></form>
 
 </div>
+
+<script src="[(#CHEMIN{js/jquery.tag-editor.min.js}|timestamp)]" type="text/javascript"></script>
+<script src="[(#CHEMIN{js/jquery.caret.min.js}|timestamp)]" type="text/javascript"></script>
+
+<script type="text/javascript">
+
+	jQuery(function() {
+		gamumail();
+		onAjaxLoad(gamumail);
+
+		function gamumail(){
+			$(".tagEditor").tagEditor({
+				delimiter: ',; '
+			});
+		}
+	});
+
+</script>

js/gamumail.js

@@ -0,0 +1,20 @@
+jQuery(function () {
+	gamumail();
+	//onAjaxLoad(gamumail);
+
+	function gamumail() {
+		let cc = $('#cc').val();
+		if (cc) {
+			let Tcc = cc.split(',');
+			if (Tcc.length) {
+				let tag_cc = '';
+				Tcc.forEach((e) => {
+					tag_cc = `<span class="tag">${e}</span>`;
+					console.log(tag_cc);
+					$('#tag_cc').val(tag_cc);
+				});
+			}
+			console.log(Tcc);
+		}
+	}
+});

js/jquery.caret.min.js

@@ -0,0 +1,2 @@
+// http://code.accursoft.com/caret - 1.3.3
+!function(e){e.fn.caret=function(e){var t=this[0],n="true"===t.contentEditable;if(0==arguments.length){if(window.getSelection){if(n){t.focus();var o=window.getSelection().getRangeAt(0),r=o.cloneRange();return r.selectNodeContents(t),r.setEnd(o.endContainer,o.endOffset),r.toString().length}return t.selectionStart}if(document.selection){if(t.focus(),n){var o=document.selection.createRange(),r=document.body.createTextRange();return r.moveToElementText(t),r.setEndPoint("EndToEnd",o),r.text.length}var e=0,c=t.createTextRange(),r=document.selection.createRange().duplicate(),a=r.getBookmark();for(c.moveToBookmark(a);0!==c.moveStart("character",-1);)e++;return e}return t.selectionStart?t.selectionStart:0}if(-1==e&&(e=this[n?"text":"val"]().length),window.getSelection)n?(t.focus(),window.getSelection().collapse(t.firstChild,e)):t.setSelectionRange(e,e);else if(document.body.createTextRange)if(n){var c=document.body.createTextRange();c.moveToElementText(t),c.moveStart("character",e),c.collapse(!0),c.select()}else{var c=t.createTextRange();c.move("character",e),c.select()}return n||t.focus(),e}}(jQuery);