I know I did ask this question earlier but here is my problem in details:
if I copy the text from textarea1 to textarea2 using a JavaScript program, it works fine
if I attach the teaxtarea1 with a WYSIWYG editor then it refuses to work. And I am using openWYSIWYG.
Why can't I can copy the plain text from textarea1 when it is attached to a WYSIWYG?
The code I am using for copying it without a WYSIWYG is:
function postChange() {
document.forms["form1"].textarea2.value = document.forms["form1"].textarea1.value;
}
I don't know this "WYSIWYG", although I think I know what you mean. Could it be that when you apply it to a textarea, said textarea's value no longer holds the text? The text is probably in some property of the WYSIWYG object.
Or something.
Can you post a link to the library?
And look what I found in their "Save" code:
WYSIWYG.updateTextArea(n);
Try with that and then get the value of the textarea.
That's because what you see isn't a textarea but an iframe with a full HTML page inside.
There is a hidden textarea, but it doesn't seem to be updated in real time.
The method given by Rew should work (for Firefox, that's contentDocument) but it returns HTML code (generated by the widget), not plain text.
You might want to use body.plainText (instead of body.innerHTML) on Firefox, not sure for other browsers.
Alternatively, check your widget's API to see if they don't offer such plain text access.
Related
When a user selects a part of the page with styled texts and images, it is possible to copy all that content (with images and styles) and paste it to MS Word or to an e-mail client by clicking "Copy" in the context menu.
How is it possible to achieve the same result with javascript?
So far, I have found solutions to copy plain text only or by using the depreciated document.execCommand("copy") command.
Is there a solution that works for all modern browsers, including Firefox?
If such a function cannot be implemented for security reasons or whatever, could someone please explain why exactly? Because users copy content all the time, why it cannot be done with Javascript?
Edit: I'm trying to show a custom popup with a Copy button when user selects some content on the page. That button should be able to copy all the styling of the selected content, not just plain text. Just like the Copy button in the browser context menu or Ctrl+C
As far as I understand, you wanna magically transform HTML, CSS and JavaScript to a text format. This is technically not possible.
Yes, it is possible. I suggest looking at Navigator.clipboard API: https://developer.mozilla.org/en-US/docs/Web/API/Navigator/clipboard
You can get the selected HTML Elements, do all kinds of transformation on data and then paste the data in to the clipboard. Multiple formats also supported, such as images, HTML and simple text. Note that if you are going to copy HTML and/or images pasting will not work in simple text editors, only in editors like Word that supports advanced pasting formats.
I am trying to build a collaborative code editor using node.js. I am able to make contents inside a textarea collaborative (multiple people can edit it simultaneously).
How to turn an existing textarea into a code editor using CodeMirror without replacing the textarea? (if I directly try to make the text area into editor using code mirror it will either replace it or create an editor below it without replacing it)
How do I make the existing text area into code editor?
Actually, this should be somewhat simple. If one builds a synchronous editor, it should be event-based, isn't it in your case?
So you should be able to do 2 things: detect an edit (and send it to others) and programmatically change the content of the edit area once you recieve a message ("another guy has edited"). And that's not difficult to do:
to detect editing, use the change/changes events
to set changes, use content manipulation methods like setValue or replaceRange
I'm trying to copy text to the OS clipboard in my dart web app with the push of a button, and I'm not finding a clean way of doing so.
My current solution is to create a textArea element, add the text I'm intending to copy to the element, calling document.execCommand("copy") on said element, then deleting the textArea element. This works in the browsers I am intending to support; however, I also need to set the MIME type for this copied text, which does not appear to be possible with my current implementation.
So, my question for you all is: using my current solution, can I also set the MIME type for the text being copied? OR is there a better approach I could take using a different dart api?
Javascript (even dart converted to javascript) cannot get to the OS clipboard. Only Flash seems to have that ability.
I am using html 5 rich text editing via the jWysiwyg library. I want to be able to surround the selected part of the document with custom HTML, much like how one would highlight text on the document and mark it as bold. There is very limited information on the subject, and I'm not even sure if it's possible. I've also tried to get the raw html selection of the page, but so far I've only been able to get a plain-text version of whatever is highlighted on the screen. Any recommendations would be much appreciated.
After further research, I discovered that the getInternalRange() function in jWysiwyg effectively returns the object generated by document.createRange(). After reviewing the documentation, I was able to locate the surroundContents() method, which meets my needs. An example is provided below. I'm using jQuery, so I will also demonstrate how to use jQuery to generate the html element for you:
var range = document.createRange();
range.surroundContents($('<span style="background-color: red;" />').get(0));
This particular example highlights the selected text in red, however this example can be easily generalized to allow a developer to surround the selection with any number of html elements.
I want to develop a custom javascript html editor. My starting point was:
http://hypertextarea.sourceforge.net/
I understood how the mechanism works but the problem is that I cannot find the point where if I focus the iframe I have the cursor displayed.
Then if I press a key I see the letter entered there. Can you please explain me how this javascript shows the editor cursor and how it write in the iframe the characters that I write?
All javascript used by this editor is at
http://hypertextarea.sourceforge.net/javascript/HyperTextArea.js
It is handled by the function enableDesignMode (line 755), which tries to turn on designMode for the <iframe>.
In other words, this is a browser feature and you can make an HTML page editable with nothing more than a single line of JS (or a single HTML attribute), but the library provides other niceties like the ability to format text and insert tables.
Depending on exactly what you want: onKeyPress and onFocus