I'm looking for a rich-text editor control that has some way of allowing users to copy-paste images into it, a la Google Mail. I guess I'm hoping there's some way to communicate the binary contents of an image on the clipboard to the browser (and perhaps store these contents in a hidden element somewhere that I can access). If you can't think of a rich-text editor with this functionality included - can anyone think of a way to accomplish this using JavaScript?
This only needs to be functional on IE5+, but any solutions that might work on IE are welcome.
Any help appreciated - let me know in comments if there's any part of this question which isn't clear.
Thanks,
Dom
What happens in Google mail, is that when you drag an image into a richtext area, it receives a dragdrop event with the URL of the image. If the image is online, you can have javascript capture this and insert an <img> tag. It won't work if the image is on the users file-system though (For security reasons).
This will work in IE if Chrome Frame is installed: http://strd6.com/2011/09/html5-javascript-pasting-image-data-in-chrome/
Related
I'm making a forum-like website, and really want to implement a WYSIWYG editor if possible because my targeted users are foreign to technical work. Doing something like image upload/display/resize using markups will be too hard for them I suppose.
But after reading here on stackoverflow and trying it out myself, I suppose the WYSIWYG editor I'm using (WYSIHTML5) won't be safe enough for public use.
So come my questions:
Is there any "WYSIWYG editor"-like library that doesn't actually use html markup? Something like stackoverflow's editor (with toolbar and a real time preview box) is acceptable actually.
If there's nothing like that, is there anyway you can think of to implement WYSIWYG editor that can prevent user from doing harm to the server and/or other users? What can I do to ensure that?
If you like StackOverflow's editor and think it will fit your needs, it's called PageDown. You can find the code here.
I'm working on an ASP.NET MVC project which uses the MarkdownDeep Editor to add a rich editor on top of a basic markdown input textbox (very similar to the Stackoverflow editor window).
Generally it works great. However, in certain scenarios, I would like to disable the preview window. This is automatically generated below the textarea by MDD. Can this be disabled?
Just to be clear, I know I can use CSS to hide the preview. But on some devices it's slow and makes typing painful. I want to entirely turn off that feature. I don't see anything in the docs other than how to customize the preview.
Any ideas?
In the docs it specifically mentions that it is recommended that you have the div preview already in your document because it will be created if it isn't found and consequently, could could a visible page refresh if any re-layout has to occur.
Note: the associated divs are all optional and if missing, the plugin will create them. However... you might experience the page jumping around during load if you do this. ie: it's recommended to explicitly include them.
Thus from the sounds of this, and that there doesn't appear to be any option to turn it off in the API page I would say no, it's not possible.
I am a little confused here: if you don't want the preview, use a regular text area instead of mdd_editor... So, under the scenarios where you don't need the previews, instantiate a plain vanilla editor. What am I missing here?
I know this is old, but I was looking for something else on mdd. I recently had this same requirement.
Just comment out the code
// Update the DOM
if (this.m_divHtml)
this.m_divHtml.innerHTML=output;
in MarkdownDeepEditor.js
I wanna show some text (and images) in browser but this text shouldn't be able to select in page preview or page source :
At first i tried to use canvas, but managing text and also images in canvas is not easy and for this case i can't use canvas.
I tried to use image but in this case, image is too slow to load.
I used ROT13 encryption in Aptana studio, but ROT13 just encrypt page source with JS and when you click on 'inspect element' in chrome or opera you can see decrypt text and html yet.
Question: Is there any way in jquery or anything else?
No, whatever you display as text in webpage can be found by digging into the source of the webpage (including js). What would this be useful for btw.?
Edit: This looks useful but ends up using canvas or flash I believe. Still might be tuned to be fairly fast and therefor useful:
http://eric-blue.com/2010/01/03/how-to-create-your-own-personal-document-viewer-like-scribd-or-google-books/
You most likely won't find a way to do this easily, as when the browser downloads the page, in order to show the text to the user it has to be decoded or decrypted. So no matter what, if the user can see it, they can copy it. If all you want is to block selection in the browser, this answer should help
No, if you want to place something on the page a browser need to know what you want to place on the page. And everything what was sent to the browser is readable for a user. So you cannot do this.
The answer is very simple: If you don't want to publish something don't place it on the internet.
yes, this my logic check out
make you string in ascii code and write on document
check below link and find example may you help
Link W3School
I guess no one could do that.
Just use some image instead, old-style, but useful.
Background: I am a beginner javascript developer who is trying to understand and learn the language better.
There are many websites that allow you to "clip" images and text from webpages for saving. I've noticed most of them require you to drag a snippet of javascript code to your browser toolbar, which when clicked performs the clipping of images & text. Some services which provide this are : Clipboard, Zootool, Evernote, Snip.it etc.
How does these clipping tools work? I have tried to save the javascript and understand it, but it doesn't make much sense. How are the DOM elements(text, images) being accessed? How is sent back to the service for storing? How does the tool "know" which user is logged in?
How do these clipping tools work?
The tools you mention are essentially bookmarklets.
Check this and this.
How are the DOM elements(text, images) being accessed?
The DOM elements are accessed just as you would in a normal webpage document.getElementbyId("ID") or $('something') using jquery. Its essential to understand that the bookmarklets simply run some javascript code on the webpage, just as if it was part of the page's "code".
How does the tool "know" which user is logged in?
Through browser cookies.
Hope its clear.
I'm not sure of the details of all of your questions, but I'm pretty sure that the tools determine the user the same way every other site does – cookies – i.e. users have to be 'logged-in' to use these bookmarklets.
I have a website where lots of people copy images off it, which is fine. What I do want to do, however, is help them embed it on the target website they are going to.
Ideally this would take the form where when a user right clicks the image a context menu will appear giving them easy options to embed or share the image.
What is the best way to do this?
P.s. I don't care about them hotlinking, or saving the images at all, all I want to do is provide the user with an easier way to share the images!
Don't send the image to their browser.
No. You can prevent the common user from bothering, but the fact is the URL is sent to the browser to download. So at the very least I could view the source and figure it out.
If you really want to try to annoy the user, though, you can attach an oncontextmenu event which will capture the right-click in some browsers.
edit:
In response to your comment..
Since you're using jQuery, you can use this plugin to detect right clicks. It has been tested on most browsers.
You can then use something like SimpleModal to display the modal box you want to show the user..
$('img').rightClick(function (e) {
$.modal(...);
});
You can actually render HTML as embedded mime data in all major browsers except for IE:
http://jimbojw.com/wiki/index.php?title=Data_URIs_and_Inline_Images
Another weird, but workable solution is to convert the image to CSS:
http://elliottback.com/wp/convert-image-to-css/
Neither is really that great a solution, but it highlights the fact that you need to be willing to lose an image by just putting on the web.
Even if you use a plug-in, people can just do a screen capture.