how to retrieve a line of text from ACE editor? - javascript

I integrated ACE editor in my site. I want to retrieve the text in a certain line. I've searched and found This and This. But unfortunately, I can't understand those, as I'm a newbie to the subject. Can anyone give an example for it ?
I got the lines to an array using the following code.
var line = document.getElementsByClassName("ace_line");
Are there any methods like
line[count].getValue
Which can return the string of the text in that line ?

You need to call
line0 = editor.session.getLine(0);
using getElementsByClassName("ace_line") or similar won't work since
ace creates DOM elements only for visible lines.
text content of the DOM element is different from the text in document since tabs and some other characters are replaced by spaces.

line[count] already returns the DOM element of that line. So all you have to do is to extract the plain text from that element. if you are using jQuery you could do:
To get the text of the first line for example (line[0])
var lineText = line[0].text();
If you are not using jQuery and want to do that in javascipt:
var lineText = line[0].innerHTML.replace(/<[^>]*>/g, "");

Related

How do I select a whole line programmatically inside a paragraph class in Google Docs?

I'm trying to get a whole line from a paragraph where the user has some text selected, the goal for this is to insert a line break in that specific line. Is there a way to do this? If not could you give me some advice to workaround this?
This is an example of what I want to achieve
Double click on the paragraph line to select entire line till full stop.
Triple click one the paragraph line to select whole line.
When you selected a text in a paragraph, you want to retrieve the whole paragraph.
You want to achieve this using Google Apps Script.
If my understanding is correct, how about this sample script?
Sample script:
Before you run this script, please select a text in a paragraph on the active Document. Then, run this script.
function myFunction() {
var doc = DocumentApp.getActiveDocument();
var selection = doc.getSelection();
var e = selection.getRangeElements();
for (var i = 0; i < e.length; i++) {
if (e[i].getElement().getParent().getType() === DocumentApp.ElementType.PARAGRAPH) {
var p = e[i].getElement().getParent().asParagraph();
Logger.log(p.getText())
}
}
}
Note:
This is a simple sample script. So please modify it for your situation.
References:
getSelection()
getRangeElements()
If I misunderstood your question and this was not the result you want, I apologize.
Edit:
When you selected a word in a paragraph, you want to retrieve a line including the word from a paragraph which can be seen at browser.
Unfortunately, in the current stage, this cannot be achieved. For example, this thread might help understanding about this. If the number of characters in a line can be retrieved, this might be able to be achieved. But it cannot achieve from the selected word. I apologize for this situation.

hide some lines using ACE editor

I would like to know if using ace editor is possible to hide some lines of the content of the editor.
In particular I am interested in hiding some lines like:
%Some Tag useful to find particular chunk of code in the editor
Example:
BEGIN My theory
%Block:Function id:tick
Myfunction() {}
END
I have been using The tag ( %...) to help myself to find
Myfunction() {} , because I need to modify that particular part of code.
So, I wouldn't show that line to the user, but I would use it as tag so keeping it in the content of the editor.
I cannot use reference like the number of row because it may change.
Thank you
you can use addFold
var Range=require("ace/range").Range;
editor.session.addFold("", new Range(1,0,2,0))
first argument to addFold is the placeholder text and the second one is the range which you want to hide

Javascript create element and add HTML

say for instance i have the following line:
var arrowBase = document.createElement('div')
Now within this div tag i want to add some HTML (i.e text).
Then i tried the following:
arrowBase.innerHTML('hello');
However this does nothing:S
i have also tried: arrowBase.HTML('hello');
But once again without any result
I know is that rather simple but in my search i could'nt find the answer hope someone is able to help me out here
Read the docs, it is not a method.
arrowBase.innerHTML = 'hello';
arrowBase.textContent = "HELLO"
also does the same thing but only text can be specified. Whereas in innerHTML html tags can be specified along with the text.

Iterating over all tags in a string containing HTML using javascript/jquery

I'm using a rich text editor type control, which is a written as a jQuery plugin. It basically inserts an IFrame onto the page, and makes it editable - fairly standard for rich text controls.
Now, what I'm looking to do is improve upon an option which removes all formatting from the text editor. Currently it is being done with a large list of regular expressions, and a quick google search suggests that this is not the correct way to go about it. I'm looking to allow this unformatting some degree of flexibility, so that I can leave certain tags in (like paragraph tags).
I was trying to use the jQuery built in DOM parsing to do this easily, but I seem to be having trouble.
Let's assume I have a sample HTML string:
<Body><p>One <strong>Two</strong> <em>Three</em></p></Body>
I'm looking to un-format it so that all non paragraph tags are removed. So, I'd be expecting the output to be a string which looks like this:
<Body><p>One Two Three</p></Body>
Sample code:
//Some very simple HTML obtained from an editable iframe
var text = '<Body><p>One <strong>Two</strong> <em>Three</em></p></Body>';
var $text = $(text);
//All tags which are not paragraphs
$(':not(p)',$text).each(function() {
//Replace the tag + content with just content
$(this).html($(this).text());
});
//I'll be honest, I found this snippet somewhere else on stackoverflow,
//It seems to parse the jquery object back into an HTML string.
var returnVal = "";
$text.each(function(){
returnVal += $(this).clone().wrap('<p>').parent().html();
});
//Should be equal to '<p>One Two Three</p>'
return returnVal;
This seems like it should work, but unfortunately it doesn't. In the above example, 'returnVal' is the same as the input (minus the 'body' header tags). Is there anything I'm obviously doing wrong here?
Replace this line:
$(this).html($(this).text());
... with this:
$(this).replaceWith($(this).text());
... and it should work (at least it works here).
...snip
// Here's your bug:
$(':not(p)',$text).each(function() {
// You can't use .html() to replace the content
// $(this).html($(this).text());
// You have to replace the entire element, not just its contents:
$(this).replaceWith($(this).text());
});
...snip

check for paragraph and inline text

As title said, i want to check wether the selected text is paragraph or belong to two different paragraph or an inline text,
I am using this java script code for getting text.
var range = window.getSelection().getRangeAt(0);
var selectionContents = range.extractContents();
So need to check for selectionContents.
Thanks in advance.
I suspect this isn't quite a full answer yet so I'll edit and explain further once it's more clear, but is this something like what you're looking for? http://jsfiddle.net/UFdDY/
[ getSelectionHtml() referenced from HTML of selected text ]
EDIT:
Now take a look at the revision, it can tell the difference between inline text and an entire paragraph if this is what you're looking for, but it takes some modification to the html (assumes you're using server side script to generate the output).
http://jsfiddle.net/UFdDY/1/

Categories

Resources