（Javascript）将光标位置传递到模式窗口

我有一个javascript函数，当单击按钮时，可以在光标位置插入（或包装）各种文本。插入文本的选项（如果需要）通过提示/警报提供

我正在为表单的“选项”上载部分添加一个模式窗口，以便删除提示/警报

在模式窗口之前，当单击上载“浏览”按钮时，javascript函数知道在何处插入文本

在模式窗口之后，js insert函数将起始位置解释为“0”，并将文本插入起始位置，而不是光标所在位置

问题：如何将光标位置传递到插入函数的模式窗口

注意：
1.我找到了和其他一些，但它们似乎不适用。
2.这是手写的（没有javascript框架）。
3.代码示例很快就能让人理解这个想法，而不是产品

表单示例（模式前）：

<form method="post" enctype="multipart/form-data" />
 <input type="file" id="upfile" name="upfile" onchange="ins('up')" />
 <input type="button" value="Line Break" onclick="ins('<br />')" />
 <input type="button" value="Heading" onclick="ins('<h4>','</h4>')" />
 <textarea id="body" name="text">Some string</textarea>
</form>

function ins(st,en){
 e=document.getElementById('body');
 sel=e.value.substring(e.selectionStart,e.selectionEnd);
 en=(en?en:'');
 switch(st){
  case'up':
  f=document.getElementById('upfile').files[0].name;
  src='<?php echo $dir; ?>/'+f;
  if(f.match(/\.(png|jpg|jpeg|svg|gif|tif|tiff)$/)){
   intro=confirm('OK = Regular Image\n\nCancel = Intro Image');
   if(!intro)en='</a>';
   img=confirm('OK = Style: Image\n\nCancel = Style: Thumbnail\n\n');
   alt=prompt('Alt:\n');
   if(!alt)return;
   st='<img src="'+src+'" class="'+(img?'image':'thumb')+'" alt="'+alt+'" /\>';
  } else {
   ftxt=prompt('Text:\n');
   if(!ftxt)return;
   st='<a href="'+src+'">'+ftxt+'</a>';
  }
  break;
  [...]
 }
 e.value=e.value.substring(0,e.selectionStart)+st+sel+en+e.value.substring(e.selectionEnd,e.value.length);
 e.focus();
}

<style>
 #up {position:fixed; top:0; right:0; bottom:0; left:0; background:rgba(0,0,0,.3);}
 #up div {width:400px; margin:50px auto 0px; padding:20px; background:#fff;}
</style>

<form method="post" enctype="multipart/form-data" />
 <input type="file" id="upfile" name="upfile" onchange="this.form.submit()" />
 <input type="button" value="Line Break" onclick="ins('<br />')" />
 <input type="button" value="Heading" onclick="ins('<h4>','</h4>')" />
 <textarea id="body" name="text">Some string</textarea>
</form>

if (isset($_FILES['upfile']['tmp_name'])) {
 echo '<form id="up" method="post"><div>';
 if (getimagesize($_FILES['upfile']['tmp_name'])) {
  echo '<input type="checkbox" name="intro" /> Intro Image<br />
  Style:<br />
  <input type="radio" name="style" value="thumb" checked /> Thumbnail<br />
  <input type="radio" name="style" value="image" /> Image<br /><br />
  Alt:<br />
  <input type="text" name="alt" />';
 }
 <input type="submit" value="Upload" /> <input type="submit" value="Cancel" />
 </div></form>';
 if (isset($_POST['Upload'])) {
  if (isset($_POST['style'])) {
   $intro = isset($_POST['intro']) ? '</a>' : '';
   $link = '<img src="'.$dir.'somefilename" class="'.$_POST['style'].'" alt="'.$_POST['alt'].'" />'.$intro;
   echo '<script>ins(\''.$link.'\')</script>';
  }
  // Upload routine.
 }

一些绳子

Javascript：

<form method="post" enctype="multipart/form-data" />
 <input type="file" id="upfile" name="upfile" onchange="ins('up')" />
 <input type="button" value="Line Break" onclick="ins('<br />')" />
 <input type="button" value="Heading" onclick="ins('<h4>','</h4>')" />
 <textarea id="body" name="text">Some string</textarea>
</form>

function ins(st,en){
 e=document.getElementById('body');
 sel=e.value.substring(e.selectionStart,e.selectionEnd);
 en=(en?en:'');
 switch(st){
  case'up':
  f=document.getElementById('upfile').files[0].name;
  src='<?php echo $dir; ?>/'+f;
  if(f.match(/\.(png|jpg|jpeg|svg|gif|tif|tiff)$/)){
   intro=confirm('OK = Regular Image\n\nCancel = Intro Image');
   if(!intro)en='</a>';
   img=confirm('OK = Style: Image\n\nCancel = Style: Thumbnail\n\n');
   alt=prompt('Alt:\n');
   if(!alt)return;
   st='<img src="'+src+'" class="'+(img?'image':'thumb')+'" alt="'+alt+'" /\>';
  } else {
   ftxt=prompt('Text:\n');
   if(!ftxt)return;
   st='<a href="'+src+'">'+ftxt+'</a>';
  }
  break;
  [...]
 }
 e.value=e.value.substring(0,e.selectionStart)+st+sel+en+e.value.substring(e.selectionEnd,e.value.length);
 e.focus();
}

<style>
 #up {position:fixed; top:0; right:0; bottom:0; left:0; background:rgba(0,0,0,.3);}
 #up div {width:400px; margin:50px auto 0px; padding:20px; background:#fff;}
</style>

<form method="post" enctype="multipart/form-data" />
 <input type="file" id="upfile" name="upfile" onchange="this.form.submit()" />
 <input type="button" value="Line Break" onclick="ins('<br />')" />
 <input type="button" value="Heading" onclick="ins('<h4>','</h4>')" />
 <textarea id="body" name="text">Some string</textarea>
</form>

if (isset($_FILES['upfile']['tmp_name'])) {
 echo '<form id="up" method="post"><div>';
 if (getimagesize($_FILES['upfile']['tmp_name'])) {
  echo '<input type="checkbox" name="intro" /> Intro Image<br />
  Style:<br />
  <input type="radio" name="style" value="thumb" checked /> Thumbnail<br />
  <input type="radio" name="style" value="image" /> Image<br /><br />
  Alt:<br />
  <input type="text" name="alt" />';
 }
 <input type="submit" value="Upload" /> <input type="submit" value="Cancel" />
 </div></form>';
 if (isset($_POST['Upload'])) {
  if (isset($_POST['style'])) {
   $intro = isset($_POST['intro']) ? '</a>' : '';
   $link = '<img src="'.$dir.'somefilename" class="'.$_POST['style'].'" alt="'.$_POST['alt'].'" />'.$intro;
   echo '<script>ins(\''.$link.'\')</script>';
  }
  // Upload routine.
 }

功能插件（st、en）{
e=document.getElementById（'body'）；
sel=e.value.substring（e.selectionStart，e.selectionEnd）；
en=（en？en:''）；
开关（st）{
案例“up”：
f=document.getElementById（'upfile'）。文件[0]。名称；
src='/'+f；
如果（f.match（/\（png | jpg | jpeg | svg | gif | tif | tiff）$/）{
intro=confirm（'OK=Regular Image\n\n取消=intro Image'）；
如果（！intro）en=''；
img=confirm（'OK=Style:Image\n\nCancel=Style:Thumbnail\n\n'）；
alt=提示符（'alt:\n'）；
如果（！alt）返回；
st=''；
}否则{
ftxt=prompt（'Text:\n'）；
如果（！ftxt）返回；
st=''；
}
打破
[...]
}
e、 value=e.value.substring（0，e.selectionStart）+st+sel+en+e.value.substring（e.selectionEnd，e.value.length）；
e、 焦点（）；
}

表单示例（在模态之后）：

<form method="post" enctype="multipart/form-data" />
 <input type="file" id="upfile" name="upfile" onchange="ins('up')" />
 <input type="button" value="Line Break" onclick="ins('<br />')" />
 <input type="button" value="Heading" onclick="ins('<h4>','</h4>')" />
 <textarea id="body" name="text">Some string</textarea>
</form>

function ins(st,en){
 e=document.getElementById('body');
 sel=e.value.substring(e.selectionStart,e.selectionEnd);
 en=(en?en:'');
 switch(st){
  case'up':
  f=document.getElementById('upfile').files[0].name;
  src='<?php echo $dir; ?>/'+f;
  if(f.match(/\.(png|jpg|jpeg|svg|gif|tif|tiff)$/)){
   intro=confirm('OK = Regular Image\n\nCancel = Intro Image');
   if(!intro)en='</a>';
   img=confirm('OK = Style: Image\n\nCancel = Style: Thumbnail\n\n');
   alt=prompt('Alt:\n');
   if(!alt)return;
   st='<img src="'+src+'" class="'+(img?'image':'thumb')+'" alt="'+alt+'" /\>';
  } else {
   ftxt=prompt('Text:\n');
   if(!ftxt)return;
   st='<a href="'+src+'">'+ftxt+'</a>';
  }
  break;
  [...]
 }
 e.value=e.value.substring(0,e.selectionStart)+st+sel+en+e.value.substring(e.selectionEnd,e.value.length);
 e.focus();
}

<style>
 #up {position:fixed; top:0; right:0; bottom:0; left:0; background:rgba(0,0,0,.3);}
 #up div {width:400px; margin:50px auto 0px; padding:20px; background:#fff;}
</style>

<form method="post" enctype="multipart/form-data" />
 <input type="file" id="upfile" name="upfile" onchange="this.form.submit()" />
 <input type="button" value="Line Break" onclick="ins('<br />')" />
 <input type="button" value="Heading" onclick="ins('<h4>','</h4>')" />
 <textarea id="body" name="text">Some string</textarea>
</form>

if (isset($_FILES['upfile']['tmp_name'])) {
 echo '<form id="up" method="post"><div>';
 if (getimagesize($_FILES['upfile']['tmp_name'])) {
  echo '<input type="checkbox" name="intro" /> Intro Image<br />
  Style:<br />
  <input type="radio" name="style" value="thumb" checked /> Thumbnail<br />
  <input type="radio" name="style" value="image" /> Image<br /><br />
  Alt:<br />
  <input type="text" name="alt" />';
 }
 <input type="submit" value="Upload" /> <input type="submit" value="Cancel" />
 </div></form>';
 if (isset($_POST['Upload'])) {
  if (isset($_POST['style'])) {
   $intro = isset($_POST['intro']) ? '</a>' : '';
   $link = '<img src="'.$dir.'somefilename" class="'.$_POST['style'].'" alt="'.$_POST['alt'].'" />'.$intro;
   echo '<script>ins(\''.$link.'\')</script>';
  }
  // Upload routine.
 }

#向上{位置：固定；顶部：0；右侧：0；底部：0；左侧：0；背景：rgba（0,0,0,3）；}
#向上分割{宽度：400px；边距：50px自动0px；填充：20px；背景：#fff；}
一些绳子
如果（isset（$\u文件['upfile']['tmp\u名称]]））{
回声'；
if（getimagesize（$\u文件['upfile']['tmp\u名称]]））{
echo’简介图像

风格：

缩略图

图像


Alt:

';
}
';
如果（isset（$_POST['Upload']））{
如果（isset（$_POST['style']））{
$intro=isset（$_POST['intro']）？“”；
$link=''。$intro；
回显“ins（\'.$link.\'）”；
}
//上传程序。
}

既然js是在客户端解析的，那么如何将光标位置传递给insert函数的模式窗口呢

提前谢谢

---

如果不可能，有没有其他方法（没有js框架或ajax）？

如果你的意思是body的值应该附加而不是插入，那么更改下面的代码行e.value=e.value.substring（0，e.selectionStart）+st+sel+en+e.value.substring（e.selectionEnd，e.value.length）；@userDEV-No，我的意思是插入（不是附加）。问题是，在使用插入选项（模式）的新窗口时，它不会在光标处插入。如果我使用alert/prompt/confirm设置选项，它将在光标处插入。