i am trying to create a very simple html text editor.
i have utilised the context menu function to have different format options once a user selects on the highlighted text on screen will have a span tag appended to it.
this is what i have.
function StyleChange(property) {
var span = document.createElement("span");
span.style.color = property;
if (window.getSelection) {
var sel = window.getSelection();
if (sel.rangeCount) {
var range = sel.getRangeAt(0).cloneRange();
range.surroundContents(span);
sel.removeAllRanges();
sel.addRange(range);
}
}
}
this works fine for changing the colour of the highlighted text.
what i would like to do is be able to use this function to change any format of style for the text by passing an extra parameter when the function is called.
so when it is called it will say something like. StyleChange('color',red) or StyleChange('background','yellow').
something like
function StyleChange(style,property) {
var span = document.createElement("span");
**span.style. + style = property;**
if (window.getSelection) {
var sel = window.getSelection();
if (sel.rangeCount) {
var range = sel.getRangeAt(0).cloneRange();
range.surroundContents(span);
sel.removeAllRanges();
sel.addRange(range);
}
}
}
i get an error message with this any ideas?
Square brackets are used to pass properties, like:
function StyleChange(property, value){
var span = document.createElement('span');
span.style[property] = value;
if(window.getSelection){
var sel = window.getSelection();
if(sel.rangeCount){
var range = sel.getRangeAt(0).cloneRange();
range.surroundContents(span);
sel.removeAllRanges();
sel.addRange(range);
}
}
}
You probably want
span.style += property;
instead.
Another consideration: you don't want to use the name property for your variable, since that's a reserved keyword (as you can see since it's highlighted in blue) and Bad Things™ will happen if you use one.
Related
I'm having some difficulties while trying to set the carret after an <i> tag inside a contenteditable.
Here is what I have :
<p contenteditable="true"><i>H</i><i>e</i><i>l</i><i>l</i><i>o</i></p>
How do I put the carret after the .. let's say 3rd <i> tag here?
I already tried this solution :
var el = document.getElementsByTagName('p')[0];
var range = document.createRange();
var sel = window.getSelection();
range.setStart(el.childNodes[0], 3);
range.collapse(true);
sel.removeAllRanges();
sel.addRange(range);
el.focus();
But I don't know how to make it work with the position of the <i> tags instead of the chars.
var el = document.getElementsByTagName('p')[0];
var range = document.createRange();
var sel = window.getSelection();
range.setStart(el.childNodes[3], 0);
range.collapse(true);
sel.removeAllRanges();
sel.addRange(range);
el.focus();
<p contenteditable="true"><i>H</i><i>e</i><i>l</i><i>l</i><i>o</i></p>
In p 5 child nodes are there, if you want to set caret at child node use range.setStart(el.childNodes[3], 0);
I am trying to select an element's text on click using the following code:
var selection = window.getSelection();
var range = document.createRange();
range.selectNodeContents(element);
selection.removeAllRanges();
selection.addRange(range);
Although the text is getting highlighted, empty string is copied to the clipboard on using Ctrl + C. Checking for selection.toString() returns an empty string too. Any idea why can this be happening?
Hm, I took a look at your code and tried:
var selection = window.getSelection();
var selectionText = selection.anchorNode.textContent
and I got the selected text content.
EDIT: it appears this was wrapped in a click function...one second.
$('<your selector goes here>').click(function(e) {
var selection = window.getSelection();
var range = document.createRange();
range.selectNodeContents(e.target);
selection.removeAllRanges();
selection.addRange(range);
console.dir(selection.anchorNode.textContent);
//text content should display...
//now that the content is highlighted, you can copy it
document.execCommand('copy');
})
I have issue with range selection, i saw some of the ans in stack over flow, I tried some thing, is not working.
The issue
The text is like below which will have the text with html tags
Test
The function should select only the text in side the html tags
I tried following but it is not working
function makeSelection() {
var start = 3;
var end = 9;
var child = 2;
var parent = document.getElementById('data');
var range = document.createRange();
range.setStart(parent.childNodes[child], start);
range.setEnd(parent.childNodes[child], end);
var sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);
}
will be adding html tags dynamically to the div, the value is present at the center like
Test
The function should select only text Test. Please give some input to solve this issue
I need to insert text into a contenteditable div and then have the cursor be at the end of the inserted text.
I got the solution below from here Insert text at cursor in a content editable div.
That works great if the text is added to am empty div. But it does not work if the user has already typed in text. Or, if the function is used to insert text, the user then places the cursor somewhere inside the newly inside text, and the function is then called again. Then the cursor is left at the beginning of the inserted text.
EDIT: The code below works in IE, properly setting the cursor, but has the problem in Chrome.
function insertTextAtCursor(text) {
var sel, range, html;
if (window.getSelection) {
sel = window.getSelection();
if (sel.getRangeAt && sel.rangeCount) {
range = sel.getRangeAt(0);
range.deleteContents();
range.insertNode( document.createTextNode(text) );
}
} else if (document.selection && document.selection.createRange) {
document.selection.createRange().text = text;
}
}
Alright, once I realized it was a Chrome/IE thing I managed to find the answer tucked away inside one of the comments to the answer that I first found.
function insertTextAtCursor(text) {
var sel, range, html;
sel = window.getSelection();
range = sel.getRangeAt(0);
range.deleteContents();
var textNode = document.createTextNode(text);
range.insertNode(textNode);
range.setStartAfter(textNode);
sel.removeAllRanges();
sel.addRange(range);
}
I've created a simple tool so employees can personalize their company email signature. This tool creates some styled text with some bolded fonts and a bit of color, nothing fancy. If I then select the text and copy and paste it into my Gmail signature field all works well. It retains the formatting. However, I'd prefer to give the user the option of clicking a "Copy" button that copies the formatted content onto their clipboard.
I'm currently using ZeroClipboard to add the "copy to clipboard" functionality and it's working great. Thing is I don't know how to grab that formatted text. It just keeps copying the unformatted version. One thing I tried was adding a mouseDown listener to ZeroClipboard that selects the text like this:
function selectText() {
if (document.selection) {
var range = document.body.createTextRange();
range.moveToElementText(document.getElementById('clicktocopy'));
range.select();
}
else if (window.getSelection) {
var range = document.createRange();
range.selectNode(document.getElementById('clicktocopy'));
window.getSelection().addRange(range);
}
}
Then returns the selection like this:
function getText() {
if (window.getSelection) {
var range = window.getSelection();
return range.toString();
}
else {
if (document.selection.createRange) {
var range = document.selection.createRange();
return range.text;
}
}
}
However, this is only copying the unformatted text. Is it possible to copy the text formatted?
My formatted text is in a div with the id "results".
If you want an HTML string representing the current selection, the following function will do this (replacing your getText() function):
function getSelectionHtml() {
var html = "";
if (typeof window.getSelection != "undefined") {
var sel = window.getSelection();
if (sel.rangeCount) {
var container = document.createElement("div");
for (var i = 0, len = sel.rangeCount; i < len; ++i) {
container.appendChild(sel.getRangeAt(i).cloneContents());
}
html = container.innerHTML;
}
} else if (typeof document.selection != "undefined") {
if (document.selection.type == "Text") {
html = document.selection.createRange().htmlText;
}
}
return html;
}