The problem is that you are updating the view value when the interpolation is not finished yet. So removing // load init value from DOM ctrl.$setViewValue(element.html()); or replacing it with ctrl.$render(); will resolve the issue.
Unfortunately you do still have to handle this for the pre case individually per-browser (I don’t condone browser detection in many cases, use feature detection…but in this case it’s necessary), but luckily you can take care of them all pretty concisely, like this: var ce = $(“<pre />”).html($(“#edit”).html()); if($.browser.webkit) ce.find(“div”).replaceWith(function() { return “\n” + this.innerHTML; … Read more
To answer the question, Webkit browsers use outline: 5px auto -webkit-focus-ring-color;. On Macs -webkit-focus-ring-color is blue rgb(94, 158, 214) (or #5E9ED6), but on Windows and Linux it’s gold rgb(229, 151, 0) (or #E59700) (ref). While I understand your desire for consistency, users generally only use one browser, and are used to their browser’s default styles. … Read more
See here for working jsFiddle: http://jsfiddle.net/dKaJ3/2/ 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 != … Read more
You have to use javascript one way or the other, it won’t work as a “standard” form element as it would with a textarea or the like. If you like, you could make a hidden textarea within your form, and in the form’s onsubmit function copy the innerHTML of the contenteditable to the textarea’s value. … Read more
Pass the event object to your function and call e.preventDefault() if the maximum is reached: var content_id = ‘editable_div’; max = 10; //binding keyup/down events on the contenteditable div $(‘#’+content_id).keyup(function(e){ check_charcount(content_id, max, e); }); $(‘#’+content_id).keydown(function(e){ check_charcount(content_id, max, e); }); function check_charcount(content_id, max, e) { if(e.which != 8 && $(‘#’+content_id).text().length > max) { // $(‘#’+content_id).text($(‘#’+content_id).text().substring(0, max)); … Read more
You could start with the Ace editor (formerly Bespin and Skywriter). It’s aimed at code editing, so it’s missing formatting and other features, but you may find a useful core of functionality to base a rich text editor on. In action: http://ajaxorg.github.com/ace/build/editor.html Code: https://github.com/ajaxorg/ace Update: As @theazureshadow points out, the current editor doesn’t use canvas … Read more
Just store the contents to a variable and check if it is different after blur() event. If it is different, store the new contents. var contents = $(‘.changeable’).html(); $(‘.changeable’).blur(function() { if (contents!=$(this).html()){ alert(‘Handler for .change() called.’); contents = $(this).html(); } }); example: http://jsfiddle.net/niklasvh/a4QNB/
Set a style on the div: white-space: pre or white-space: pre-wrap Example: http://jsfiddle.net/fPv6S/
It would work fine, but it’d be a little bit more difficult than a form, simply because you’re going to have to wire up your own logic to make the button’s click event track down the correct div, get its content, and then perform the submission. The advantage of a textarea is that the browser … Read more