Hello Again,
I am trying to use Javascript to copy text from the plugin ‘document viewer’ from zeroqode to the clipboard. Below I have tried the 2 snippets of code separately. Both of these are in the script metatags in headers. My question is in the work flow I have ‘run javascript’ but what do I need to type in the box to get this code to actually run. Below are some screenshots of what code I am using and the box in the workflow. Thank you for your time in advance.
Very Respectfully,
Josh
You don’t need any of the scripts in your page headers. (Also, those will never work. Delete them now.)
Just drop the following into your Run JavaScript on your icon:
bubble_fn_select(window.getSelection().toString())
What this does is calls a function bubble_fn_select (which we will create in the next step) with an argument that returns the currently selected text (window.getSelection().toString()). If no text is selected, this will return a null string.
And now you need a JavaScript to Bubble element on your page. Set it up like this:
This creates the function bubble_fn_selectand sets it up to accept a text value (just like we are going to send it when the icon is clicked).
The selected text will be available to you as that JavascripttoBubble's value. Additionally it will trigger an event, if you want.
Keith,
Thank you Keith! I will try this out and let you know if I have any issues.
Very Respectfully,
Josh
Keith,
This works great for input fields but I cant get it to work with documents i upload from the document viewer. Is it possible to get a selection from the document viewer? Thank you.
Josh
Well, the above is a generic solution for returning the current selection in the browser window as a string.
However, looks like Document Viewer (looking at their demo page) winds up with the document in an iframe. So you need to do .getSelection() on contents of the iframe.
(BUT you can only do this if the origin of the iframe is same-domain. I’m pretty sure this iframe hosts from Gdrive, right?)
You’d need to expose HTML ID attributes if you haven’t already done so:
Then give your document viewer element an ID (like “keith”). Now you’ll be able to find the iframe like this (if you look at the elements in the console, you’ll see that the iframe is the first child of the bubble element), so:
var frame = document.getElementByID(“keith”).firstElementChild
That’s the iframe. From there, you may or may not be able to do:
var keith_doc = frame.contentDocument
… and then keith_doc.getSelection.toString() would (I believe) give you whatever is selected.
The PROBLEM THOUGH is that the src for the iframe is going to be from Google drive and cross-domain restrictions are going to stop you from getting contentDocument.
So, I don’t think you can successfully do this, but that’s how you’d do it…
Aside: the Google document viewer Api seems to have methods that do allow one to get the selection in the doc, so maybe just make the request of zeroqode?
#pluginsthatdontdoanything, amirite?
Keith,
I will try to get your new solution tonight. If I download the document reader and counter I can get all of the contexts for a document into a text box or in my database. Could I then search the highlighted text from the document viewer in the text box and return that value?
I will ask zeroqode but they told me to use both. The issue I have with document reader and counter is when the document is uploaded the format that is returned is just words and not the same format.
I will let you know what I find out. Thank you again for your time and ongoing help.
Very Respectfully,
Josh
Yeah, if you are parsing the document and then just displaying the text from it in a text element, the original idea will work.
Keith,
In your previous post you reference the firstelementchild. What is that and how do I find it. I will post the view from the console so you can help me. Thank you.
Josh
Keith,
I used the feature from bubble to embed the document from my file uploader using an html to view it, it works great but i still cant get a button to copy text from it. now that the file is embedded is it easier to get the element by id or get info from the pdf? thank you.
Josh
Hey @josh14, point me to the URL of your run mode with your file embedded in it and I might be able to tell you more…
im not sure that will work but there it is. If you click on the file uploader on the top it will embed a pdf file of your choosing. let me know if that works or if you need something else. Thank you again for your time.
Very Respectfully
Josh
Keith,
When i uploaded the document. I put a multiline textbox to the right side so you could see the URL or the uploaded document. Let me know if you think it is possible to manipulate the data in the uploaded file specifically copy and paste or read and write. Thank you again fro your time Keith.
Very Respectfully,
Josh
Hey @josh14, I took a look at this, but don’t really see an easy way to grab the selection in the PDF. The issue is CORS.
(Code on your app’s domain cannot directly access the selection, which is being made in an embedded file coming from another domain [the PDF].)
I don’t have an easy workaround for you, but perhaps someone whose done other stuff with PDF display in a Bubble might have some suggestions.
There are partial workarounds on some systems. For example, on some systems/browsers, if the user selects text and then copies it to their local clipboard, the browser can then read that via the Clipboard API, but that’s not exactly the behavior you’re going for.
Keith,
I have looked into the clipboard API but how would I implement the code it is referencing into my bubble app?
Can I ask what you are actually trying to accomplish? Your original post talks about how to solve a problem with your implementation, but what is the actual goal?
I ask because I’m only guessing, but are you trying to grab the text of a file that you upload?
If so, would using optical character recognition work better for you? You would get the raw text without formatting, but you would get the text. I am likely missing something, but if you can shed more light on this, I’ll give any ideas I have.
Hello Troy,
Here is the goal. A user can upload a file (as of right now it is a pdf that is embedded). I want the uploaded file to keep the same format so it looks the same. What I want to do is get the text from an uploaded file (whether it is through the document viewer API, embedding the file in the app using the google embedder, or embedding it the way that I have done) and copy it to a rich text box in my app. So, text in file copied and pasted to a rich text box in my app by the user highlighting the text and pressing a button which then copies the highlighted text from the file to my app. The text in my app only needs to be text and does not need to keep its formatting. The above screen shots show what I am trying to do. I can send you more if you need. Thank you so much for your time because I am having issues fixing this problem.
Very Respectfully,
Josh
Ok I understand what you are looking for, I think the only thing you can do is use text recognition APIs. It will be a great deal of work, and you will have to figure out how to deal with multiple filetypes.
I also feel like there might be a copywrite liability to this application as it grabs text in any document. So maybe create a disclaimer. 
Hey @troy.roberge: The OP is being tripped up by CORS. If you read the thread you’ll see that this went from, “hey, how do I get the current selection in browser” (easily done) to, “hey, how do I get the selection in another window” (can’t be done, because security).
(The not so easy workaround would be to ensure that the PDFs being displayed are on the app’s domain, rather than s3. Though, if Bubble gave us access to CORS settings in “our” bucket [which doesn’t exist — its Bubble’s bucket] we could work around this, perhaps. I ran into this recently with some new stuff I’m doing with inline SVG’s… Others have run into it a long time ago. As for my fix, I just say, “hey, you don’t Reference a file here, you just drop in the SVG code you want to use, or save that in your db as text…”)
