How can I move the selection in dijit editor? - dojo

I have a problem with dijit editor of dojo:
I used execCommand to insert html content at the cursor in editor like :
var ed = dijit.byId('myEditor');
var myDiv = "<div id='myDiv'> This is content of div </div>"
ed.focus();
ed.execCommand("inserthtml", myDiv);
myDiv is inserted successfully into the editor, but when I type other content in the editor, that content is within myDiv. So could you tell me how can I move the selection to be after that div ?
Thank you for help !

If you mean you want to place cursor after your inserted div , then try:
var ed = dijit.byId('myEditor');
var myDiv = " This is content of div "
ed.focus();
ed.execCommand("inserthtml", myDiv);
ed.execCommand("inserthtml", "<br />"); //add a break tag after your new div
ed.placeCursorAtEnd(); // places cursor at the end
Did you mean something like this

Related

how remove tag html when show text(froala editor)

iam use editor froala when insert text then show text iam see tag html in text
plese see text
<B><p class="fr-tag">test
testttt good<br></p></B>
iam use this code for show and remove tag
<dd>
#{
#Html.DisplayFor(model => model.FTxtnews)
}
</dd>
var val = $('textarea').val();
val = val.replace("</p><p class="fr-tag">", '<p class="clear">');
edit:
iam sloved this problem with use #Html.Raw
try assigning your HTML string to an element and get text of it by removing all child elements like this,
var dummyString = '<B><p class="fr-tag">test testttt good<br></p></B>';
$('#dummyDiv').html(dummyString);
var val = $("#dummyDiv")
.clone() //clone the element
.children() //select all the children
.remove() //remove all the children
.end() //again go back to selected element
.text();
Have a DIV in your page (possibly hide it) with id 'dummyDiv'.
Hope it works. Thank you.

Unable to drag and drop element from 1 div to another div element

I have been trying to drag an element from one div (below)
<article class="media-gallery-item mg-html5">
<div class="mg-thumbnail" draggable="true" data-popcorn-plugin-type="sequencer" data-butter-draggable-type="plugin" data-butter-popcorn-options="{"source":"some_url","thumbnail":"some_url","start":0,"end":10,"from":0,"title":"bdgxkvtbs1.mp4","duration":2.83,"hidden":false,"asset_id":"1457","asset_width":"1280","asset_height":"720","asset_name":"video1.MOV","soundeffects":0}" >
<img src="some_url">
into another div
<div class="butter-track" data-butter-track-id="1"></div>
for dropping onto the element we need can also use pixel values.
I have tried the below code but it didn't drag the element into the div. I could even not see it dragging the element at run time.
WebElement src = driver.findElementBy(By.xpath(".//div[#class='mg-thumbnail']"));
WebElement dest = driver.findElementBy(By.xpath(".//div[#class='butter-track']"));
Actions act = new Action();
act.clickAndHold(src).moveByoffset(src, 0,300).release().build().perform();
I also tried using:
act.clickAndHold(src).dragAndDrop(src, dest).build().perform();
But none dropped the element. (i also could not see the dragging of the element at runtime)
NOTE- the code works for drag and drop as i used earlier but here I'm dragging the element from 1 div to another div so this might be creating the issue.
#pranky301 : Here is the Slight modification in you code.
Please try this and let me know what happens
WebElement src = driver.findElementBy(By.xpath(".//div[#class='mg-thumbnail']"));
WebElement dest = driver.findElementBy(By.xpath(".//div[#class='butter-track']"));
Actions builder = new Actions(driver);
Action drag = builder.clickAndHold(Src).moveToElement(dest).release(dest).build( );
drag.perform( );
These two methods have previously worked for me when dragging and dropping items from one element to another:
WebElement src = driver.findElement(...);
WebElement dest = driver.findElement(...);
new Actions(driver).dragAndDrop(src, dest).build().perform();
or by coordinates:
new Actions(driver).dragAndDropBy(src, "xOffset", "yOffset").build().perform();

Visual Basic - Change textarea content

I want to change textarea from omeagle.com -> text cheat
The textarea has this code in HTML :
<textarea class="chatmsg " cols="80" rows="3"></textarea>
In visual basic I program my webbrowser1 to navigate to this page. What do I need to do to change the text inside the textarea?
I've already tried this:
WebBrowser1.Document.All.Item("chatmsg").InnerText = "mycontent"
WebBrowser1.Document.All("chatmsg_area").InnerText = "this works"
WebBrowser1.Document.All("chatmsg_body").InnerText = "this works"
More ....
You can not get an element by class name. You can loop through all of the elements and check for a class name though.
Set NodeList = WebBrowser1.Document.getElementsByTagName("*")
For Each Elem in NodeList
If Elem.GetAttribute("class") = "chatmsg " Then
Elem.InnerText = "mycontent"
End If
Next
Give your textarea an id, then access it by its id.
<textarea id="text1"></textarea>
....
WebBrowser1.Document.All("text1").innerText = "New text"

Alternative to innerHTML for IE

I create HTML documents that include proprietary tags for links that get transformed into standard HTML when they go through our publishing system. For example:
<LinkTag contents="Link Text" answer_id="ID" title="Tooltip"></LinkTag>
When I'm authoring and reviewing these documents, I need to be able to test these links in a browser, before they get published. I wrote the following JavaScript to read the attributes and write them into an <a> tag:
var LinkCount = document.getElementsByTagName('LinkTag').length;
for (i=0; i<LinkCount; i++) {
var LinkText = document.getElementsByTagName('LinkTag')[i].getAttribute('contents');
var articleID = document.getElementsByTagName('LinkTag')[i].getAttribute('answer_id');
var articleTitle = document.getElementsByTagName('LinkTag')[i].getAttribute('title');
document.getElementsByTagName('LinkTag')[i].innerHTML = '' + LinkText + '';
}
This works great in Firefox, but not in IE. I've read about the innerHTML issue with IE and imagine that's the problem here, but I haven't been able to figure a way around it. I thought perhaps jQuery might be the way to go, but I'm not that well versed in it.
This would be a huge productivity boost if I could get this working in IE. Any ideas would be greatly appreciated.
innerHTML only works for things INSIDE of the open/close tags. So for instance if your LinkTag[i] is an <a> element, then putting innerHTML="<a .... > </a> would put that literally between the <a tag=LinkTag> and </a>.
You would need to put that in a DIV. Perhaps use your code to draw from links, then place the corresponding HTML code into a div.
var LinkCount = document.getElementsByTagName('LinkTag').length;
for (i=0; i<LinkCount; i++) {
var LinkText = document.getElementsByTagName('LinkTag')[i].getAttribute('contents');
var articleID = document.getElementsByTagName('LinkTag')[i].getAttribute('answer_id');
var articleTitle = document.getElementsByTagName('LinkTag')[i].getAttribute('title');
document.getElementsById('MyDisplayDiv')[i].innerHTML = '' + LinkText + '';
This should produce your HTML results within a div. You could also simply append the other LinkTag elements to a single DIV to produce a sort of "Preview of Website" within the div.
document.getElementsById('MyDisplayDiv').innerHTML += '' + LinkText + '';
Note the +=. Should append your HTML fabrication to the DIV with ID "MyDisplayDiv". Your list of LinkTag elements would be converted into a list of HTML elements within the div.
DOM functions might be considered more "clean" (and faster) than simply replacing the innerHTML in cases like this. Something like this may work better for you:
// where el is the element you want to wrap with <a link.
newel = document.createElement('a')
el.parentNode.insertBefore(newel,prop);
el = prop.parentNode.removeChild(prop);
newel.appendChild(prop);
newel.setAttribute('href','urlhere');
Similar code worked fine for me in Firebug, it should wrap the element with <a> ... </a>.
I wrote a script I have on my blog which you can find here: http://blog.funelr.com/?p=61 anyways take it a look it automatically fixes ie innerHTML errors in ie8 and ie9 by hijacking ie's innerHTML property which is "read-only" for table elements and replacing it with my own.
I have this xmlObject:
<c:value i:type="b:AccessRights">ReadAccess WriteAccess AppendAccess AppendToAccess CreateAccess DeleteAccess ShareAccess AssignAccess</c:value>
I find value use this: responseXML.getElementsByTagNameNS("http://schemas.datacontract.org/2004/07/System.Collections.Generic",'value')[0].firstChild.data
This one is the best : elm.insertAdjacentHTML( 'beforeend', str );
In case your element size is very small :elm.innerHTML += str;

Get HTML element ID that added later by Javascript

how can I get IDs of a html elements that added to page later by using javascript? JS changed the HTML contains after it's rendered thus selenium can't get the "just added" html elements.
Thank you.
get the element by Id -
var element = document.getElementById(StringId);
insert new content -
element.innerHTML = newHTMLText;
append new content -
element.innerHTML += newHTMLText;
.