I have a javascript function that inserts (or wraps) various text at the cursor position when a button is clicked. Options (if needed) for the inserted text are via prompts / alerts.
I'm adding a modal window for the upload section of the form for options, so I can remove the prompts / alerts.
Prior to the modal window, the javascript function knew where to insert the text when the upload "browse" button was clicked.
After the modal window, the js insert function interprets the start position as "0", and inserts the text at the beginning instead of where the cursor was.
Question: How can I pass the cursor position to the modal window for the insert function?
Note:
1. I found Pass javascript to php in modal window and a few others, but they don't seem to apply.
2. This is hand-written (no javascript framework).
3. Code examples are quick-n-dirty to get the idea across, not production.
Form Example (before modal):
<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>
Javascript:
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
Cancel = Intro Image');
if(!intro)en='</a>';
img=confirm('OK = Style: Image
Cancel = Style: Thumbnail
');
alt=prompt('Alt:
');
if(!alt)return;
st='<img src="'+src+'" class="'+(img?'image':'thumb')+'" alt="'+alt+'" /\>';
} else {
ftxt=prompt('Text:
');
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();
}
Form Example (after modal):
<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.
}
So, since js is parsed client side; how to pass the cursor position to the modal window for the insert function?
Thanks in advance!
If it is not possible, is there another way (without js framework or ajax)?