I am working on a Javascript WYSIWYG editor in Firefox. I am using a div with the contenteditable attribute set to true in order to accomplish this (I cannot use a contenteditable iframe for this particular project). This contenteditable div is nested in another div that is not contenteditable. I am encountering the following two problems when using execCommand to apply formatting, including font style and size, as well as bold, italic, and underline:
When all text in the div is selected, execCommand simply does not work. execCommand works fine when only part of the text is selected, but does nothing when all of the text is selected.
Applying formatting with no text selected yields unexpected results. For example, when calling execCommand('bold') with no text selected and then typing results in bold text being typed until a spacebar is inserted, at which point the bold formatting is lost (until another space is inserted, interestingly enough; then the text becomes bold again).
To see what I mean, please try running the following HTML code in Firefox 3:
<html>
<head><title></title></head>
<body>
<button onClick="execCommand('bold', false, null);">Bold</button>
<div style="width: 300px; border: 1px solid #000000;">
<div contenteditable="true">Some editable text</div>
</div>
</body>
</html>
Please try the following:
Select the word "Some" only. Click the Bold button. This will make the text bold, as expected.
Select the entire phrase "Some editable text" (either manually or using CTRL-A). Click the Bold button. Nothing happens. This demonstrates the first bug shown above.
Hit the backspace key to clear the div. Click the Bold button and begin typing. Type a few words with spaces. This will demonstrate the second bug.
Any ideas on what could be causing these problems and how to work around them would be greatly appreciated!
Interesting. In Firefox 3.6.3, I can't replicate the first problem: selecting all of the editable text and pressing the button toggles boldness as expected. However, the other two issues I do see. They'll be bugs in Mozilla's implementation of contenteditable.
Interestingly, the alternate-words-bold problem doesn't happen if you use designMode rather than contenteditable. I suspect it will solve your other problem too. This involves making the whole document editable, rather than just elements within it:
window.onload = function() {
document.designMode = "on";
};
If this isn't an option and you need the fine control that contenteditable provides, you'll need to implement your own version of the bold command using DOM manipulation and Ranges. This will be quite involved to get working in IE and non-IE browsers.
Related
I want to have an input field that formats the text that get put into it dynamically. For example I want that every word that begins with an hashtag get turned in bold text. More precisely if I write #todolist some task than this text should instantly look like this #todolist some task
Initially I tried the <input> and the <textarea> elements, but that dit not work at all. I figured out that there is an attribute called contenteditable which allows to edit text inside a <div>. But I wonder if there is a better solution instead of using a <div> element?
Unfortunately, general <input>, <textarea>, <select> and all the other default editable elements are not able to have any other child elements, thus, you can not do the text bold (<b>) or italic (<em>).
The best solution is a <div> with contenteditable attribute.
The article more on the contenteditable:
https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Editable_content
The value of input or textarea is DOMString.
Value: A DOMString representing the text contained in the text field. MDN
and you can not style (e.g. set font-weight) two-parted text without wrapping it in a DOM element.
Here is another idea which is also feasible:
You can set two input elements side by side, hide all of the native input stylesheet traces, and listen for onChagne values if it starts with # or anything more specific, you can change the style of the first input to bold or any other thing. Then blur the first input and focus on the second input.
there are lots of concerns you should take responsibility for now:
cross-browser UI compatibility for your inputs.
handle UI edge cases for the value that doesn't start with # (maybe setting the width of next input to 0 then).
60 fps animation rate (or UI decomposition) for blur/focus effect.
keyboard will face a flash of close-open in this switching (blur/focus).
I want to make the "COPY ADDRESS" button copy a text I specify. I already tried to do it myself, but couldn't do it. It is very simple, I just have minimal knowledge.
http://porcelaincoins.com
<a class="btn btn-lg" href="#">copy address</a>
This code will copy the text abc to the clipboard.
function copy(text) {
document.body.insertAdjacentHTML("beforeend","<div id=\"copy\" contenteditable>"+text+"</div>")
document.getElementById("copy").focus();
document.execCommand("selectAll");
document.execCommand("copy");
document.getElementById("copy").remove();
}
<button onclick="copy('abc')">Copy</button>
How does it work?
Firstly, it makes a contenteditable div with the id of copy (don't use this ID anywhere else on your page). contenteditable elements are elements which are designed to be edited by the user, and there is extensive native JavaScript around them in the form of document.execCommand provided to help people make rich text editors. Part of document.execCommand is a copy method, to add text to the clipboard - however this only works reliably with selected text in a contenteditable element.
The next step is for the code to focus on the div. This is as if the user had clicked on it - inputs are known as focused when they are active - for example the focused element in a form will receive the keyboard events
The code then uses document.execCommand to select all of the text inside of the contenteditable div. In the first step, we ensured that this text was the text passed to the function.
Then, it copies that content to the clipboard using document.execCommand("copy"). This is actually surprisingly simple.
Finally, it removes the div from the DOM (i.e. destroys the div)
These actions should all happen so fast that the user will not realise that a div has even been created, however the text will appear on their clipboard.
I am working on a website where I would like to be able to display a box containing syntax-highlighted source code for the user to copy. When I click on the box, giving it focus (Chrome shows its focus outline), and type Ctrl+A, the text of the entire page is selected, whereas I would like only the syntax-highlighted source code within the box to be selected.
Is it possible to restrict the range of select all/Ctrl+A to only the text within the box, preferably without using an <iframe>?
My first thought was to try contenteditable. When I click in the box and the editor caret appears, typing Ctrl+A selects only the text within the box, as desired, but it also allows the user to change the code, and I think that the editor-interface aspect of making the box contenteditable will be confusing to users. If I wrap the source code text within a <div> having contenteditable="false" within the <div> having contenteditable="true", then the source code text is read-only, but typing Ctrl+A selects the text of the entire page again.
Here is a test page: http://jsfiddle.net/5crgL/
You can use the document.createRange(); method to select the text from a particular element.
and to handle the ctrl+a you can use the jQuery keydown method and can call the JS code to select the DIV text.
var range = document.createRange();
range.selectNode(document.getElementById(containerid));
window.getSelection().addRange(range);
please see jsfiddle here jsfiddle.
I have draggable objects, and each content of an object can be editable.
Here is a sample:
http://jsfiddle.net/ashish41191/UH9UE/366/
The problem is when I type some words initially in an object, let's say the text is test for copy paste action. This is enclosed in a DIV <div> content </div>. If I select all of the typed words (ctrl + A or cmd + A) then paste it on the same text field, the pasted texts are not appended on the DIV. It rather creates a <span> copy paste words </span> inside the DIV. Can it be just appended on the DIV, like <div> content copy paste words </div>?
+1 for making me learn a HTML5 feature.
After a research, this is my inference:
HTML5 contentEditable is for Rich Text Editing. So each browser which supports contentEditable has its own way of presenting the style of the pasted content.
For your problem, I could not find a straight forward way to disable the rich text pasting.
Below the workaround,
$('body').on('paste', '.ui-widget-content', function (e) {
setTimeout(function() {
console.log($(e.target).html($(e.target).text()));
}, 100);
});
Updated Jsfiddle,
http://jsfiddle.net/UH9UE/372/
I have a textarea #myarea into which I'm typing text. I've typed this text.
This is a sentence and only this word
will end up being bolded
Now I have a button on the side, like a bold button. I want to select the letters I want bolded, click the button, and see those letters turn bold inside the textarea. It's similar to the standard functionality found in many editors, but I'm looking for something much simpler as I described here.
So is there a way to do this with jquery? I'm guessing it's a 2-part problem. I need to find the letters selected, then apply bold to them so it shows bold inside the textarea.
If you don't mind using a div that has its ContentEditable property set to true then you can easily do this using:
document.execCommand('bold',null,false);
You can easily style this div to look and feel like a textarea.
See jsFiddle here: http://jsfiddle.net/hqvDT/1/