In my app there is an html file showed in a webview. I have a note functionality where when user selects text, it is highlighted and an image is added as suffix. This note is then saved as an html file.
So for this functionality, I have written a java script function.
function highlightsText()
{
var range = window.getSelection().getRangeAt(0);
var selectionContents = range.extractContents();
var newDate = new Date;
var randomnumber= newDate.getTime();
var div;
var imageTag = document.createElement("img");
imageTag.id=randomnumber;
imageTag.setAttribute("src","notes.png");
var linkTxt = document.createElement("a");
linkTxt.id=randomnumber;
linkTxt.setAttribute("href","highlight:"+randomnumber);
linkTxt.appendChild(selectionContents)
div = document.createElement("span");
div.style.backgroundColor = "yellow";
div.id=randomnumber;
linkTxt.appendChild(imageTag);
div.appendChild(linkTxt);
range.insertNode(div);
return document.body.innerHTML+"<noteseparator>"+randomnumber+"<noteseparator>"+range.toString();
}
Here I am making a span and this span holds my highlighted text with image.
Now problem is,
When I am selecting a paragraph, it only adds an image and does not highlight the text.
If I use div or p tag in place of span then it gives an entire line for a single word which looks rather odd.
Edit: div tags will get a linebreak before and after (usually, most browsers do this, considering it is a "division"/block level element), you're better off using a span.
And secondly you should append the selection contents to the span
ispain.appendChild(selectionContents) !! and do not forget the semicolon ;)
on a side note, you do know that:
1- you can't have html element ids starting with digits.
2- having more than one elements with the same id is gonna get unpredictable when you're selecting em.
Related
I have an HTML element lets say a div which contains plain text. The text should be selectable and wrap the selection into a tag (mark for example). That is already working.
HTML Example:
<div class="highlighter-container">
This is a <mark>long</mark> sentence
</div>
Expected behaviour:
select text and wrap it into a tag ✓
selecting "is a long sentence" should not merge it into one tag
selection of "is a long sentence" should stop the selection at the mark tag which would be before "long" - you should not be able to select "is a long sentence"
Currently i'm using mouseup (on the .highlighter-container div) to trigger execute() then get the selection (using selection api) and replace it with the tag. I'm also disabling user selection with css user-select: none; on the mark tag but that doesn't stop the user from selecting further down the text.
My code so far:
Highlighter.prototype.execute = function() {
var selectedText = this.getSelectedText();
var rawText = selectedText.toString();
var range = selectedText.getRangeAt(0);
var highlighted = document.createElement('MARK');
highlighted.textContent = selectedText.toString();
highlighted.classList.add(HIGHLIGHTED_CLASS);
range.deleteContents();
range.insertNode(highlighted);
};
Highlighter.prototype.getSelectedText = function() {
var text = (document.all) ? document.selection.createRange().text : document.getSelection();
return text;
};
I tried a few things with the Range API but i'm not sure if its even possible by using the selection api.
I'm trying to figure out what is the differences between this two:
// first one
var h1 = document.createElement('h1');
var t = document.createTextNode('hey');
h1.appendChild(t);
document.body.appendChild(h1);
// second one
document.body.appendChild(document.createElement('h1').appendChild(document.createTextNode('hey')));
The first (Document.createElement()) works perfectly, but the second (Document.createTextNode()) does not.
The return value of appendChild is the appended child.
So if we add variables to:
document.body.appendChild(document.createElement('h1').appendChild(document.createTextNode('hey')));
it gets broken down into:
var text = document.createTextNode('hey');
var h1 = document.createElement('h1');
h1.appendChild(text);
document.body.appendChild(text);
Appending the text to the body removes the text from the h1.
The h1 is discarded because it is never appended anywhere.
I find a way to do it: (just add .parentNode at the end)
document.body.appendChild(document.createElement('h1').appendChild(document.createTextNode('hey')).parentNode);
Hi I am trying to add a html with a SPACE after in a contenteditable div;
The problem is that, with above code it only return the content of the first DIV and ignore everything else.
var tdiv = document.createElement('div');
tdiv.innerHTML = '<div>testing html</div> ';
var replacment = tdiv.firstChild; //
el.insertNode(replacment); // it is just the purpose, "el" is the HTML element
With this the nbsp will be removed.
If you want all children of tdiv to be added to el then try
var el = document.getElementById('x')
while (tdiv.firstChild) {
el.appendChild(tdiv.firstChild);
}
Demo: Fiddle
You can create an element with an nbsp in it like this:
var div = document.createElement("div");
div.innerHTML = " ";
If you really just want an element with a space of text, you can just create a text node:
var div = document.createElement("div");
div.appendChild(document.createTextNode(" "));
Looking at your question again, it is actually quite unclear what you're really asking and it appears that there are many different things your question might mean. So, this is just one possibility for what you might be asking.
If you want to add it as an element, then you need to put it in some sort of container since a non-breakingspace isn't an element by itself. You can wrap it in a <span> element like this and then insert the <span>.
var span = document.createElement("span");
span.innerHTML = " ";
el.appendChild(span);
Or, maybe it works just fine to insert a text node with a space in it:
el.appendChild(document.createTextNode(" "));
After Arun P Johny Idea I resolved like this:
var replacement = '<div>testing</div> ',startAfter,i,tdiv = document.createElement('div');
tdiv.innerHTML = replacment;
replacment=document.createDocumentFragment();
while(i=tdiv.firstChild) replacment.appendChild(i);
startAfter = replacment.lastChild;
// This is my extra code to the contenteditable div insert and positioning the caret - this.range is my selection range.
this.range.insertNode(replacment);
this.range.setStartAfter(startAfter);
Thank you all, even for the down votes :P
I am using a div that is shown when I hover over an image. I want to use this div to display image info. How can I add a few lines of content to the div? The only sollution I found is innerHTML property of the div, but this means I have to use this for aech value I want to put on a div. Is there a way I can put more content on a div with a single command. I want to achieve this using javascript or dojo.
every time you use innerHTML the screen has to reflow/repaint. better pattern is to create a document fragment and update it "offline" before make the info "live":
var p, t, frag;
divInf = document.createElement('div');
frag = document.createDocumentFragment();
p = document.createElement('p');
t = document.createTextNode('first line');
p.appendChild(t);
frag.appendChild(p);
p = document.createElement('p');
t = document.createTextNode('second line');
p.appendChild(t);
frag.appendChild(p);
divInf.appendChild(frag);
I have a UIWebView i want to introduce functionality of content(may be text or text and images) selection so that the user can email it.
Is there any way to get the HTML code for the given selection using JavaScript?
I tried the built-in clipboard of webkit but its seems not working for images selection.May be i am wrong,if there is a way please tell me.
var range, frag, sel = window.getSelection();
if (sel.rangeCount) {
range = sel.getRangeAt(0);
frag = range.cloneContents();
}
This will give you a DocumentFragment containing the selected content. You can traverse the descendants of the fragment using the usual DOM methods. If you must have a literal HTML string, you could then do the following:
var div = document.createElement("div");
div.appendChild(frag);
alert(div.innerHTML);
Note that this last part won't work if the selected contents can't be placed inside a <div> (if, say, the whole body or document was selected).