Get GoogleDocs Selection from DIV and replace it (JAVASCRIPT, XUL) - javascript

I want to develop a Firefox extension that gets the selected text from a google word doc and replaces it with another text (any text).
If i inspect the selection with Firefox's InspectElement i find that the selection is a DIV with the class name = "kix-selection-overlay kix-overlay kix-unprintable kix-overlay-under-text" .
How do i get the text from the DIV and then modify it ? All the methods that worked in a normal webmail, even in a excel spreadsheet(google docs) failed to work in a google doc word document.
For now i just managed to obtain the element with :
var focusedElement = document.commandDispatcher.focusedElement;
Thank you a lot !
Alex!

The problem is that Google Docs has its own selection system, instead of using the Javascript range document it creates divs for every line that is selected behind the text. It does this so that collaborative users can have different colors for their selections and because the range object has annoyances with the way that it handles nested elements and offsets.
Google Docs would have an internal selection object as well as copy and paste functionality. You simply need to look through the code and find what methods are called by the oncopy and onpaste event handlers.
Ryan

Related

How to get selected text in Office365 Word document from within a Chrome Extension?

I'm writing a small Chrome Extension that acts as a "web clipper". You can select a portion of text on a webpage, click the extension icon in the toolbar and the selected text plus the URL, selected document metadata, etc. is placed on the clipboard. (I'm writing this extension because I want the clipboard text formatted in a very specific way)
Things are straightforward when working with regular websites. However, both MS Word online and Google Docs present an interesting problem. Neither of them maintains the regular concept of selection, so window.getSelection() returns empty. (Google Docs is a topic of many questions here, so I'll leave it alone for now)
MS Word uses DOM elements, but maintains the selection by dynamically wrapping <span class="Selected"> elements around the selected chunks. I've tried fetching those with document.getElementsByClassName('Selected') but that only works in the javascript console - it returns an empty result when run by my Chrome Extension contents.js code.
So far, I've been unable to find any answers by googling, but I'm sure someone has solved this already...any tips appreciated.

How to force document.execCommand to apply to specific element?

I've been working on a WYSIWYG project that utilizes the document.execCommand() method. Currently our toolbar contains a data-target attribute, but it's not being utilized to link the toolbar to it's respective editor. A while back we received a couple of reports from users asking for help with this because they were adding multiple editors on the page. Because the data-target isn't being utilized in our code, when they use the toolbar on for one editor the styling is being applied on both editors.
I've been looking online for resources to figure this out but every example I've been able to find just shows one editor on the page at a time. Any suggestions as to how I might be able to apply the styling created by the document.execCommand to only that editor specified in the data-target attribute?
Get the tool bar parent DOM id which you click in one editor.
Get the selected text DOM parent Id.
Compare if both are same means allow to apply the action other wise reject it.

Get selected text with Acrobat Javascript API

I'm trying to make a plugin written in javascript in Acrobat Pro XI.
I digged pretty much in the documentation, but founds nothing that helps me doing this simple thing.
Is there a way to get the selected text in an open document?
Your findings are correct. (Acrobat) JavaScript has no access to "selected text" in the base document.
A possible workaround is using the Highlight annotation. You either set the option to show the selected text in the popup box, and then you can access it directly from JavaScript.
…Or you read out the coordinates of the annotation, loop through the words of the page, compare with the coordinates and if you have a match, you have the "selected" text.

How to record the position of text on a page?

What I'm trying to do is allow the user to select a piece of text on the page and highlight it, then be able to load this selection and re-highlight it on further visits (with purely client side JavaScript, I intend to package this into a Chrome extension in future).
I am selecting the text with window.getSelection, but AFAIK this doesn't give me any kind of index or placement data about the selected text (or element).
The only way I can currently think of is to record the actual text and search for it, but this raises the problem of uniqueness (the same string of text is likely to appear multiple times on a given page). Is there a way of traversing the DOM tree upwards and storing the 'path' to the containing element (and then only having to worry about uniqueness within that one element)? I'd be happy with that if there isn't a better way.
Thanks
Edit: what I am doing right now is something similar to this: http://jsfiddle.net/e3XX6/
Have you examined the selection object returned by the getSelection() method? For example, it has an anchorNode property that in turn has a parentElement property. That last property will tell you the element that contains the text.
See this version of your fiddle (open your console!): http://jsfiddle.net/e3XX6/1/
Also, since you're going to make this a Chrome Extension, I'd just recommend using HTML5 Web Storage to remember the selection.

Chrome Extension: How can I show the find bar and supply text for it?

I am making an extension that stores the selected text from the currently active webpage into localstorage, then when the user click on this selected text in my extension's popup, the extension will fire chrome.tabs.create and open the website where the selected text was selected. These functions work, but I don't know how to trigger the 'find' function when the new tab opens. I want the newly created tab to highly the selected text that my extension stored. I think there are two ways to do this...
somehow trigger the 'find' function that the browser by default has. The one with 'Ctrl+F" or 'Command+F" triggers and insert the selected text in there
edit the HTML of the newly created page by highlighting the selected text.
new_source = { "url" : tab[0].url, "title" : tab[0].title, "quote" : selectedQuote, "id" : idSource};
sources.push(new_source);
localStorage["sources"] = JSON.stringify(sources);
This is how I'm storing my information
You can't trigger Chrome's native find dialog, but you can invoke window.find(). The main differences between the native dialog and find() are
find() only highlights one of the matches in the page, whereas the
native dialog highlights all. To be precise, find() will begin by
highlighting the match nearest to the top of the document, and
repeated invocations will move it down the page.
find() will highlight the selected text in with the default blue color, whereas Chrome's find dialog highlights its matches in orange. However, this can be mimicked by modifying the background CSS property of the ::selection pseudo-class.
Depending on your use case this might be sufficient.
However, if you want to highlight a specific quote on the page, and need to account for possible duplicates of that quote, then it's a bit more tricky, and I'm not sure it can be done perfectly. You'll want to get the precise location of the selected text using window.getSelection(), find a way to identify its startNode and endNode across page reloads (if they have ids, this is easy, but if not you'll have to resort to hacks), and then when the page is reopened, use Selection.addRange() to restore it.

Categories

Resources