I am making an application where I need for a contentEditable div to be allowed to have tabs in it. I have already figured out that it is really not possible to have to work correctly. So is there a way that on keyDown it adds the HTML code for a tab, which is
What I have so far is this
document.getElementById('codeline').contentEditable='true';
document.getElementById('codeline').onkeydown=function(e){
if(e.keyCode==9){
e.preventDefault();
//document.getElementById('codeline').contentWindow.document.execCommand("InsertHTML",false," ");
//Thought this would work but it doesn't
}
}
If anybody knows if there is a way to do this, or if that is the way and I am simply doing it wrong, please tell me! Thanks!
The HTML spec specifies that a TAB char should be treated as a single white space except for when it's contained inside a <pre> element.
The code that you posted above does work and it does insert a TAB char but it's just displayed by the browser as a white space. If you can put your entire editable content in a <pre> tag then your tabs will show up.
If you only want to use the tabs to indent content, you can also look into
execCommand('indent', false, null)
For future readers, perhaps a simpler solution is to just use the 'pre' white-space style. original post here.
white-space: pre;
"indent" command, firefox wraps the selected text with blockquote element.
So one can define a margin-left or padding-left property for blockquote element to represent tabbing.
The "outdent" command will remove the blockquote element and hence the styles.
Related
I've been trying to do something simple, i think, let me explain:
I have an BPMS software where a send an e-mail at the end of the process, this e-mail is an HTML page that i created, inside the HTML page we have some identifying codes that get a field value from an previously form, some strings. The problem is, when i transfer that value to the HTML page, obviously the "Enter" key doesn't work like the "br" tag, so i made a simple javascript to replace the "enter" for the "br". It worked, but when i send the e-mail my ID is changed and they put an "x_" prefix, so there goes my question.
Can i stop it or there is some other way to do it?
The code is below:
<p id="informacoes">
TEST
TEST
</p>
<script>
var strMessege = document.getElementById('informacoes');
strMessege.innerHTML = strMessege.innerHTML.replace(/(?:\r\n|\r|\n)/g, '<br />');
</script>
It seems like your end goal here is to retain original line breaks present in the source code. I think your best bet would be to address this using CSS.
Take a look at the CSS property white-space, MDN: white-space property
By default, CSS collapses white space (e.g. multiple non-breaking ("regular") spaces, tabs, and newlines) into, effectively, a single regular space. In your example, the line breaks that you see in the source code are being collapsed and so they will not be rendered by the browser or email client.
Try using CSS to set a different white-space property, like
#informacoes {
white-space: pre-line;
/* depending on your use case,
a different value might work better */
}
Property values other than white-space: normal (which is the default) will change whether and how white space, including new lines, are collapsed when rendering from the source code to the screen.
This one is a strange one and I simply cannot get my head around it. We are trying to append space to a textarea content using the following jquery,
var checkThis ='help';
$('#msg').val(checkThis+' ');
$('#msg').focus();
But when we focus on the text area we can see that the space is not added. Also, the cursor doesn't focus automatically.
I am not able to figure out if there is any other script in the code doing this. This code is actually a large piece of maintenance code, is there anyway I can find what function may be trimming the text?
Try this:
$('#msg').append(checkThis+' ').focus();
So I have perused the piles of information on SO on this subject and finally resorted to asking.
I'm working with a contenteditable div and need to mimic twitter's on-the-fly conversion from unstyled text to styled text for hashtags and mentions (please do not link me to twitter-text, that is not, in and of itself, the answer, I've tried).
The obvious solution here would be to enclose the text that needs to be styled in a span or, more generally, something I may attach styles to.
I can do that, but the problem is that the caret then does weird stuff like jump to the beginning.
I've found a solution (Tim Down's) which works nicely, but it leaves the caret in the span, so the ensuing text is still styled, which is not what I want.
He suggests elsewhere that this is because webkit browsers are opinionated and will force the caret in the span, instead of placing it outside of the span. There are two proposed hacks, first, he suggests that you enclose the text in a blocks instead of spans. Which I've tried, but doesn't work. He then suggests that I create a zero width white-space char, and then select that.
So how do I do that? Or are there any other alternatives?
(working code welcome)
Edit 1:
Reference to "cursor" was corrected to "caret"
Can you please try placing the content in the label instead of span ?
That will force the caret position to be at the end.
Please check with the following code....
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<script language="javascript">
function addSomeText()
{
var dynaspan = "<label>"+new Date().getTime()+"</label>"
document.getElementById("clickable").innerHTML += dynaspan;
}
</script>
</head>
<body>
<div style="width:auto;height:240px;border:1px solid red;" contenteditable="true" id="clickable">
</div>
<button onclick="javascript:addSomeText();">Say Something!</button></body>
</html>
Click on Say Something
Hope it helps!
This may be a duplicate of this question. Dutzi, in that question, recommended adding display: inline-block and a <br> tag.
If you've seen that, or that doesn't work, you can add a null-byte-like character to a string with var string += '\0'; or var string += '\u00000'; and select that null byte with
input.setSelectionRange(input.value.length-1, 1);
input.focus();
If this is not what you mean (I wasn't 100% clear on what exactly was happening without code), there may be other solutions, but at the moment, that's how to add and select a zero-length character in javascript.
Here is playground: http://jsfiddle.net/n6W27/1/
try to Ctrl+A Ctrl+C Ctrl+V and see that contenteditable node was duplicated(at least for me in firefox).
The original question is how could I force only plain-text input into contenteditable block?
And the derived question is "Why the !##$ node duplicated next to original one?"
Edit1: There is only one block in this demo, so I put caret inside editable block and then select all, copy, and paste
Edit2: result screenshot
If you can, change the element type to DIV. That will clear your issue.
<div class="edit" contenteditable>ABC</div>
If you don't want your field to be block-level, set the display property to "inline-block":
.edit {
display: inline-block;
}
Live demo: http://jsfiddle.net/n6W27/2/
I am looking to create a javascript/jquery function to wrap a piece of highlighted text from a textarea in strong tags - similar to the WYSIWYG editor here.
Is this possible and if so can you point me in the right direction.
EDIT:
OK so here's a hopefully clearer description of what I want...
I have a textbox on my page which I can type in.
I then want to be able to highlight a part of this text and wrap the highlighted part in <strong> tags
So if the text box had the words one two three and I highlighted the word "two", I want to be able to wrap that word in the strong tags - so becoming one <strong>two</strong> three
Hope this is clearer... I know there are plugins out there but I don't need the full WYSIWYG functionality.
My Rangy inputs (terrible name, I know) jQuery plug-in does this.
Example code:
$("#foo").surroundSelectedText("<strong>", "</strong>");
jsFiddle: http://jsfiddle.net/aGJDa/
I love Rangy! Use it often! But I didn't want to include the whole thing just for this little application, so I did it using document.execCommand to wrap the selected text, then used the href (third parameter of the CreateLink execCommand) to find the element, wrap it with what I wanted, and then remove the link:
document.execCommand('CreateLink', false, 'uniqueid');
var sel = $('a[href="uniqueid"]');
sel.wrap('<strong />')
sel.contents().unwrap();
document.execCommand is supported by all major browsers so you should be safe hacking it this way. In the browsers I've tested, the browser itself will close and open tags for you, so if you're selecting from the middle of one html tag to the middle of another, it should nest the tags correctly.