I've been using a rteEditor very sucefully until now.
The problem is in this line of code:
document.getElementById(rteName).contentWindow.document.execCommand('insertHTML', false, html);
I'm passing an ABSOLUTE path to the html var such as ("http://www.url.com/file.html").
But when it execute this insert command the output is ("../file.html");
Its possible to use a jQuery command instead?
Any Suggestions?
Have you tried using 'insertImage' instead of 'insertHTML'?
Edit:
'insertImage' just takes the url of the image and creates an img tag based on that.
You can get the image after inserting it with jQuery like this:
var img = $("img[src='imgUrl']");
with 'imgUrl' being the url of the image you add, and then add the needed attributes to that.
An example without using jQuery is here at line 123.
In my experience, working with native rich text editors (aka div's with contentEditable="true" or iframes with designMode set to on) is very difficult. The API is inconsistent across browsers and their behavior is often unexpected and buggy. Because of this I tend to use document.execCommand() as little as possible. Instead I tend to reply on direct DOM manipulation.
With that in mind, here's how I'd try to solve the problem you described:
Create the an in-memory image element and set the appropriate url.
Find the DOM node that contains user's cursor.
Insert the in-memory image element into the DOM node found in the previous step.
The code needed to implement the second step is somewhat tricky and varies hugely across browsers. I'll try to post a working example in the next day or two. I hope this helps in the mean time.
As far as I understand, and have experienced it myself, this is 1. inherent to the browser's HTML editing engine and 2. it happens only when the image that you are trying to insert, and the address you are running the HTML editor from are on the same domain.
As a solution, if your server/provider allows this, you could set up a second subdomain that points to www, for example
www2.example.com
and link to the image as
http://www2.example.com
this should have the result that the absolute link remains untouched.
upon saving the HTML, you just have to replace all occurrences of www2.example.com to www.example.com.
Another, maybe simpler, way would be to run the WYSIWYG editor on www2.example.com and inserting the proper absolute URLs.
I think because of security reasons, you can not specify complete url such as www.example.com.
I believe that you should be able to use jQuery.
You will probably want to use something along the lines of
$(rteName).find('body').html('<img src="http://www.example.com/" alt="...">
but probably with some changes to the selector(s).
Related
Sorry for the vague question name - didn't know how to phrase it.
I have built a PHP engine to parse web pages and extract phone numbers, addresses etc.
This is going to be used by clients to populate an address book by simply entering a new contacts web address.
The problem I am having is useability:
At the moment the script just adds each item (landline number, fax etc) to a different list box and the user picks the correct one - from a useability standpoint this is hard work (how do you know which is the correct contact number without looking at the site)
so my question (finally!)
How would achieve the functionality of
http://bartaz.github.io/sandbox.js/jquery.highlight.html
On someone else website (I have no problem writing this functionality).
FOR CLARITY**
I want to show someone elses site (their contact page for example) on my site BUT I want to highlight items I have found (so for example add a tag around a phone number my php script has found)
I am aware that to display a website not on your domain an iFrame would be used - but as I need to alter the page content this is useless.
I also contemplated writing a bookmarklet that could be run on that page - but that means re-writing my parsing engine in javascript and exposing some of my tricks to make it accurate.
So I am left with pulling the page by cURL and then trying to match up javascript files, css files etc. that have relative URLs
Does anyone know how best to achieve this - and any pitfalls that might befall me.
I have tried using simple html dom parser - but it is tricky to get consistency and I also dont know how having two sets of tags, body tags etc. would affect sites.
If anyone has managed this before and could point me to the tools / general methods they used I would be eternally grateful!
PLEASE NOTE - I am very proficient with google and stack-overflow and have looked there first!
The ideal HTML solution
The easiest way to work around the relative paths for an arbitrary site would be to use the base href tag to specify the default relative location (just use the url up to the filename, such as <base href="http://www.example.com/path/to/" /> for the URL http://www.example.com/path/to/page. This should go at the top of the head block.
Then you can alter the site simply by finding the relative parts and wrapping them in your own tag, such as a span. For the formatting of these tags, the easiest way would be to add a style attribute, but you could also try to insert a <style> tag in the <head>.
Of course, you'll also need to account for badly made webpages without <html>, <head> or <body> tags. You could either wrap the source in a new set of these tags, or just put in your base and style tags, hoping that the browser will work out what to do.
You probably also want to make this interactive, so you should also wrap them with some kind of link, and ideally you'll insert some javascript to handle their actions by ajax. You should also insert your own header at the top of the page, probably floating at the top, so that they know they're using your tool. Just keep in mind that some advanced pages might then conflict with your alterations (though for those cases you could have a link saying 'is this page not displaying correctly?' to take the user to your original basic listbox page as a backup).
The more robust solution
Clearly there are a lot of potential problems with the above, even though it is ideal. If you want to ensure robustness and avoid any problems with custom javascript and css on the page you're trying to alter, you could instead use a similar algorithm to that used in text based browsers such as lynx to reformat the page consistently. Then you can apply your algorithm to highlight the relevant parts of the page, and you can apply your own formatting as well without risk of it not displaying correctly. This way you can frame it really well and maintain your interface.
The problem with this is that you lose the actual look of the original page, but you should keep the context around the numbers and addresses which is the important thing. You would also then be able to use some dynamic javascript to take the user to each number and address consecutively to improve the user experience. Basically, this is rigorous and gives you complete control over the user experience, but you lose the original look of the website which may or may not confuse your users.
Personally, I'd go for the second option, but I'm not sure if anyone's created such a parser before. If not, the simplest thing you could do would be to strip the tags to get it as plain text. The next simplest would be to convert it into some simple text markup format like markdown, then convert it back into html. That way, you'd keep some basic layout such as headings, italicised and bold text, etc.
You definitely don't want to have nested body tags. It might work, but it'll probably mess up your formatting and be inconsistent across browsers.
Here's a resource I found after a quick Google search:
https://github.com/nickcernis/html-to-markdown
There are other html to markdown scripts, but this was the more robust from the few I found. I'm still not sure though whether it can handle badly formatted pages or ones with advanced formatting, try it out yourself.
There are quite a few markdown to html converters though, in fact you could probably make a custom converter yourself quite easily to accommodate your personal needs.
When analyzing a webpage, I usually open these js files one after another and then read the source code to determine which file added a certain portion of html in the final rendered page. Is there an easy way / tool to solve this problem?
No, there is not a tool to do such a thing. Understanding the code yourself or searching for specific key phrases in the HTML you're trying to source (such as a class name or tag name or piece of text) is the typical method.
It could work to grep for the common ways that the DOM is modified (.innerHTML property, .appendChild(), .insertBefore, etc... if it's plain javascript) or similar methods in whatever library is being used.
Partially, you may use Firebug in Mozilla and, viewing the HTML tab, right click some tags and tick "break on child addition/removal". And then reload the page. Javascript execution will pause at any changing of DOM inside the chosen element.
I'm using TinyMCE plug in to create a text editor. The thing is, I want my users to control the positioning, weight, and list/no list of their document, but not font, font-color, or font-size. I'm looking for a TinyMCE property which will stop the program from adding those tags to the css. Also, I need to implement this on the server side. I'm using django, so is there any function that will do that as well?
One may specify exactly which HTML tags and related attributes are allowed using 'valid_elements' configuration setting:
http://www.tinymce.com/wiki.php/Configuration:valid_elements
I believe that as long as you don't provide the buttons for font-related stuff (using the theme_advanced_buttons_1/2/3 parameters), and also don't give them the HTML button, the users won't be able to change fonts/color/etc.
But if they were to paste in some text created elsewhere, which happens to be HTML, they might still do it. To get rid of that, you'd probably have to filter what the server receives - I have no insight into any ready-made way to do that.
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.
I'm trying to write a Chrome extension that as a part of what it's doing needs to add an image to the currently displayed html. I guess I need to use document.createElement and then insert it somewhere, but I'm not sure about two things:
The image comes as part of the extension, i.e. there's no direct link to it anywhere, so simply adding an img tag won't work. Unless I'm missing something.
Not Chrome-related at all: what is the best way to add the img tag to a specific location if the html elements do NOT have any id's? I can find the place I want to add the img to using regexps, and can rewrite the whole html if needed, but maybe there's a more subtle way I'm missing.
You can get image url from your extension folder by running:
var imgUrl = chrome.extension.getURL("image.png");
(it would look like this: chrome-extension://<extension_id>/image.png)
If you're using manifest-version: 2 you'll need to whitelist any resource in your extension that you inject into other documents. See this question for more info.
As to your second question - you need to provide more details. Does it have class? Do you know inside what tag is it (li, div)? You probably would be better off using jQuery for this - it has lots of pretty advanced selectors. I don't know what search criteria are you trying to use exactly so I can't suggest a concrete solution.