拖动精确区域Javascript中的任何位置

Question

这是我的问题，我正在尝试允许用户在“链接”按钮的onClick事件期间添加他们想要的动态范围。创建动态范围时，我将其设置为draggable="true"属性，但是使用我找到的函数，允许将元素拖到任何位置，所讨论的范围将保持固定在“smsArea”区域。

是否有简单的方法可以拖动＆amp;删除精确区域中元素的任何位置？

var area = document.getElementById("template");
var message = document.getElementById("message");
var maxLength = 160;
var re = new RegExp("ô|â|ê|ç");

var myTags = new Object();

myTags['company']   = '#ENTREPRISE#';
myTags['city']      = '#VILLE#';
myTags['link']      = '#LIEN#';
myTags['firstname'] = '#PRENOM#';
myTags['lastname']  = '#NOM#';
myTags['title']     = '#TITRE#';

$(document).ready(function() {
    // first 2 divs (what's already rendered) will be made draggable
    $("#test").draggable();
    
    // listen for new divs added, make these new elements draggable
    $("#smsArea").on("DOMNodeInserted", "#test", makeDraggable);
    
    // next 3 divs inserted are draggable
});

var cursorPosition = 0;

$("#smsArea").on('keyup mouseup',function(e)
{	
        cursorPosition = window.getSelection().getRangeAt(0);
 
 });

    
function makeDraggable() {
	$(this).draggable();
}

function editTag(zoneId,tag)
{
	var zoneDiv 	= document.getElementById(zoneId + 'Area');
	var myButton 	= document.getElementById(zoneId + tag.ucfirst());
	var myLabel 	= document.createElement('span');

	var labels 		= zoneDiv.getElementsByTagName('span');
	var spanSize	= labels.length;

	var delflag  = 0;
	var delIndex = 0;

	if(spanSize != 0)
	{

		for (myLabId = 0; myLabId < spanSize; myLabId++)
		{
			var currentLabel = labels[myLabId];
			if(currentLabel.innerHTML === myButton.innerHTML)
			{
				delflag = 1;
				delIndex = myLabId;
			}
		}
	}

	if(delflag == 1)
    {
        zoneDiv.removeChild(labels[delIndex]);
    }
	else
	{
		myLabel.setAttribute('class', 'label label-info');
		myLabel.setAttribute('data-effect', 'pop');
		myLabel.setAttribute('contentEditable', 'false');
		myLabel.setAttribute('style','cursor:move;font-size:100%;');
		myLabel.setAttribute('name', tag);
    myLabel.setAttribute('draggable', 'true');
		myLabel.innerHTML = myButton.innerHTML;

		//zoneDiv.appendChild(myLabel);
    cursorPosition.insertNode(myLabel);
	}

	//Clean breaklines;
	var bks 	= zoneDiv.getElementsByTagName('br');
	var brSize 	= bks.length;
	
	if(brSize != 0)
	{
		zoneDiv.removeChild(bks[0]);
	}

	//Event keyboard on deleted elements
	$("span").dblclick(function(handler)
	{
		myLabel.remove(labels[delIndex]);
	});

}

function saveMessage(zoneId)
{

	var zoneDiv = document.getElementById(zoneId + 'Area');

	var message = zoneDiv.childNodes; 
	var messSize = message.length;
	var messageContent = '';
console.log(message);
	for (var messId = 0; messId < messSize; messId++)
	{
		var superRegex = /[a-zA-Z0-9áàâäãåçéèêëíìîïñóòôöõúùûüýÿæœÁÀÂÄÃÅÇÉÈÊËÍÌÎÏÑÓÒÔÖÕÚÙÛÜÝŸÆŒ._\s\.\,\--]/g;
		if(zoneId === 'mail')
    	{
			superRegex = /[a-zA-Z0-9áàâäãåçéèêëíìîïñóòôöõúùûüýÿæœÁÀÂÄÃÅÇÉÈÊËÍÌÎÏÑÓÒÔÖÕÚÙÛÜÝŸÆŒ._\s\.\,\-\n-]/g;
		}

		if(message[messId].nodeName === '#text' && message[messId].nodeValue.match(superRegex))
//		if(message[messId].nodeName === '#text' && message[messId].nodeValue.match(/[a-zA-Z0-9\,]/g) && message[messId].nodeValue.length < 100)
		{
			messageContent += message[messId].nodeValue;
		}
		else if(message[messId].nodeName === 'SPAN')
		{
			if(message[messId].getAttribute("name") == undefined)
            {
                continue;
            }

			//messageContent += myTags[message[messId].getAttribute("name")];
			var currentTag = '#' + message[messId].getAttribute("name").toUpperCase() + '#';
            messageContent += currentTag;
		}
		else if(message[messId].nodeName === 'IMG')
		{
			messageContent += message[messId].outerHTML;
		}
		else if(message[messId].nodeName === 'BR')
        {
            messageContent += message[messId].outerHTML;
        }
		else if(message[messId].nodeName === 'DIV')
        {
            messageContent += '<br>' + message[messId].innerHTML ;
        }
	}

	var myRegexp = /\+/;
	messageContent.replace(myRegexp, '');

	if(zoneId === 'sms')
	{
		myRegexp = /\n/;
    	messageContent.replace(myRegexp, '');
	}

	var idInput = document.getElementById('id');

	var myData = {
        'rm':'saveMessage',
		'type' : zoneId,
        'message' : messageContent,
		'pid' : idInput.getAttribute('value')
    };

	if(zoneId === 'mail')
	{
		var mySubject = document.getElementById('objectArea');
		
		myData = {
    	    'rm'	:'saveMessage',
    	    'type' 	: zoneId,
			'subject': mySubject.value,
    	    'mail' 	: messageContent,
    	    'pid' 	: idInput.getAttribute('value')
    	};

		if(document.getElementById('mailType1').checked)
		{
			myData['mType'] = 'text';
		}
		else if(document.getElementById('mailType2').checked)
		{
			myData['mType'] = 'html';
		}
	}

    $.post("index.pl",myData).done(function(data){
		window.alert(data);
    });
}

String.prototype.ucfirst = function()
{
    return this.charAt(0).toUpperCase() + this.substr(1);
}

function previewMessage(zoneId)
{
	var zoneDiv = document.getElementById(zoneId + 'Area');

	var message = zoneDiv.childNodes; 
	var messSize = message.length;
	var messageContent = '';

	var previewDiv = document.getElementById("preview"); 
	var mailPreview = document.getElementById('mailPreview');

	if(zoneId === 'sms')
	{
		previewDiv.setAttribute('style','');
		previewDiv.innerHTML = '<p>Génération en cours ...</p>';
	}
	else if(zoneId === 'mail')
	{
    	mailPreview.innerHTML = 'Génération en cours...';
	}

	for (var messId = 0; messId < messSize; messId++)
	{
		var superRegex = /[a-zA-Z0-9áàâäãåçéèêëíìîïñóòôöõúùûüýÿæœÁÀÂÄÃÅÇÉÈÊËÍÌÎÏÑÓÒÔÖÕÚÙÛÜÝŸÆŒ._\s\.\,\--]/g;
		if(message[messId].nodeName === '#text' && message[messId].nodeValue.match(superRegex) && message[messId].nodeValue.length < 100)
		//if(message[messId].nodeName === '#text' && message[messId].nodeValue.match(/[a-zA-Z0-9\,]/g) && message[messId].nodeValue.length < 100)
		{
			messageContent += message[messId].nodeValue;
		}
		else if(message[messId].nodeName === 'SPAN' && message[messId].nodeName.innerHTML !== '')
		{
			if(message[messId].getAttribute("name") == undefined)
			{
				continue;
			}

			//messageContent += myTags[message[messId].getAttribute("name")];
			var currentTag = '#' + message[messId].getAttribute("name").toUpperCase() + '#';
			messageContent += currentTag;
		}
	}

	var myRegexp = /\+/;
	messageContent.replace(myRegexp, '');

	if(zoneId === 'sms')
	{
		myRegexp = /\n/;
    	messageContent.replace(myRegexp, '');
	}

	var idInput = document.getElementById('id');

	var myData = {
        'rm':'previewMessage',
		'type' : zoneId,
        'message' : btoa(messageContent),
		'pid' : idInput.getAttribute('value')
    };


	if(zoneId === 'mail')
	{
		var mySubject = document.getElementById('objectArea');
		
		myData = {
    	    'rm':'previewMessage',
    	    'type' : zoneId,
			'subject': mySubject.value,
    	    'mail' : btoa(messageContent),
    	    'pid' : idInput.getAttribute('value')
    	};
	}

    $.post("index.pl",myData).done(function(data){
		if(zoneId === 'sms')
    	{
			previewDiv.innerHTML = '';
			previewDiv.setAttribute("class","preview");
			previewDiv.setAttribute("style", "background-image:url(/assets/img/smartphone_sms.png);width:435px;height:293px;");

			var myText = document.createElement('p');
			myText.setAttribute('class', 'smstext');
			myText.innerHTML = atob(data);
			//myText.innerHTML = data;
			previewDiv.appendChild(myText);
		}
		else
		{
			mailPreview.innerHTML = atob(data);
		}
    });
}

function testMessage(zoneId)
{
	var costTestP = document.getElementById('costTest');
    costTestP.innerHTML = 'Calcul en cours ...';

	var zoneDiv = document.getElementById(zoneId + 'Area');

	var message = zoneDiv.childNodes; 
	var messSize = message.length;
	var messageContent = '';

	for (var messId = 0; messId < messSize; messId++)
	{
		if(message[messId].nodeName === '#text' && message[messId].nodeValue.match(/[a-zA-Z0-9\,]/g) && message[messId].nodeValue.length < 100)
		{
			messageContent += message[messId].nodeValue;
		}
		else if(message[messId].nodeName === 'SPAN')
		{
			messageContent += myTags[message[messId].getAttribute("name")];
		}
	}

	var myRegexp = /\+/;
	messageContent.replace(myRegexp, '');

	myRegexp = /\n/;
    messageContent.replace(myRegexp, '');

	var idInput = document.getElementById('id');

	var myData = {
        'rm':'testsms',
        'message' : messageContent,
		'id' : idInput.getAttribute('value')
    };

    $.post("index.pl",myData).done(function(data){
		var costTestP = document.getElementById('costTest');
		costTestP.innerHTML = data;
    });
}

/*

==== Dragon Drop: a demo of precise DnD
          in, around, and between 
	     multiple contenteditable's.

=================================
== MIT Licensed for all to use ==
=================================
Copyright (C) 2013 Chase Moskal

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
============
  
*/

function DRAGON_DROP (o) {
	var DD=this;
	
	// "o" params:
	DD.$draggables=null;
	DD.$dropzones=null;
	DD.$noDrags=null; // optional
		
	DD.dropLoad=null;
	DD.engage=function(o){
		DD.$draggables = $(o.draggables);
		DD.$dropzones = $(o.dropzones);
		DD.$draggables.attr('draggable','true');
		DD.$noDrags = (o.noDrags) ? $(o.noDrags) : $();
		DD.$dropzones.attr('dropzone','copy');
		DD.bindDraggables();
		DD.bindDropzones();
	};
	DD.bindDraggables=function(){
		DD.$draggables = $(DD.$draggables.selector); // reselecting
		DD.$noDrags = $(DD.$noDrags.selector);
		DD.$noDrags.attr('draggable','false');
		DD.$draggables.off('dragstart').on('dragstart',function(event){
			var e=event.originalEvent;
			$(e.target).removeAttr('dragged');
			var dt=e.dataTransfer,
				content=e.target.outerHTML;
			var is_draggable = DD.$draggables.is(e.target);
			if (is_draggable) {
				dt.effectAllowed = 'copy';
				dt.setData('text/plain',' ');
				DD.dropLoad=content;
				$(e.target).attr('dragged','dragged');
			}
		});
	};
	DD.bindDropzones=function(){
		DD.$dropzones = $(DD.$dropzones.selector); // reselecting
		DD.$dropzones.off('dragleave').on('dragleave',function(event){
			var e=event.originalEvent;
			
			var dt=e.dataTransfer;
			var relatedTarget_is_dropzone = DD.$dropzones.is(e.relatedTarget);
			var relatedTarget_within_dropzone = DD.$dropzones.has(e.relatedTarget).length>0;
			var acceptable = relatedTarget_is_dropzone||relatedTarget_within_dropzone;
			if (!acceptable) {
				dt.dropEffect='none';
				dt.effectAllowed='null';
			}
		});
		DD.$dropzones.off('drop').on('drop',function(event){
			var e=event.originalEvent;
			
			if (!DD.dropLoad) return false;
			var range=null;
			if (document.caretRangeFromPoint) { // Chrome
				range=document.caretRangeFromPoint(e.clientX,e.clientY);
			}
			else if (e.rangeParent) { // Firefox
				range=document.createRange(); range.setStart(e.rangeParent,e.rangeOffset);
			}
			var sel = window.getSelection();
			sel.removeAllRanges(); sel.addRange(range);
			
			$(sel.anchorNode).closest(DD.$dropzones.selector).get(0).focus(); // essential
			document.execCommand('insertHTML',false,'<param name="dragonDropMarker" />'+DD.dropLoad);
			sel.removeAllRanges();
			
			// verification with dragonDropMarker
			var $DDM=$('param[name="dragonDropMarker"]');
			var insertSuccess = $DDM.length>0;
			if (insertSuccess) {
				$(DD.$draggables.selector).filter('[dragged]').remove();
				$DDM.remove();
			}
			
			DD.dropLoad=null;
			DD.bindDraggables();
			e.preventDefault();
		});
	};
	DD.disengage=function(){
		DD.$draggables=$( DD.$draggables.selector ); // reselections
		DD.$dropzones=$( DD.$dropzones.selector );
		DD.$noDrags=$( DD.$noDrags.selector );
		DD.$draggables.removeAttr('draggable').removeAttr('dragged').off('dragstart');
		DD.$noDrags.removeAttr('draggable');
		DD.$dropzones.removeAttr('droppable').off('dragenter');
		DD.$dropzones.off('drop');
	};
	if (o) DD.engage(o);
}

$(document).ready(function() {
	window.DragonDrop = new DRAGON_DROP({
		draggables:$('#test'),
		dropzones:$('#smsArea'),
		noDrags: ""
	});
});

#smsArea {
  -moz-appearance: textfield-multiline;
  -webkit-appearance: textarea;
  height: 150px;
  overflow: auto;
  padding: 5px;
  resize: both;
  width: 100%;
}

.smstext {
  /*margin-top: 100px;*/
  margin-left: 60px;
  margin-right: 20px;
  padding-top: 30px;
  font-family: verdana, sans-serif;
}

#mailArea {
  -moz-appearance: textfield-multiline;
  -webkit-appearance: textarea;
  height: 200px;
  overflow: auto;
  padding: 5px;
  resize: both;
  width: 500px;
  font-size: 12px;
  margin-top: 5px;
}

.mailInput {
  -moz-appearance: textfield-multiline;
  -webkit-appearance: textarea;
  overflow: auto;
  padding: 5px;
  resize: both;
  font-size: 12px;
  margin-top: 5px;
  width: 300px;
  height: 85px;
  margin-left: 100px;
  margin-top: -20px;
}

.mailtext {
  /*      margin-top: 100px;*/
  margin-left: 60px;
  margin-right: 20px;
  padding-top: 30px;
  font-family: verdana, sans-serif;
}

#webtag {
  margin-top: -392px;
  margin-left: 555px;
  width: 569px;
}

#result {
  display: none;
}

#interaction {
  margin-top: 30px;
  visibility: hidden;
}

#cd-popup {
  background-color: rgba(94, 110, 141, 0.9);
  opacity: 1;
  -webkit-transition: opacity 0.3s 0s, visibility 0s 0.3s;
  -moz-transition: opacity 0.3s 0s, visibility 0s 0.3s;
  transition: opacity 0.3s 0s, visibility 0s 0.3s;
  position: relative;
  width: 100%;
  max-width: 800px;
  height: 350px;
  margin: 4em auto;
  border-radius: .25em .25em .4em .4em;
  text-align: center;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
  -webkit-transform: translateY(-40px);
  -moz-transform: translateY(-40px);
  -ms-transform: translateY(-40px);
  -o-transform: translateY(-40px);
  transform: translateY(-40px);
  /* Force Hardware Acceleration in WebKit */
  -webkit-backface-visibility: hidden;
  -webkit-transition-property: -webkit-transform;
  -moz-transition-property: -moz-transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  transition-duration: 0.3s;
  z-index: 1;
}

#cd-popup.is-visible {
  opacity: 1;
  visibility: visible;
  -webkit-transition: opacity 0.3s 0s, visibility 0s 0s;
  -moz-transition: opacity 0.3s 0s, visibility 0s 0s;
  transition: opacity 0.3s 0s, visibility 0s 0s;
}

#cd-popup p {
  padding: 3em 1em;
  margin-left: -250px;
  height: 100px;
}

#cd-popup div {
  float: left;
  width: 30%;
  list-style: none;
  display: block;
  height: 60px;
  line-height: 60px;
  text-transform: uppercase;
  color: #FFF;
  -webkit-transition: background-color 0.2s;
  -moz-transition: background-color 0.2s;
  transition: background-color 0.2s;
}

#object {
  background: #fc7169;
  border-radius: 0 0 0 .25em;
  width: 175px;
  margin-left: -400px;
  cursor: pointer;
  padding: 3px 6px;
  display: inline-block;
}

#object:hover {
  background-color: #fc8982;
}

#body {
  background: #6495ED;
  border-radius: 0 0 0 .25em;
  width: 175px;
  cursor: pointer;
  padding: 3px 6px;
  display: inline-block;
  margin-left: -150px;
}

#body:hover {
  background-color: #fc8982;
}

#titre {
  background: #A52A2A;
  border-radius: 0 0 0 .25em;
  width: 175px;
  margin-left: 10px;
  cursor: pointer;
  padding: 3px 6px;
  display: inline-block;
}

#titre:hover {
  background-color: #fc8982;
}

#note {
  background: #006400;
  border-radius: 0 0 0 .25em;
  width: 175px;
  margin-left: 10px;
  cursor: pointer;
  padding: 3px 6px;
  display: inline-block;
}

#cd-popup #note:hover {
  background-color: lightsteelblue;
}

#cd-popup .cd-popup-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 30px;
  height: 30px;
}

#cd-popup .cd-popup-close::before,
#cd-popup .cd-popup-close::after {
  content: '';
  position: absolute;
  top: 12px;
  width: 14px;
  height: 3px;
  background-color: #8f9cb5;
}

#cd-popup .cd-popup-close::before {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  left: 8px;
}

#cd-popup .cd-popup-close::after {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
  right: 8px;
}

@media only screen and (min-width: 1170px) {
  #cd-popup {
    margin: 8em auto;
  }
}

.webArea {
  -moz-appearance: textfield-multiline;
  -webkit-appearance: textarea;
  height: 520px;
  /*overflow: auto;*/
  padding: 5px;
  /*resize: both;*/
  width: 630px;
  font-size: 12px;
  /*margin-top: 55px;*/
  border: 2px dashed #D9D9D9;
  border-radius: 5px;
  text-align: center;
  margin-top: 12%;
}

.webArea>div {
  background-color: #FAEBD7;
  border: 3px dashed #D9D9D9;
  margin-bottom: 15px;
  height: 120px;
  width: 612px;
  overflow: auto;
  overflow-x: hidden;
  /* margin-left: -1.5%; */
}

.webArea>div>div {
  transition: all .5s;
  text-align: center;
  float: left;
  padding: 1em;
  margin: 0 1em 1em 0;
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
  border-radius: 5px;
  border: 2px solid black;
  /*background: #F7F7F7;*/
  transition: all .5s ease;
  width: 582px;
  /*background-color: #F8F8FF;*/
  height: 110px;
}

.dropTarget>div>div>span {
  font-style: italic;
  margin-right: 5%;
  font-size: 16px;
}

.webArea>div>div>input {
  margin-right: 25%;
  width: 250px;
  height: 40px;
  background-color: white;
}

.webArea>div>div:active {
  /*-webkit-animation: wiggle 0.3s 0s infinite ease-in;
    animation: wiggle 0.3s 0s infinite ease-in;*/
  opacity: .6;
  border: 2px solid #000;
}

#mailArea {
  -moz-appearance: textfield-multiline;
  -webkit-appearance: textarea;
  height: 200px;
  overflow: auto;
  padding: 5px;
  resize: both;
  width: 500px;
  font-size: 12px;
  margin-top: 5px;
}

#containerZone {
  border: 1px solid;
  border-radius: 25px;
  */ margin: 3%;
  width: 70%;
  height: 40px;
  text-align: center;
  font-weight: bold;
  color: #000000;
  margin: auto;
  margin-top: 8%;
  margin-left: -450px;
}

#containerZone2 {
  border: 1px solid;
  border-radius: 25px;
  width: 70%;
  height: 40px;
  text-align: center;
  font-weight: bold;
  color: #000000;
  margin: auto;
  margin-top: 100%;
  margin-left: -450px;
}

#webtags {
  margin-top: -40px;
}

#webtags>div {
  margin-left: 20px;
}

#modalTagBody {
  height: 120px;
}

#btnTag {
  margin-top: 20px;
  margin-right: 15px;
}

<html>
<head>
    <meta charset="utf-8">
    <title>Drag &amp; drop Tag</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.0/jquery-confirm.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.0/jquery-confirm.min.js"></script>
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
  <div class="container mtb">
        <div class="row">
			<TMPL_IF NAME="PROFILE">
				<form role="form" action = "<TMPL_VAR NAME=MYURL>?rm=saveTemplate" method="POST" enctype="application/x-www-form-urlencoded">
				<TMPL_LOOP NAME="DATA">
				<input type="hidden" id='id'  name="id" value="<TMPL_VAR NAME=ID>"/>
				<TMPL_IF NAME="TEMPLATE">
				<div class="panel panel-primary" id="panels" data-effect="helix">
					<div class="panel-heading">SMS Message</div>
					<div class="panel-body">
            			<div class="col-lg-6">
			  				<div class="form-group">
<!--								<h4 for="template">Contenu</h4>
                		    	<textarea class="form-control" id="template" name="lg_template" rows="6" onkeyup="checkLength()"><TMPL_VAR NAME=TEMPLATE></textarea>
								<p id='message'>Longueur du SMS: 0/160</p>-->
                		  	</div>
						  	<input type="hidden" name="rm" value="saveTemplate"/>
							<div id="smsArea" class="form-control" contenteditable="true">
								<TMPL_VAR NAME=TEMPLATE>
							</div><br />
							<a href="#" class="btn btn-primary" onClick="saveMessage('sms');">Save</a>
							<a href="#" class="btn btn-primary" onClick="previewMessage('sms');" data-toggle="modal" data-target="#myModal2">APreview</a>
							<a href="#" class="btn btn-primary" onClick="testMessage('sms');" data-toggle="modal" data-target="#myModal">SMS Cost</a>
							<br>
						</div>
						<div class="col-lg-6" id='smsTags'>
							<h4 for="template">Personalization</h4>
							<span class="btn btn-default" onClick="editTag('sms','link')" id="smsLink" title="lien de votre page web, modèle ou questionnaire" draggable="true">Link</span>
						</div>
						<div class="col-lg-6" style="margin-top: 30px">
					
					</div>
				</div>
				</TMPL_LOOP>
        </div><! --/row -->
     </div><! --/container -->
	</div>
</body>
</html>

Answer 1

最后我通过这个方法找到了一个解决方案： 。window.getSelection（）getRangeAt（0）;

＆＃13;

＆＃13;

var area = document.getElementById("template");
var message = document.getElementById("message");
var maxLength = 160;
var re = new RegExp("ô|â|ê|ç");

var myTags = new Object();

myTags['company']   = '#ENTREPRISE#';
myTags['city']      = '#VILLE#';
myTags['link']      = '#LIEN#';
myTags['firstname'] = '#PRENOM#';
myTags['lastname']  = '#NOM#';
myTags['title']     = '#TITRE#';

$(document).ready(function() {
    // first 2 divs (what's already rendered) will be made draggable
    $("#test").draggable();
    
    // listen for new divs added, make these new elements draggable
    $("#smsArea").on("DOMNodeInserted", "#test", makeDraggable);
    
    // next 3 divs inserted are draggable
});

var cursorPosition = 0;

$("#smsArea").on('keyup mouseup',function(e)
{	
        cursorPosition = window.getSelection().getRangeAt(0);
 
 });

    
function makeDraggable() {
	$(this).draggable();
}

function editTag(zoneId,tag)
{
	var zoneDiv 	= document.getElementById(zoneId + 'Area');
	var myButton 	= document.getElementById(zoneId + tag.ucfirst());
	var myLabel 	= document.createElement('span');

	var labels 		= zoneDiv.getElementsByTagName('span');
	var spanSize	= labels.length;

	var delflag  = 0;
	var delIndex = 0;

	if(spanSize != 0)
	{

		for (myLabId = 0; myLabId < spanSize; myLabId++)
		{
			var currentLabel = labels[myLabId];
			if(currentLabel.innerHTML === myButton.innerHTML)
			{
				delflag = 1;
				delIndex = myLabId;
			}
		}
	}

	if(delflag == 1)
    {
        zoneDiv.removeChild(labels[delIndex]);
    }
	else
	{
		myLabel.setAttribute('class', 'label label-info');
		myLabel.setAttribute('data-effect', 'pop');
		myLabel.setAttribute('contentEditable', 'false');
		myLabel.setAttribute('style','cursor:move;font-size:100%;');
		myLabel.setAttribute('name', tag);
    myLabel.setAttribute('draggable', 'true');
		myLabel.innerHTML = myButton.innerHTML;

		//zoneDiv.appendChild(myLabel);
    cursorPosition.insertNode(myLabel);
	}

	//Clean breaklines;
	var bks 	= zoneDiv.getElementsByTagName('br');
	var brSize 	= bks.length;
	
	if(brSize != 0)
	{
		zoneDiv.removeChild(bks[0]);
	}

	//Event keyboard on deleted elements
	$("span").dblclick(function(handler)
	{
		myLabel.remove(labels[delIndex]);
	});

}

function saveMessage(zoneId)
{

	var zoneDiv = document.getElementById(zoneId + 'Area');

	var message = zoneDiv.childNodes; 
	var messSize = message.length;
	var messageContent = '';
console.log(message);
	for (var messId = 0; messId < messSize; messId++)
	{
		var superRegex = /[a-zA-Z0-9áàâäãåçéèêëíìîïñóòôöõúùûüýÿæœÁÀÂÄÃÅÇÉÈÊËÍÌÎÏÑÓÒÔÖÕÚÙÛÜÝŸÆŒ._\s\.\,\--]/g;
		if(zoneId === 'mail')
    	{
			superRegex = /[a-zA-Z0-9áàâäãåçéèêëíìîïñóòôöõúùûüýÿæœÁÀÂÄÃÅÇÉÈÊËÍÌÎÏÑÓÒÔÖÕÚÙÛÜÝŸÆŒ._\s\.\,\-\n-]/g;
		}

		if(message[messId].nodeName === '#text' && message[messId].nodeValue.match(superRegex))
//		if(message[messId].nodeName === '#text' && message[messId].nodeValue.match(/[a-zA-Z0-9\,]/g) && message[messId].nodeValue.length < 100)
		{
			messageContent += message[messId].nodeValue;
		}
		else if(message[messId].nodeName === 'SPAN')
		{
			if(message[messId].getAttribute("name") == undefined)
            {
                continue;
            }

			//messageContent += myTags[message[messId].getAttribute("name")];
			var currentTag = '#' + message[messId].getAttribute("name").toUpperCase() + '#';
            messageContent += currentTag;
		}
		else if(message[messId].nodeName === 'IMG')
		{
			messageContent += message[messId].outerHTML;
		}
		else if(message[messId].nodeName === 'BR')
        {
            messageContent += message[messId].outerHTML;
        }
		else if(message[messId].nodeName === 'DIV')
        {
            messageContent += '<br>' + message[messId].innerHTML ;
        }
	}

	var myRegexp = /\+/;
	messageContent.replace(myRegexp, '');

	if(zoneId === 'sms')
	{
		myRegexp = /\n/;
    	messageContent.replace(myRegexp, '');
	}

	var idInput = document.getElementById('id');

	var myData = {
        'rm':'saveMessage',
		'type' : zoneId,
        'message' : messageContent,
		'pid' : idInput.getAttribute('value')
    };

	if(zoneId === 'mail')
	{
		var mySubject = document.getElementById('objectArea');
		
		myData = {
    	    'rm'	:'saveMessage',
    	    'type' 	: zoneId,
			'subject': mySubject.value,
    	    'mail' 	: messageContent,
    	    'pid' 	: idInput.getAttribute('value')
    	};

		if(document.getElementById('mailType1').checked)
		{
			myData['mType'] = 'text';
		}
		else if(document.getElementById('mailType2').checked)
		{
			myData['mType'] = 'html';
		}
	}

    $.post("index.pl",myData).done(function(data){
		window.alert(data);
    });
}

String.prototype.ucfirst = function()
{
    return this.charAt(0).toUpperCase() + this.substr(1);
}

function previewMessage(zoneId)
{
	var zoneDiv = document.getElementById(zoneId + 'Area');

	var message = zoneDiv.childNodes; 
	var messSize = message.length;
	var messageContent = '';

	var previewDiv = document.getElementById("preview"); 
	var mailPreview = document.getElementById('mailPreview');

	if(zoneId === 'sms')
	{
		previewDiv.setAttribute('style','');
		previewDiv.innerHTML = '<p>Génération en cours ...</p>';
	}
	else if(zoneId === 'mail')
	{
    	mailPreview.innerHTML = 'Génération en cours...';
	}

	for (var messId = 0; messId < messSize; messId++)
	{
		var superRegex = /[a-zA-Z0-9áàâäãåçéèêëíìîïñóòôöõúùûüýÿæœÁÀÂÄÃÅÇÉÈÊËÍÌÎÏÑÓÒÔÖÕÚÙÛÜÝŸÆŒ._\s\.\,\--]/g;
		if(message[messId].nodeName === '#text' && message[messId].nodeValue.match(superRegex) && message[messId].nodeValue.length < 100)
		//if(message[messId].nodeName === '#text' && message[messId].nodeValue.match(/[a-zA-Z0-9\,]/g) && message[messId].nodeValue.length < 100)
		{
			messageContent += message[messId].nodeValue;
		}
		else if(message[messId].nodeName === 'SPAN' && message[messId].nodeName.innerHTML !== '')
		{
			if(message[messId].getAttribute("name") == undefined)
			{
				continue;
			}

			//messageContent += myTags[message[messId].getAttribute("name")];
			var currentTag = '#' + message[messId].getAttribute("name").toUpperCase() + '#';
			messageContent += currentTag;
		}
	}

	var myRegexp = /\+/;
	messageContent.replace(myRegexp, '');

	if(zoneId === 'sms')
	{
		myRegexp = /\n/;
    	messageContent.replace(myRegexp, '');
	}

	var idInput = document.getElementById('id');

	var myData = {
        'rm':'previewMessage',
		'type' : zoneId,
        'message' : btoa(messageContent),
		'pid' : idInput.getAttribute('value')
    };


	if(zoneId === 'mail')
	{
		var mySubject = document.getElementById('objectArea');
		
		myData = {
    	    'rm':'previewMessage',
    	    'type' : zoneId,
			'subject': mySubject.value,
    	    'mail' : btoa(messageContent),
    	    'pid' : idInput.getAttribute('value')
    	};
	}

    $.post("index.pl",myData).done(function(data){
		if(zoneId === 'sms')
    	{
			previewDiv.innerHTML = '';
			previewDiv.setAttribute("class","preview");
			previewDiv.setAttribute("style", "background-image:url(/assets/img/smartphone_sms.png);width:435px;height:293px;");

			var myText = document.createElement('p');
			myText.setAttribute('class', 'smstext');
			myText.innerHTML = atob(data);
			//myText.innerHTML = data;
			previewDiv.appendChild(myText);
		}
		else
		{
			mailPreview.innerHTML = atob(data);
		}
    });
}

function testMessage(zoneId)
{
	var costTestP = document.getElementById('costTest');
    costTestP.innerHTML = 'Calcul en cours ...';

	var zoneDiv = document.getElementById(zoneId + 'Area');

	var message = zoneDiv.childNodes; 
	var messSize = message.length;
	var messageContent = '';

	for (var messId = 0; messId < messSize; messId++)
	{
		if(message[messId].nodeName === '#text' && message[messId].nodeValue.match(/[a-zA-Z0-9\,]/g) && message[messId].nodeValue.length < 100)
		{
			messageContent += message[messId].nodeValue;
		}
		else if(message[messId].nodeName === 'SPAN')
		{
			messageContent += myTags[message[messId].getAttribute("name")];
		}
	}

	var myRegexp = /\+/;
	messageContent.replace(myRegexp, '');

	myRegexp = /\n/;
    messageContent.replace(myRegexp, '');

	var idInput = document.getElementById('id');

	var myData = {
        'rm':'testsms',
        'message' : messageContent,
		'id' : idInput.getAttribute('value')
    };

    $.post("index.pl",myData).done(function(data){
		var costTestP = document.getElementById('costTest');
		costTestP.innerHTML = data;
    });
}

/*

==== Dragon Drop: a demo of precise DnD
          in, around, and between 
	     multiple contenteditable's.

=================================
== MIT Licensed for all to use ==
=================================
Copyright (C) 2013 Chase Moskal

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
============
  
*/

function DRAGON_DROP (o) {
	var DD=this;
	
	// "o" params:
	DD.$draggables=null;
	DD.$dropzones=null;
	DD.$noDrags=null; // optional
		
	DD.dropLoad=null;
	DD.engage=function(o){
		DD.$draggables = $(o.draggables);
		DD.$dropzones = $(o.dropzones);
		DD.$draggables.attr('draggable','true');
		DD.$noDrags = (o.noDrags) ? $(o.noDrags) : $();
		DD.$dropzones.attr('dropzone','copy');
		DD.bindDraggables();
		DD.bindDropzones();
	};
	DD.bindDraggables=function(){
		DD.$draggables = $(DD.$draggables.selector); // reselecting
		DD.$noDrags = $(DD.$noDrags.selector);
		DD.$noDrags.attr('draggable','false');
		DD.$draggables.off('dragstart').on('dragstart',function(event){
			var e=event.originalEvent;
			$(e.target).removeAttr('dragged');
			var dt=e.dataTransfer,
				content=e.target.outerHTML;
			var is_draggable = DD.$draggables.is(e.target);
			if (is_draggable) {
				dt.effectAllowed = 'copy';
				dt.setData('text/plain',' ');
				DD.dropLoad=content;
				$(e.target).attr('dragged','dragged');
			}
		});
	};
	DD.bindDropzones=function(){
		DD.$dropzones = $(DD.$dropzones.selector); // reselecting
		DD.$dropzones.off('dragleave').on('dragleave',function(event){
			var e=event.originalEvent;
			
			var dt=e.dataTransfer;
			var relatedTarget_is_dropzone = DD.$dropzones.is(e.relatedTarget);
			var relatedTarget_within_dropzone = DD.$dropzones.has(e.relatedTarget).length>0;
			var acceptable = relatedTarget_is_dropzone||relatedTarget_within_dropzone;
			if (!acceptable) {
				dt.dropEffect='none';
				dt.effectAllowed='null';
			}
		});
		DD.$dropzones.off('drop').on('drop',function(event){
			var e=event.originalEvent;
			
			if (!DD.dropLoad) return false;
			var range=null;
			if (document.caretRangeFromPoint) { // Chrome
				range=document.caretRangeFromPoint(e.clientX,e.clientY);
			}
			else if (e.rangeParent) { // Firefox
				range=document.createRange(); range.setStart(e.rangeParent,e.rangeOffset);
			}
			var sel = window.getSelection();
			sel.removeAllRanges(); sel.addRange(range);
			
			$(sel.anchorNode).closest(DD.$dropzones.selector).get(0).focus(); // essential
			document.execCommand('insertHTML',false,'<param name="dragonDropMarker" />'+DD.dropLoad);
			sel.removeAllRanges();
			
			// verification with dragonDropMarker
			var $DDM=$('param[name="dragonDropMarker"]');
			var insertSuccess = $DDM.length>0;
			if (insertSuccess) {
				$(DD.$draggables.selector).filter('[dragged]').remove();
				$DDM.remove();
			}
			
			DD.dropLoad=null;
			DD.bindDraggables();
			e.preventDefault();
		});
	};
	DD.disengage=function(){
		DD.$draggables=$( DD.$draggables.selector ); // reselections
		DD.$dropzones=$( DD.$dropzones.selector );
		DD.$noDrags=$( DD.$noDrags.selector );
		DD.$draggables.removeAttr('draggable').removeAttr('dragged').off('dragstart');
		DD.$noDrags.removeAttr('draggable');
		DD.$dropzones.removeAttr('droppable').off('dragenter');
		DD.$dropzones.off('drop');
	};
	if (o) DD.engage(o);
}

$(document).ready(function() {
	window.DragonDrop = new DRAGON_DROP({
		draggables:$('#test'),
		dropzones:$('#smsArea'),
		noDrags: ""
	});
});

＆＃13;

#smsArea {
  -moz-appearance: textfield-multiline;
  -webkit-appearance: textarea;
  height: 150px;
  overflow: auto;
  padding: 5px;
  resize: both;
  width: 100%;
}

.smstext {
  /*margin-top: 100px;*/
  margin-left: 60px;
  margin-right: 20px;
  padding-top: 30px;
  font-family: verdana, sans-serif;
}

#mailArea {
  -moz-appearance: textfield-multiline;
  -webkit-appearance: textarea;
  height: 200px;
  overflow: auto;
  padding: 5px;
  resize: both;
  width: 500px;
  font-size: 12px;
  margin-top: 5px;
}

.mailInput {
  -moz-appearance: textfield-multiline;
  -webkit-appearance: textarea;
  overflow: auto;
  padding: 5px;
  resize: both;
  font-size: 12px;
  margin-top: 5px;
  width: 300px;
  height: 85px;
  margin-left: 100px;
  margin-top: -20px;
}

.mailtext {
  /*      margin-top: 100px;*/
  margin-left: 60px;
  margin-right: 20px;
  padding-top: 30px;
  font-family: verdana, sans-serif;
}

#webtag {
  margin-top: -392px;
  margin-left: 555px;
  width: 569px;
}

#result {
  display: none;
}

#interaction {
  margin-top: 30px;
  visibility: hidden;
}

#cd-popup {
  background-color: rgba(94, 110, 141, 0.9);
  opacity: 1;
  -webkit-transition: opacity 0.3s 0s, visibility 0s 0.3s;
  -moz-transition: opacity 0.3s 0s, visibility 0s 0.3s;
  transition: opacity 0.3s 0s, visibility 0s 0.3s;
  position: relative;
  width: 100%;
  max-width: 800px;
  height: 350px;
  margin: 4em auto;
  border-radius: .25em .25em .4em .4em;
  text-align: center;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
  -webkit-transform: translateY(-40px);
  -moz-transform: translateY(-40px);
  -ms-transform: translateY(-40px);
  -o-transform: translateY(-40px);
  transform: translateY(-40px);
  /* Force Hardware Acceleration in WebKit */
  -webkit-backface-visibility: hidden;
  -webkit-transition-property: -webkit-transform;
  -moz-transition-property: -moz-transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  transition-duration: 0.3s;
  z-index: 1;
}

#cd-popup.is-visible {
  opacity: 1;
  visibility: visible;
  -webkit-transition: opacity 0.3s 0s, visibility 0s 0s;
  -moz-transition: opacity 0.3s 0s, visibility 0s 0s;
  transition: opacity 0.3s 0s, visibility 0s 0s;
}

#cd-popup p {
  padding: 3em 1em;
  margin-left: -250px;
  height: 100px;
}

#cd-popup div {
  float: left;
  width: 30%;
  list-style: none;
  display: block;
  height: 60px;
  line-height: 60px;
  text-transform: uppercase;
  color: #FFF;
  -webkit-transition: background-color 0.2s;
  -moz-transition: background-color 0.2s;
  transition: background-color 0.2s;
}

#object {
  background: #fc7169;
  border-radius: 0 0 0 .25em;
  width: 175px;
  margin-left: -400px;
  cursor: pointer;
  padding: 3px 6px;
  display: inline-block;
}

#object:hover {
  background-color: #fc8982;
}

#body {
  background: #6495ED;
  border-radius: 0 0 0 .25em;
  width: 175px;
  cursor: pointer;
  padding: 3px 6px;
  display: inline-block;
  margin-left: -150px;
}

#body:hover {
  background-color: #fc8982;
}

#titre {
  background: #A52A2A;
  border-radius: 0 0 0 .25em;
  width: 175px;
  margin-left: 10px;
  cursor: pointer;
  padding: 3px 6px;
  display: inline-block;
}

#titre:hover {
  background-color: #fc8982;
}

#note {
  background: #006400;
  border-radius: 0 0 0 .25em;
  width: 175px;
  margin-left: 10px;
  cursor: pointer;
  padding: 3px 6px;
  display: inline-block;
}

#cd-popup #note:hover {
  background-color: lightsteelblue;
}

#cd-popup .cd-popup-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 30px;
  height: 30px;
}

#cd-popup .cd-popup-close::before,
#cd-popup .cd-popup-close::after {
  content: '';
  position: absolute;
  top: 12px;
  width: 14px;
  height: 3px;
  background-color: #8f9cb5;
}

#cd-popup .cd-popup-close::before {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  left: 8px;
}

#cd-popup .cd-popup-close::after {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
  right: 8px;
}

@media only screen and (min-width: 1170px) {
  #cd-popup {
    margin: 8em auto;
  }
}

.webArea {
  -moz-appearance: textfield-multiline;
  -webkit-appearance: textarea;
  height: 520px;
  /*overflow: auto;*/
  padding: 5px;
  /*resize: both;*/
  width: 630px;
  font-size: 12px;
  /*margin-top: 55px;*/
  border: 2px dashed #D9D9D9;
  border-radius: 5px;
  text-align: center;
  margin-top: 12%;
}

.webArea>div {
  background-color: #FAEBD7;
  border: 3px dashed #D9D9D9;
  margin-bottom: 15px;
  height: 120px;
  width: 612px;
  overflow: auto;
  overflow-x: hidden;
  /* margin-left: -1.5%; */
}

.webArea>div>div {
  transition: all .5s;
  text-align: center;
  float: left;
  padding: 1em;
  margin: 0 1em 1em 0;
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
  border-radius: 5px;
  border: 2px solid black;
  /*background: #F7F7F7;*/
  transition: all .5s ease;
  width: 582px;
  /*background-color: #F8F8FF;*/
  height: 110px;
}

.dropTarget>div>div>span {
  font-style: italic;
  margin-right: 5%;
  font-size: 16px;
}

.webArea>div>div>input {
  margin-right: 25%;
  width: 250px;
  height: 40px;
  background-color: white;
}

.webArea>div>div:active {
  /*-webkit-animation: wiggle 0.3s 0s infinite ease-in;
    animation: wiggle 0.3s 0s infinite ease-in;*/
  opacity: .6;
  border: 2px solid #000;
}

#mailArea {
  -moz-appearance: textfield-multiline;
  -webkit-appearance: textarea;
  height: 200px;
  overflow: auto;
  padding: 5px;
  resize: both;
  width: 500px;
  font-size: 12px;
  margin-top: 5px;
}

#containerZone {
  border: 1px solid;
  border-radius: 25px;
  */ margin: 3%;
  width: 70%;
  height: 40px;
  text-align: center;
  font-weight: bold;
  color: #000000;
  margin: auto;
  margin-top: 8%;
  margin-left: -450px;
}

#containerZone2 {
  border: 1px solid;
  border-radius: 25px;
  width: 70%;
  height: 40px;
  text-align: center;
  font-weight: bold;
  color: #000000;
  margin: auto;
  margin-top: 100%;
  margin-left: -450px;
}

#webtags {
  margin-top: -40px;
}

#webtags>div {
  margin-left: 20px;
}

#modalTagBody {
  height: 120px;
}

#btnTag {
  margin-top: 20px;
  margin-right: 15px;
}

＆＃13;

<html>
<head>
    <meta charset="utf-8">
    <title>Drag &amp; drop Tag</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.0/jquery-confirm.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.0/jquery-confirm.min.js"></script>
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
  <div class="container mtb">
        <div class="row">
			<TMPL_IF NAME="PROFILE">
				<form role="form" action = "<TMPL_VAR NAME=MYURL>?rm=saveTemplate" method="POST" enctype="application/x-www-form-urlencoded">
				<TMPL_LOOP NAME="DATA">
				<input type="hidden" id='id'  name="id" value="<TMPL_VAR NAME=ID>"/>
				<TMPL_IF NAME="TEMPLATE">
				<div class="panel panel-primary" id="panels" data-effect="helix">
					<div class="panel-heading">SMS Message</div>
					<div class="panel-body">
            			<div class="col-lg-6">
			  				<div class="form-group">
<!--								<h4 for="template">Contenu</h4>
                		    	<textarea class="form-control" id="template" name="lg_template" rows="6" onkeyup="checkLength()"><TMPL_VAR NAME=TEMPLATE></textarea>
								<p id='message'>Longueur du SMS: 0/160</p>-->
                		  	</div>
						  	<input type="hidden" name="rm" value="saveTemplate"/>
							<div id="smsArea" class="form-control" contenteditable="true">
								<TMPL_VAR NAME=TEMPLATE>
							</div><br />
							<a href="#" class="btn btn-primary" onClick="saveMessage('sms');">Save</a>
							<a href="#" class="btn btn-primary" onClick="previewMessage('sms');" data-toggle="modal" data-target="#myModal2">APreview</a>
							<a href="#" class="btn btn-primary" onClick="testMessage('sms');" data-toggle="modal" data-target="#myModal">SMS Cost</a>
							<br>
						</div>
						<div class="col-lg-6" id='smsTags'>
							<h4 for="template">Personalization</h4>
							<span class="btn btn-default" onClick="editTag('sms','link')" id="smsLink" title="lien de votre page web, modèle ou questionnaire" draggable="true">Link</span>
						</div>
						<div class="col-lg-6" style="margin-top: 30px">
					
					</div>
				</div>
				</TMPL_LOOP>
        </div><! --/row -->
     </div><! --/container -->
	</div>
</body>
</html>

＆＃13;

＆＃13;

＆＃13;