CodeMirror getCursor() not working? JQuery Javascript - javascript

Using CodeMirror. I cannot get the getCursor() function to work. I have a jsFiddle with codemirror sources attached.
----> see here JSfiddle <----
I'm trying to insert text into the editor, then force the cursor to move back a specified number of spaces. I'm just trying to get the cursor location with getCursor() but I can't seem to get it to work. Any thoughts?
$(document).ready(function() {
//Changing the textarea to a CodeMirror rich text editor
var editor = CodeMirror.fromTextArea(document.getElementById('theZone'), {
mode: 'text/html',
lineWrapping : true,
lineNumbers : true,
extraKeys : {
"Tab": "indentMore",
"Shift-Tab": "indentLess",
"'>'": function(cm) { cm.closeTag(cm, '>'); },
"'/'": function(cm) { cm.closeTag(cm, '/'); }
} ,
onCursorActivity: function(cm) {
cm.setLineClass(hlLine, null, null);
hlLine = cm.setLineClass(cm.getCursor().line, null, "activeline");
}
});
//When SELECT changes - insert the value into the CM editor, set focus, get cursor position, move cursor back [x] amount of spaces.
$('#sel').change(function() {
var selected = $(this).find('option:selected');
var mynum = selected.data('val');
editor.replaceSelection($(this).val(), focus);
editor.focus();
var start_cursor = editor.getCursor(); //I need to get the cursor position
alert(start_cursor); //Cursor position always comes up [object Object]
//write code to move cursor back [x] amount of spaces. [x] is the data-val value.
});
});

The code seems to work just fine. alert() will not display objects. use console.log() instead.
I added the rest of the code.
$('#sel').change(function() {
var selected = $(this).find('option:selected');
var mynum = selected.data('val');
editor.replaceSelection($(this).val(), focus);
editor.focus();
var start_cursor = editor.getCursor(); //I need to get the cursor position
console.log(start_cursor); //Cursor position
var cursorLine = start_cursor.line;
var cursorCh = start_cursor.ch;
//Code to move cursor back [x] amount of spaces. [x] is the data-val value.
editor.setCursor({line: cursorLine , ch : cursorCh -mynum });
});

The onCursorActivity was not working for me.
This is what worked for me:
let myCodeMirror = CodeMirror.fromTextArea(myTextArea, {
lineNumbers: true,
});
CodeMirror.on(myCodeMirror, "cursorActivity", (instance, obj)=>{
console.log(instance.doc.getCursor())
}
This will log an object every time the cursor changes it's position which contains line number and a ch number.

Related

How to fix reverse text in javascript live syntax highlighting?

My script highlights the keywords but whenever it does, it messes with the string and does random things with the text like reverse it and mix it up.I was wondering if someone could tell me how to unreverse this text or move the cursor to the end of the contenteditable div or at most just fix it for me. I don't want any external libraries just javascript and jquery.
jsfiddle
JS Code:
function UnColor() {
var elem = document.getElementById("editor");
var text = elem.textContent;
elem.innerHTML = text;
}
function Color() {
UnColor();
var elem = document.getElementById("editor");
var code = elem.innerHTML;
code = code.replace("var","<span style='color:dodgerblue'>var</span>");
code = code.replace(/"(.*?)"/g,"<span style='color:green'>"$1"</span>");
code = code.replace(/<(.*?)>/g,"<span style='color:#F90'><$1></span>");
elem.innerHTML = code;
}
setInterval(Color,1000)
Thanks!
If the issue you're having is the cursor moving around while editing, you can fix that by grabbing the position of the cursor and putting it back at the end of the function. Do that by getting the selectionStart property of your editor textbox and then setting the selectionEnd property to that value after running the replacement.
Check out this answer for more information about selectionStart and selectionEnd.
Here's a simple code snippet from this answer that should get you rolling.
document.getElementById('target').addEventListener('input', function (e) {
var target = e.target,
position = target.selectionStart; // Capture initial position
target.value = target.value.replace(/\s/g, ''); // This triggers the cursor to move.
target.selectionEnd = position; // Set the cursor back to the initial position.
});
<p>The method <code>.replace()</code> will move the cursor's position, but you won't notice this.</p>
<input type="text" id="target" />
This issue is coming as the textContent of editor id being equated to its innerHTML. So change the variable name like the JS code I was written here :
function UnColor() {
var elem = document.getElementById("editor");
var text = elem.textContent;
var elem2;
elem2.innerHTML = text;
}
function Color() {
UnColor();
var elem = document.getElementById("editor");
var code = elem.innerHTML;
code = code.replace("var","<span style='color:dodgerblue'>var</span>");
code = code.replace(/"(.*?)"/g,"<span style='color:green'>"$1"</span>");
code = code.replace(/<(.*?)>/g,"<span style='color:#F90'><$1></span>");
var elem2;
elem2.innerHTML = code;
}
setInterval(Color,1000)

Textarea selection in IE 11 not working appropriately on last line

I'm building an Angular directive that consists of a textarea for writing Markdown, and buttons that insert formatting into the text area. When clicked, if no text is currently selected, a button (bold, for instance) should append the following:
**replace text**
where replace text is selected.
It is working as expected in every scenario save the following: In IE 11, when the selection occurs on the final row, but is not the first row. It works as expected in every other browser, and works fine in IE 11 minus this condition.
Here is the code from the directive for performing the selection:
var editor = element.find('textarea')[0];
function createWrappingMarkdown(symbol) {
// If text is selected, wrap that text in the provided symbol
// After doing so, set the cursor at the end of the highlight,
// but before the ending symbol(s)
/* This section works fine */
if (editor.selectionStart < editor.selectionEnd) {
var start = editor.selectionStart,
end = editor.selectionEnd;
var value = editor.value.substring(0, start) + symbol +
editor.value.substring(start, end) + symbol +
editor.value.substring(end, editor.value.length);
scope.$evalAsync(function () {
editor.value = value;
editor.focus();
editor.selectionStart = end + symbol.length;
editor.selectionEnd = end + symbol.length;
});
// If no text is highlighted, insert {symbol}replace text{symbol}
// at the current cursor position.
// After inserting, select the text "replace text"
/* This is where the selection is broken in IE 11 */
} else if (editor.selectionStart || editor.selectionStart === 0) {
var start = editor.selectionStart,
message = "replace text";
var value = editor.value.substring(0, start) + symbol +
message + symbol + editor.value.substring(start, editor.value.length);
scope.$evalAsync(function () {
editor.value = value;
setCursorSelect(start + symbol.length, start + symbol.length + message.length);
});
}
}
function setCursorSelect(start, end) {
editor.focus();
if (editor.setSelectionRange) {
editor.setSelectionRange(start, end);
} else {
editor.selectionStart = start;
editor.selectionEnd = end;
}
}
Update
See answer for the fix to this issue. The Plunk has been revised to demonstrate this fix.
After debugging further in IE, I found that editor.selectionStart was being set to a value higher than editor.value.length whenever the cursor was at the last available position in the textarea. This was only happening in IE, and not the other browsers. With this in mind, I was able to come up with the following solution whenever a selection is needed following a button press:
scope.$evalAsync(function () {
if (editor.value.length < editor.selectionStart) {
start = editor.value.length;
}
editor.value = value;
setCursorSelect(start + symbol.length, start + symbol.length + message.length);
});
The plunk above has been updated to reflect this fix.

Input not scrolling to the far right like it should

I have an input field where i append data at the cursor position.
after that, i set the selectionStart to the end of the field.
BUT, whenever i add something to the input (by button clicks), i only see the left part of it (until it reaches the right edge). everything more is there (i can select it with the mouse and scroll), but it doesn't automatically show the right edge.
how can i do that?
i want to add something to the input and jump right to the end of the string.
// add 2 digit number
$('button#2digit').on('click', function add2digit() {
addNumberToInput(10, 99);
});
function addNumberToInput(min, max) {
var problemInput = $('input#testProblem');
if (lastCharIsOperation() || problemInput.val().trim() < 1) { // if last char is an operation or first in string, just append the number
addAtCursor(randomNonPrime(min, max));
} else {
addAtCursor('+' + randomNonPrime(min, max));
}
}
function addAtCursor(toAdd) {
var problemInput = $('input#testProblem');
var oldText = problemInput.val();
var cursor = problemInput[0].selectionStart;
var pre = oldText.substring(0,cursor);
var post = oldText.substring(cursor, oldText.length);
//insert at cursor
problemInput.val(pre + toAdd + post);
//put cursor to end
problemInput[0].selectionStart = problemInput.val().length;
}
(it even skips back to the left on blur, i couldn't make a picture with the windows snipping tool, because i had to click it first)
From Set mouse focus and move cursor to end of input using jQuery.
var problemInput = $('input#testProblem');
problemInput.focus();
var t=problemInput.val();
problemInput.val('');
problemInput.val(t);
Here is the start of a full solution: https://jsfiddle.net/michaelgentry/vwm159pt/
This will still cause the scroll to jump back to the left on blur, but does what you are asking:
var elem = document.getElementById('myInput');
elem.focus();
elem.scrollLeft = elem.scrollWidth;

Append HTML Tag Into Codemirror and Center Cursor Location

Fiddle - http://liveweave.com/kzBlq3
I'm trying to add custom html tags into CodeMirror and focus the cursor into the center of these tags.
Here's an example of how it'd be done for a textarea.
// Mirror Codemirror Code to Textarea
$(".code").val( editor.getValue() ).on('keyup change', function() {
editor.setValue( $(this).val() );
});
// Add center code
$(".bold").click(function() {
// For a regular textarea & center cursor
var start = $('.code').get(0).selectionStart;
$('.code').val($('.code').val().substring(0, start) + "<strong></strong>" + $('.code').val().substring($('.code').get(0).selectionEnd));
$('.code').get(0).selectionStart = $('.code').get(0).selectionEnd = start + 8;
$('.code').focus();
return false;
});
The lines and locations will always be different so I have to grab it's location first before I add and move it aside the added characters as I did with the textarea demo.
However I don't want to use a blank textarea. I want to use Codemirror.
I can add the html tag without a problem, but getting the cursor location inside of the appended tag is where I'm having trouble.
editor.replaceRange("<strong></strong>", editor.getCursor());
Add the following code to move cursor to center of tag. Also I updated your code, Please use the below link for accessing it
http://liveweave.com/LLq9GS
$(".bold").click(function() {
// For codemirror & center cursor
editor.replaceRange("<strong></strong>", editor.getCursor());
editor.focus();
var str="</strong>";
var mynum=str.length;
var start_cursor = editor.getCursor(); //I need to get the cursor position
console.log(start_cursor); //Cursor position
var cursorLine = start_cursor.line;
var cursorCh = start_cursor.ch;
//Code to move cursor back [x] amount of spaces. [x] is the data-val value.
editor.setCursor({line: cursorLine , ch : cursorCh -mynum });

html2canvas remove multiple spaces and Line Break

I'm using html2canvas to render html contents to image. But it supports only single blank space between word and also all text displayed only in One.
Example 1
if text is `Word1 Word2` it become to `word1 word2`
Example 2
This is First line
This is Second Line
Image:
THis is First line This is Second Line
I looked in to the html2canvas Code and I believe below these two functions are responsible for drawing the text and spaces. Help me how can i achieve my target.
function renderText(el, textNode, stack) {
var ctx = stack.ctx,
color = getCSS(el, "color"),
textDecoration = getCSS(el, "textDecoration"),
textAlign = getCSS(el, "textAlign"),
metrics,
textList,
state = {
node: textNode,
textOffset: 0
};
if (Util.trimText(textNode.nodeValue).length > 0) {
textNode.nodeValue = textTransform(textNode.nodeValue, getCSS(el, "textTransform"));
textAlign = textAlign.replace(["-webkit-auto"],["auto"]);
textList = (!options.letterRendering && /^(left|right|justify|auto)$/.test(textAlign) && noLetterSpacing(getCSS(el, "letterSpacing"))) ?
textNode.nodeValue.split(/(\b| )/)
: textNode.nodeValue.split("");
metrics = setTextVariables(ctx, el, textDecoration, color);
if (options.chinese) {
textList.forEach(function(word, index) {
if (/.*[\u4E00-\u9FA5].*$/.test(word)) {
word = word.split("");
word.unshift(index, 1);
textList.splice.apply(textList, word);
}
});
}
textList.forEach(function(text, index) {
var bounds = getTextBounds(state, text, textDecoration, (index < textList.length - 1), stack.transform.matrix);
if (bounds) {
drawText(text, bounds.left, bounds.bottom, ctx);
renderTextDecoration(ctx, textDecoration, bounds, metrics, color);
}
});
}
}
function drawText(currentText, x, y, ctx){
if (currentText !== null && Util.trimText(currentText).length > 0) {
ctx.fillText(currentText, x, y);
numDraws+=1;
}
}
html2canvas render the textarea or Input box value in the one line and trim all more than one spaces between words. So I found solution by converting text area into the div tag , Check out html contenteditable Attribute
Replace <textarea></textarea> with <div contenteditable="true"></div>
if you want to have the same textarea behavior to the div with jquery then use this code
$( '#EDITABLE' ).focus();
var selection = window.getSelection();
var range = document.createRange();
var div = $('#div2').get(0);
range.setStartBefore(div);
range.collapse(true);
selection.removeAllRanges();
selection.addRange(range);
// cursor should now be between div1 and div2
range = window.getSelection().getRangeAt(0);
console.log("range object returned is: ", range);
See Example: http://jsfiddle.net/9ZZpX/3/
I know it's old but, here is the workaround I came with using jquery/JS for your "Example 2":
var oldTextArea = $('#textArea').replaceWith("<div id='divForTA' class='divTextArea'>" + $('#textArea').val().replace(/\n/g, "<br>") + "</div>");
var el = document.querySelector("#container");
html2canvas(el).then(canvas => {
canvas.toDataURL();
$('#divForTA').replaceWith(oldTextArea);
});
So basicaly you replace your textArea with a "div" and once the canvas is rendered as image you revert the new created "div" to "textArea"
You can style the "div" using the "id" to add a border to make it looks like "textarea" like this:
#divForTA {
border: solid 1px lightgrey;
}
I suggest to put a comment in the github html2canvas issue so at some point this will be fixed
https://github.com/niklasvh/html2canvas/issues/2008
Hope this will help someone :-)
I tried all kinds of things, including a parameter that exists in a specific version of html2canvas which is: letterRendering: true in the options of your object.
In my case, I receive an error that this option doesn't exists in the lib that I've download
html2canvas(document.querySelector("#capture2image"), {
allowTaint: true,
useCORS: true,
logging: false
})
So i just did a simple/non-maintainable thing:
{{ name.replace(" ", " ") }}
maybe it will help others who also tried everything yet nothing worked ....
there is a race condition in html2canvas.
try this:
setTimeout(() => {
canvas = html2canvas(element, {scale:1});
}, 0)

Categories