wwevo / guildhome

Day to day guild management tool and community hub for Guild Wars 2
0 stars 2 forks source link

Insert picture functionality #23

Open AniOnGit opened 8 years ago

AniOnGit commented 8 years ago

Depending on the add link functionality there shall be a mechanic to be able to add a picture with an optional alt-text into the editor. This including making a choice between URL or picture available in the insert box.

wwevo commented 7 years ago

I've dug up some javascript that might do the trick. non-jquery so far.

function insertAtCaret(areaId, text) { var txtarea = document.getElementById(areaId); if (!txtarea) { return; } var scrollPos = txtarea.scrollTop; var strPos = 0; var br = ((txtarea.selectionStart || txtarea.selectionStart == '0') ? "ff" : (document.selection ? "ie" : false ) ); if (br == "ie") { txtarea.focus(); var range = document.selection.createRange(); range.moveStart ('character', -txtarea.value.length); strPos = range.text.length; } else if (br == "ff") { strPos = txtarea.selectionStart; } var front = (txtarea.value).substring(0, strPos); var back = (txtarea.value).substring(strPos, txtarea.value.length); txtarea.value = front + text + back; strPos = strPos + text.length; if (br == "ie") { txtarea.focus(); var ieRange = document.selection.createRange(); ieRange.moveStart ('character', -txtarea.value.length); ieRange.moveStart ('character', strPos); ieRange.moveEnd ('character', 0); ieRange.select(); } else if (br == "ff") { txtarea.selectionStart = strPos; txtarea.selectionEnd = strPos; txtarea.focus(); } txtarea.scrollTop = scrollPos; }

<textarea id="textareaid"></textarea> <a href="#" onclick="insertAtCaret('textareaid', 'text to insert');return false;">Click Here to Insert</a>

this might help to get started, it's far from a workable solution :)

http://stackoverflow.com/questions/1064089/inserting-a-text-where-cursor-is-using-javascript-jquery