We Keep Coding

How to insert markdown formatting inside a contenteditable div

I am working on a markdown editor in HTML and JS, which previously used textarea but I started moving it to a contenteditable div recently due to the limitations it had, tried a lot but I cannot get it working, I just need a basic function to insert markdown ** around a selection, but there seems to be something wrong with contenteditable divs, anyone has any idea how to fix?
function editorInsertFormatting(txtarea, text) {
var selectStart = txtarea.selectionStart;
var selectEnd = txtarea.selectionEnd;
var scrollPos = txtarea.scrollTop;
var caretPos = txtarea.selectionStart;
var front = txtarea.value.substring(0, caretPos);
var back = txtarea.value.substring(
txtarea.selectionEnd,
txtarea.value.length
);
var middle = txtarea.value.substring(caretPos, txtarea.selectionEnd);
txtarea.value = front + text + middle + text + back;
if (selectStart !== selectEnd) {
txtarea.selectionStart = selectStart + text.length;
txtarea.selectionEnd = selectEnd + text.length;
} else {
txtarea.selectionStart = selectStart + text.length;
txtarea.selectionEnd = txtarea.selectionStart;
}
txtarea.focus();
txtarea.scrollTop = scrollPos;
editorLiveParser();
}

Take a look at window.getSelection(), selection.getRangeAt(), and document.execCommand, but it's a very big mountain you're going to climb.
Here's a simple starting point...
var sel = window.getSelection();
var range = sel.getRangeAt(0);
var range0 = range.cloneRange();
range.collapse(true);
document.execCommand('insertText', false, '!!!START!!!');
sel.removeAllRanges();
sel.addRange(range0);
range0.collapse(false);
document.execCommand('insertText', false, '!!!END!!!');
See https://jsfiddle.net/Abeeee/o0e481q3/1/ for a running example

Add image alt value to position of mouse when image dragged to text-area

I have a text area that users can fill out on my website. Here is an example of what I want to do:
When users comment on other people's posts in this text area, they have a collection of emoji pictures at the top to select. I want the users to click on an emoji they want to choose (and then a border appear around it), then the user can click once in the text area where they would like text pasted. This text will be from the image's alt attribute. This saves the user time when writing emoji character codes.
I have attempted some of the code myself, but I am not sure about the JavaScript. Here is my attempt...
My CSS...
img:hover {
border:1px solid blue
}
And my HTML...
<img src="smiley1.png" alt="{smiley001}"><img src="smiley2.png" alt="{smiley002}"><img src="smiley3.png" alt="{smiley003}"><img src="smiley4.png" alt="{smiley004}"><img src="smiley5.png" alt="{smiley005}"><br>
<textarea id="comments" cols="50" rows="10"></textarea>
Is there a javascript/jquery solution to this?
If this is not possible, is there a way to do it with text instead of images, with the title attribute being copied to the textarea?

Check out this fiddle. I found an "insert at the mouse location" function from this question.
The rest is simple. Add a click event to save the alt attribute of whatever image the you clicked and another click event to the textarea so the alt code is inserted. It's just a matter of clicking the image and then clicking where you want the alt code to show up.
selected = '';
$('img').click(function(){
console.log($(this).attr('alt'));
selected = $(this).attr('alt');
});
$('#comments').click(function(){
insertAtCaret('comments',selected)
// Clear the selection so it isn't copied repeatedly
selected = '';
});
// Copied from the linked answer
function insertAtCaret(areaId,text) {
var txtarea = document.getElementById(areaId);
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 range = document.selection.createRange();
range.moveStart ('character', -txtarea.value.length);
range.moveStart ('character', strPos);
range.moveEnd ('character', 0);
range.select();
}
else if (br == "ff") {
txtarea.selectionStart = strPos;
txtarea.selectionEnd = strPos;
txtarea.focus();
}
txtarea.scrollTop = scrollPos;
}

The basic javascript code should be something like:
function write_tag() {
var text = this.getAttribute("alt");
getElementById("textarea").innerHTML += text;
}
In this case, the text would be added at the end of the textarea content. A more complex code should check where is the cursor and attempt to insert the text into that point of the string.
The listener that triggers the function can be added in the image tag:
<img src="smiley1.png" alt="{smiley001}" onclick="write_tag()">
It would be cleaner to add the listener programatically, but it's another story: You should decide if you will have the javascript in the page or an external one, in that case you should wait for the entire page to load and then add listeners for all images. If you use jQuery, you can write something like this, assuming you have all your emojis into a div with the class "emojis":
$(document).ready(function(){
$(".emojis img").bind("click",write_tag);
}

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 range = document.selection.createRange();
range.moveStart ('character', -txtarea.value.length);
range.moveStart ('character', strPos);
range.moveEnd ('character', 0);
range.select();
}
else if (br == "ff") {
txtarea.selectionStart = strPos;
txtarea.selectionEnd = strPos;
txtarea.focus();
}
txtarea.scrollTop = scrollPos;
}

HTML form, make tab key trigger indent?

The default behaviour in browsers is to select the next form element. I want my textbox to indent code by, lets say 4 spaces when tab is pressed. Just like if you were indenting code in an IDE. How would I achieve this behaviour in JavaScript? If I have to use jQuery, or its easier, I'm fine with that.
Thanks!

Tracking the key code and adding 4 spaces to the element should do it. You can prevent the default when the tab key is pressed. Like so?:
Edit after all comments:
Ahh, ok so you're actually asking for several JS functions (get cursor position in text area, change text, set cursor position in text area). A little more looking around would have given you all of these, but since I'm a nice guy I'll put it in there for ya. The other answers can be found in this post about getCursorPosition() and this post about setCursorPosition(). I updated the jsFiddle for ya. Here's the code update
<script>
$('#myarea').on('keydown', function(e) {
var thecode = e.keyCode || e.which;
if (thecode == 9) {
e.preventDefault();
var html = $('#myarea').val();
var pos = $('#myarea').getCursorPosition(); // get cursor position
var prepend = html.substring(0,pos);
var append = html.replace(prepend,'');
var newVal = prepend+' '+append;
$('#myarea').val(newVal);
$('#myarea').setCursorPosition(pos+4);
}
});
new function($) {
$.fn.getCursorPosition = function() {
var pos = 0;
var el = $(this).get(0);
// IE Support
if (document.selection) {
el.focus();
var Sel = document.selection.createRange();
var SelLength = document.selection.createRange().text.length;
Sel.moveStart('character', -el.value.length);
pos = Sel.text.length - SelLength;
}
// Firefox support
else if (el.selectionStart || el.selectionStart == '0')
pos = el.selectionStart;
return pos;
}
} (jQuery);
new function($) {
$.fn.setCursorPosition = function(pos) {
if ($(this).get(0).setSelectionRange) {
$(this).get(0).setSelectionRange(pos, pos);
} else if ($(this).get(0).createTextRange) {
var range = $(this).get(0).createTextRange();
range.collapse(true);
range.moveEnd('character', pos);
range.moveStart('character', pos);
range.select();
}
}
}(jQuery);
​
</script>
<textarea id="myarea"></textarea>

Put a tags round user highlighted text?

I need to get the user selected area of a textarea and then insert <a> tags round it.
I use this to get the user selected area:
var textComponent = document.getElementById('article');
var selectedText;
if (document.selection != undefined)
{
textComponent.focus();
var sel = document.selection.createRange();
selectedText = sel.text;
}
// Mozilla version
else if (textComponent.selectionStart != undefined)
{
var startPos = textComponent.selectionStart;
var endPos = textComponent.selectionEnd;
selectedText = textComponent.value.substring(startPos, endPos)
}
Now, I know I can do a string search for the user selected text and insert a tags round it, but what happens if that user selected text appears twice in the text, for example.
Hello to you, goodbye to you.
If the user highlights the second 'you' for the link they want, surely a string replace would put a tags around every instance of 'you'.
Whats the best way to do this?

You could use my jQuery plug-in for this (demo):
$("#article").surroundSelectedText('', "");
Alternatively you could use the getInputSelection() function that I've posted on Stack Overflow a few times to get the selection start and end character indices in all major browsers and then do string substitution on the textarea's value:
var sel = getInputSelection(textComponent);
var val = textComponent.value;
textComponent.value = val.slice(0, sel.start) +
'<a href="foo.html">' +
val.slice(sel.start, sel.end) +
"</a>" +
val.slice(sel.end);

Why capture the selected text at all? What you really want is the start/end positions to drop in tags.
var textComponent = document.getElementById('article');
var selectedText;
var startPos;
var endPos;
// the easy way
if (textComponent.selectionStart != undefined)
{
startPos = textComponent.selectionStart;
endPos = textComponent.selectionEnd;
}
// the hard way
else if (document.selection != undefined)
{
textComponent.focus();
var sel = document.selection.createRange();
var range = document.selection.createRange();
var stored_range = range.duplicate();
stored_range.moveToElementText(textComponent);
stored_range.setEndPoint( 'EndToEnd', range );
startPos = stored_range.text.length - range.text.length;
endPos = startPos + range.text.length;
}
// add in tags at startPos and endPos
var val = textComponent.value;
textComponent.value = val.substring(0, startPos) + "<a>" + val.substring(startPos, endPos) + "</a>" + val.substring(endPos);
IE code modified from this reference.
EDIT: Note Tim Down's comment about newlines. Also, probably use his soltion, because it's better.

Insert into textarea | JavaScript

I'm trying to insert the image url where the point of the is to be when editing the textarea value.
function addImageURL()
{
var imageurl = prompt("Enter image URL", "Your name")
var post = document.getElementById("message-put").value;
document.getElementById('message-put').value = post + '[img]' + imageurl + '[/img]';
}
This code grabs the value inside the adds the image url next to it which I don't want, I need it to insert it where the point was when editing the textarea
Thanks
EDIT:
Like Stackoverflow, you see the image icon, you click it or click on the hyperlink, a box comes up and inserts it where you were editing the textarea :P

If you want to insert something at the cursor, here is something I found using teh Googlez:
function insertAtCaret(areaId, text) {
var txtarea = document.getElementById(areaId);
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 range = document.selection.createRange();
range.moveStart('character', -txtarea.value.length);
range.moveStart('character', strPos);
range.moveEnd('character', 0);
range.select();
}
else if (br == "ff") {
txtarea.selectionStart = strPos;
txtarea.selectionEnd = strPos;
txtarea.focus();
}
txtarea.scrollTop = scrollPos;
}
The source: http://www.scottklarr.com/topic/425/how-to-insert-text-into-a-textarea-where-the-cursor-is/ (I haven't tested this; it's from 2008 so it may be a little dated).

A technique I used when trying to achieve similar functionality in a WYSIWYG:
Retrieve parent node from selection (range) in Gecko and Webkit » StackOverflow
Might be useful if working with frames, or want to avoid some cursor issues I ran into.

I think you may find what you're looking for here:
Caret position in textarea, in characters from the start
And an example implementation here:
http://javascript.nwbox.com/cursor_position/