I'm trying to create a very simple and light wysiwyg editor using designMode/execCommand, eg:
$(document).ready(function() {
wysiFrame.document.designMode = 'On';
});
<iframe name="wysiFrame" id="wysiFrame"></iframe>
When I enter text in the iframe it is not wrapped in any tags. When I hit return the new line is wrapped in a div, eg:
here's my bit of text
<div>and this is the text after hitting return</div>
If I add:
$('#wysiFrame').contents().find("body").append('<p>Select me and type</p>');
and then select the text and over type the tags are added (in Chrome at least) as expected, new paragraphs and line breaks.
I tried:
$('#wysiFrame').contents().find("body").append('<p></p>');
But that gave me:
My typed text
<p></p>
Is there a way to wrap entered text within paragraph tags? I have trawled online but have only been able to find reference to preventing line breaks in favour of paragraph tags.
All help, suggestions and ideas welcome.
Thanks in advance.
Managed to get something together that although not elegant may be useful to others looking for a no-fuss, simple (dirty!) solution. In my 'designMode = 'on' function I added:
$('#wysiFrame').contents().find("body").append('<p> </P>');
When you click in the iFrame the insertion point lands between the space and the closing paragraph tag, just a little clean up needed server-side. Tested in Chrome, Safari and Firefox, seems to work reliably in all.
Any other suggestions out there?
Related
I would like JS <script type="xx"> content to be colored nicely inside my HTML document.
Right now, when adding the type to a script tag, the element text becomes uniform white, as seen below.
Of course, the JS code is colored nicely within the HTML if removing the type attribute.
Is there some setting I can modify to make this work?
No setting to modify. This is a known issue. From the thread it looks like syntax highlighting was working at one point for script tags with the type attribute but was lost.
Hopefully it's fixed soon. I'm seeing the same thing on VSCode 1.13.1.
What command in webdriver should I use to make sure it clicks the specific text i.e Last Month
the code is
<div class="dt_padded_medium_div">
<a onclick="setLastMonth()" href="#">Last Month</a>
I tried xpath by using firepath but still doesnt work
it was
//*[#id='block-2']/div/div[3]/table/tbody/tr[1]/td[5]
I used
driver.findElement(By.xpath("//*[#id='block-2']/div/div[3]/table/tbody/tr[1]/td[5]")).click();
but still didnt work, am I missing something?
Update:
Got the Code working guys, thanks for the help!
If there is only one 'a' element in the page with this text, try this XPath:
//a[text()='Last Month']
If there are more than one element, please, post the full HTML tree else we're unable to write a xpath without know the tag path and ensure it will work
Are you sure your xPath is correct?
Install FirePath on Firefox and experiment with your xPath as on screenshot below.
Also, that does look like a long and brittle xPath. Look up xPath cheat sheets to learn how to make your xPath more robust.
In your case I would imagine something like:
//*[#id='block-2']/descendant::a[text()='Last Month']
(get the element with a particular ID, then search for an <a></a> in that element, no matter how deep, with a particular text)
In your question, you have used a "id" that is not shown in your code, where is #id='block-2'. It is possible for you to have used the wrong id. For us to help you, can you please provide the whole HTML code?
What I can suggest based on the information you have provided is:
Making sure the Xpath you have provided is unique, there is an add-on for Firefox called Firebug you can use. It will help you find out the xpath you are after fast and easy. What you need to do is basically:
download firefox and install it;
download firebug add-on and install it to firefox;
you will notice there is a small bug symbol to the top right of your tool bar, please enable it;
you will see a console pops out, click on inspection button and click on any web element you want to inspect and its html code will be highlighted in the console;
right click on the highlighted code and choose to copy its xpath to clipboard. This way you will never get your xpath wrong.
Here is a quick tutorial:
http://www.wikihow.com/Find-XPath-Using-Firebug
P.S. There are more than one way to locate a webelement, please consider using the following options as well:
Css selector
class name
id
This link will direct you to an awesome cheat cheet.
http://scraping.pro/res/xpath-cheat/xpath_css_dom_recipes.pdf
Hope it helps.
Please try to use below code to click on the text Last Month
driver.findElement(By.xpath(".//a[text()='Last Month']")).click();
Hope this helps.
You can use below code to click on the link containing the text 'Last Month'
driver.findElement(By.linkText("Last Month")).click();
First of all make sure that your xpath works correctly, try to use more specific xpath other than just td[5] or smthn like that, for example above could be like:
//div[#class='dt_padded_medium_div']/a[#href] - meaning, we need to find <div> element with specific parent and within it <a> element that has href property
There are a few possibilities.
If you're site doesn´t get rewritten to much you could just go for the link name via
driver.findElement(By.linkName("Last Month");
You could also go for any of the attributes if your site is subject of many rewrites like this and just put "href" and "#" or "onclick" and "setLastMonth()" as arguments when calling it.
static WebElement getLink(String Attribute, String Value /*String ItemText*/){
List<WebElement> Elements = driver.findElements(By.tagName("a"));
for(int Counter = 0, Counter < Elements.size(); Counter++){
if(Elements.get(Counter).getAttribute(Attribute).contains(Value) /* && Elements.get(Counter).getText().equals(ItemText){
return Elements.get(Counter);
}
}
return null;
}
If you remove the comments it will go completely sure and check for the Attributes and the displayed text.
I am automating a webpage using selenium.
My Problem is selenium is unable to type the text in hidden fields. I used
selenium.type("xpath of hidden field","some text");
But it is not working. It's not giving any error, but not typing anything into that hidden field.
Example: Typing text into Gmail's body field(in composing mail). this is the exact example of my issue
This is Rad Editor. So code is something like this(here the text is saving inside iframe-->html-->body)
<iframe id="iframe1">
<html>
<body> This is some text </body>
</html>
</iframe>
There's just no way you'll force Selenium to type into a hidden element.
Would this work? It uses Javascript's document.evaluate() to find the element by XPath and then types directly into the found element's value.
selenium.GetEval(
"var xpath = '//XPath/to/your/element';" +
"var text = 'some text to input into the element'" +
"var elem = window.document.evaluate(xpath, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null);" +
"elem.singleNodeValue.value = text;" );
If not, try to run it in FireBug and post the result (or error) here.
The next thing to try would be to try to make the element visible...
EDIT - the above won't work
You have like all the problems in one place :)
An iframe. You must select it before trying to interact with anything inside.
If the iframe loads anything from a different domain, then the Same origin policy for JavaScript kicks in. And since Selenium RC is written in pure JavaScript, it can't do anything. You can either switch to WebDriver which doesn't suffer from this, or try to reopen the browser on the internal address of the iframe. Might not work, though.
The body tag in the iframe is contenteditable which is a problem solved by WebDriver. Selenium RC should be able to type() into it just as well.
An invisible textarea. That's your last problem. If you really needed to write into it (there's the editable body), you you'll have to use JavaScript, because Selenium RC refuses to work with invisible elements.
As this is a RadEditor the text is going inside iframe-->html-->body (This is in my case. It may be different for different Editors)
So in order to write text, first we need to select the iframe. And then we have to enter the text. This can be done as
selenium.SelectFrame("xpath_of_iframe"); //Selecting the iframe
selenium.Type("//html/body","Thank you"); //Inserting the text
So now the code changes to
<iframe id="iframe1">
<html>
<body> Thank you </body>
</html>
</iframe>
Thank you.
I can't solve my problem, and I hope somebody knows how...
I have a component on my form TCppWebBrowser, and when I navigate to a URL, after the document was downloaded, in method OnDocumentComplete() , I'm trying to check and change html source of loaded document... before it being executed by browser.
I need that, because some websites have background sounds, and I want to parse html and remove tags or just remove text which contains sound files like *.wav , *.mid , *.swf, *.mp3 ... ect.
For example if html source have this line:
<NOEMBED><BGSOUND src="/images/ImagineCut.wav"></NOEMBED>
then, i change it to:
<NOEMBED><BGSOUND src="/images/ImagineCut."></NOEMBED>
or I can delete whole tag.
Using this way I want to mute webbrowser or even to stop playing sounds. Please take into consideration this method, because it will help me to avoid all kind of sounds after I edited html.. (before browser execute it)
That's what I tried to do:
void __fastcall TForm1::CppWebBrowser1DocumentComplete(TObject *Sender,
LPDISPATCH pDisp, Variant *URL)
{
IHTMLDocument2 *pHTMLDoc;
CppWebBrowser1->Document->QueryInterface(IID_IHTMLDocument2,(LPVOID*)&pHTMLDoc);
IHTMLElement *pElem;
pHTMLDoc->get_body(&pElem);
BSTR text;
pElem->get_innerHTML(&text);
text = Cleaning(text); //checking and changing html without souds
pElem->put_innerHTML(text);
pElem->Release();
pHTMLDoc->Release();
}
To do what you are asking, you would have to download the HTML file yourself from outside of the TCppWebBrowser component completely, alter the HTML as needed, and then push the new HTML into TCppWebBrowser using one of its IPersist... interfaces. Examples of doing that have been posted in the Borland/CodeGear/Embarcadero forums many times before.
is there a way to alter the rendered HTML page in webbrowser control? What i need is to alter the rendered HTML Page in my webbrowser control to highlight selected text.
What i did is use a webclient and use the webclient.Downloadstring() to get the source code of the page, Highlight specific text then write it again in webbrowser. problm is, images along with that page does not appear since they are rendered as relative path.
Is there a way to solve this problem? Is there a way to detect images in a webbrowser control?
Not sure why you need to change the HTML to lighlight text, why not use IHighlightRenderingServices?
To specify a base url when loading HTML string you need to use the document's IPersistMoniker interface and specify a url in your IMoniker implementation.
I suggest you do it a different way, download and replace the text using the webbrowser control, this way your links will work. All you do is replace whatever is in the Search TextBox with the following, say the search term is "hello", then you replace all occurances of hello with the following:
<font color="yellow">hello</font>
Of course, this HTML can be replaced with the SPAN tag (which is an inline version of the DIV tag, so your lines wont break using SPAN, but will using DIV). But in either case, both these tags have a style attribute, where you can use CSS to change its color or a zillion other properties that are CSS compatible, like follows:
<SPAN style="background-color: yellow;">hello</SPAN>
Of course, there are a zillion other ways to change color using HTML, feel free to search the web for more if you want.
Now, you can use the .Replace() function in dotnet to do this (replace the searched text), it's very easy. So, you can Get the Whole document as a string using .DocumentText, and once all occurances are replaced (using .Replace()), you can set it back to .DocumentText (so, you're using .DocumentText to get the original string, and setting .DocumentText with the replaced string). Of course, you probably don't want to do this to items inside the actual HTML, so you can just loop through all the elements on the page by doing a For Each loop over all elements like below:
For Each someElement as HTMLElement in WebBrowser1.Document.All
And each element will have a .InnerText/.InnerHTML and .OuterText/.OuterHTML that you can Get (read from) and Set (overwrite with replaced text).
Of course, for your needs, you'd probably just want to be replacing and overwriting the .InnerText and/or the .OuterText.
If you need more help, let me know. In either case, i'd like to know how it worked out for you anyway, or if there is anything more any of us can do to add value to your problem. Cheers.