I am in the process of creating a chrome extension that allows you to click on context menu options when you are in an editable element. Clicking a context menu option automatically places some text where the cursor is.
The problem I am having is that the process for placing the text differs based on where the text is being placed. For example, If the text is being placed in a textarea, (like the one I am typing in now), the process is different than if I need to put the text in, say, a YouTube comment box, which is its own custom div and does not support the operations that I would use when editing the contents of a normal textarea
In my search for a flexible solution that would work the same for all elements that are in the editable category of the chrome.contextMenus API, I thought of the following Idea:
I should be able to do what I want if I store my variable in the system clipboard with document.execCommand('copy') and then paste it in wherever the cursor is with document.execCommand('paste')
The downside here is that the user would loose whatever they used to have in their clipboard.
I originally planned on just pasting the original contents into my own textarea, then restoring it once I am done with the clipboard, but there are 2 problems with this approach:
The user would loose whatever formatting they had originally
This would only work for text, not images.
Is there a way that I can save the contents of the clipboard that would allow me to copy them back to the clipboard at later time without the user noticing any modification to the content?
If I have any glaring misconceptions, please correct me as I am new to
JS, the DOM and HTML
Related
I'm building a simple WYSIWYG editor in React and I've implemented all of the different button functionalities except this last one: selecting text and turning it into a hyperlink.
I need to preface this with: I'm not interested in answers like "just use React-Quill" or "just use react-draft-wysiwyg".
So the type of feature I'm trying to implement can be seen on https://quilljs.com/ - scroll down until you see the demo editor, then select some text, click the "link" button, and a secondary window will pop up containing a text input that allows you to enter a URL. Click SAVE, and the originally selected text will turn into a hyperlink.
I'm approaching this like so:
Using document.execCommand('createLink', false, myURL) to handle the actual hyperlink creation
When my url entry window pops up, I save the currently selected range by saving off the result of document.getSelection().getRangeAt(0)
When the SAVE button is clicked, I restore the range by grabbing the document selection again, clearing all ranges with sel.removeAllRanges() and then calling sel.addRange(mySavedRange)
Note: all of this range saving and restoring is necessary, because when the user clicks on the text input on the pop-up window to enter a url, the document selection clears.
So here's what I'm seeing happen:
Instead of the selected text turning into a hyperlink (in this case I was selecting the word 'this',) the url is just thrown at the end of the line of text.
For reference, after trying my own code, I decided to try the functions implemented here: https://gist.github.com/dantaex/543e721be845c18d2f92652c0ebe06aa
I still see the same issue.
Any thoughts?
An extra note: I'm building an electron app, so I'm not as concerned with "cross-browser" compatibility. If it works in Chrome, then great!
My solution: the issue was that the contenteditable div needed to be focused.
So I changed my approach:
Upon clicking "Save", instead of using the document.execCommand right away, I would update a global state field, like enteredHyperlinkText (I'm using Reactn)
I added a ref to my editor with useRef and an effect to my editor with useEffect (I'm using React Hooks) the effect would only re-run when enteredHyperlinkText updates, and it will handle focusing on the editor, restoring the selection, and calling document.execCommand.
Note: focus the contenteditable div before restoring the selection.
I have a small templating webapp, where the authors can add placeholders within their richttext editor. To prevent errors I want to provide a list of valid placeholders which then can be copied and pasted. My problem here is the way I can restrict what get's copied.
I tried two approaches, both failed.
First of all how the list of placeholders looks like:
<ul class="placeholders">
<li>${address.name}</li>
<li>${address.street}</li>
<li>${address.city}</li>
<li>${address.zip}</li>
</ul>
Copy to clipboard with JS:
This doesn't work as the clipboard cannot be accessed because of security concerns. I tried the ZeroClipboard but it's documentation is not clear for me and even the examples I found here at SO weren't helpful. I want to copy the content of the <li> if the user clicks on it. I tried to set instantiate with new ZeroClipboard(jQuery('ul.placeholders li'). But this didn't work at all. In Firefox as soon as I hover over an li the loading wheel appears.
Just select the whole text with a range object:
This basically works with the selection, but when I paste it in the Rich Text Editor, Firefox und IE also paste the li tag. Again as I don't have access to the clipboard I can't control, what gets copied. And as it is a RTE, I don't have much control over how it gets pasted.
Has anyone an idea on how I could make either of the approaches work?
Im using zclip as a way of allowing a user to copy data to their clipboard.
One way Im using this is to return a HTML formatted table of data. When pasting this into an email though, it pastes the HTML code. However if I copy the data from a webpage and paste that into an email, it inserts rendered HTML.
So how is this difference determined? Is there something I can set / add in the data being copied that will tell clipboard to treat it like a copy from a web page rather than plain text?
The end goal is to allow a user to click a button and then be able to paste some nicely formatted HTML into an email.
Found out the reason for this...
Clipboard contains a heap of different possible formats. So when you copy from a webpage for instance, you actually get a plain text version, a rich text version and the html version (maybe more). When you then paste, the program you're pasting into decided which is the most applicable format.
zClip only fills in the plain text version of the clipboard.
I'm trying for two days now several JavaScript lightweight Rich Text Editors (rte) such as nicEdit, mooEditable, MooRTE (the two last ones were considered because they use the mootools framework which I'm using for this project).
My problem is that with all of them, when I copy a pre-formated text from a web page (with words in bold, links etc...) and then paste it into the editor, it appears already formated.
This could be nice but that's a security problem because if I copy/paste a whole web page it will render the whole web page in the editor.
I just want my users to be able to do some basic formatting with the editor such as putting some text in bold, italic, add a link and indent their paragraphs.
An alternative could be showdown (which - I would bet - is used by stackoverflow), because this type of editors (with a preview box) don't suffer from the aforementioned issue (when you paste something in the textarea, it is unformatted text).
However, I'm not sure this would be appropriated to my case because the editor would be used to write long articles (much longer than most of the stackoverflow posts). In that case I think it would be better to have a proper editor that renders things instantly (I mean right in the textarea, not in a preview box). And a real WYSIWYG editor is more enticing and easy to use, in my opinion.
Is there a easy way to modify a RTE so that when I paste some text it is rendered unformatted?
Or do you think I should use the sort of solution that stackoverflow uses? (showdown or similar) Or do you know a RTE that doesn't have the copy-paste issue that I mentioned?
Note that I didn't try CKeditor, FCKEditor and TinyMCE because they are far too complex(heavy) and the one from YUI looks good but needs the whole library to work.
Thanks,
FuzzyTern
You are copying from a rich text source and pasting into a rich text destination. By default you will get rich text in the destination. The only way around this is to capture the paste event somehow, redirect the paste operation into a plain text field, then copy the unformatted text out of the plain text field into your rich text destination.
Use the onPaste handler to capture
paste events (doesn't work in
Firefox or Opera)
Use a hidden field to paste the
selected text into.
Insert the value of the hidden field
into the rich destination at the
cursor location.
Not sure where the profit comes from, but there you go.
I am looking for something like like FCKEditor that allows users to follow links by left clicking them.
For example, the markdown editor in StackOverflow does not allow you to click the links you add as you are entering data into the editor. I would like to render a text area pre-populated with some links to lab results that the user can choose to review while making their comments.
both tinyMCE and fck editor will highlight the links with blue color and if you ctrl+click on them, will open in a new tab/window (depends of you browser configuration)
Most HTML richtext don't do anything to the link (with the exception that you can place the cursor in them with a single left click, in order to edit their text) that would prevent you from, for instance, right-clicking to open the link, copy it, or whatever your browser allows.
TinyMCE allows you to preview within the same page and then click on any links with the click of a button/icon. I'm thinking there must be a way of triggering this outside of the TinyMCE and possibly having it populate another field/area. (You probably could also grab the value of the textarea and put that somewhere else on the page.)
Not sure if this is what you are looking for.
Or you could try a preview mode, just like StackOverflow. See How can I enable live preview for FCKeditor in an ASP.Net site?