How to set the textContent of contenteditablediv? - javascript

So I'm trying to make a chrome extension for Zendesk that auto capitalizes a certain words as I type.
it was working before but now it doesn't. it's probably because of the update that Zendesk made to their editor that you can no longer update or replace the text of the element inside this div[contenteditable]
I tried everything like using innerHTML, textContent, jQuery's text(), etc.. but none of these have worked anymore.
it just keeps on reverting the text to the old one.
I believe there's a function that's been trying to block all of the text alteration being done to the editor.
I tried to remove all of the input event handlers including keyup/keydown, compositionstart and compositionend to the element but it still keeps on reverting my changes

Related

How to set text to a contenteditable div

So I'm trying to make a chrome extension for Zendesk that auto capitalizes a certain words as I type.
it was working before but now it doesn't. it's probably because of the update that Zendesk made to their editor that you can no longer update or replace the text of the element inside this div[contenteditable]
I tried everything like using innerHTML, textContent, jQuery's text(), etc.. but none of these have worked anymore.
it just keeps on reverting the text to the old one.
I believe there's a function that's been trying to block all of the text alteration being done to the editor.
I tried to remove all of the input event handlers including keyup/keydown, compositionstart and compositionend to the element but it still keeps on reverting my changes
Update:
Uppdate 2: using execCommand
Use jQuery val() method:
$('#demo').val('hello');

In IE & Mozilla, mouse can't move the cursor or select text in input fields

I have scratching my head for a week to find root cause of this problem:
I have some input fields (<input type="text">); in IE I have to click two times in it to write and in Mozilla it works fine. If there is already text in it, it takes three clicks to write text in it and same problem is in Mozilla. Even after this, I can't move cursor or select text by mouse. TAB key works fine and cursor can be moved by arrow keys. Same problem exists for textarea.
In chrome, it works fine.
Some more information:
The whole HTML is in iFrame
the problem is not in focusing. On single click, it gets focused but on double click only, cursor is shown in the input fields
I can't modify or access any element outside iFrame. I can modify only the code inside iFrame
The code is so big that I can't paste it here
Problem exists for all <input type="text"> fields. I am using oi-select library. For those fields it is working fine.
Before you declare it as duplicate, here are the things I have tried:
I removed all CSS from the element and reset inherited CSS so it is not a issue of CSS
I am not overriding any mousedown function
I tried to focus on an element inside iFrame through jQuery but still problem is there.
I wrote time consuming tasks as mentioned in the some answer, still no change in the behaviour.
I called ng-focus, ng-mousedown in those elements to test, the functions in these events are being fired properly.

Can DIV replace TextArea

As we know can set contenteditable in DIV to allow editable. It can make same like Textarea.
However there's the most big different are the "content copy and paste" to DIV and Textarea.
DIV is allow html/plain but Textarea only serve plain text.
Below are the method to solve those problem:-
Method 1 - Direct using window.clipboardData.getData('Text') ( will prompt for asking permission).
Problem : Mozilla and chrome are not support clipboarddata.
Method 2 - Using flash.
Problem : Flash v.10 has upgraded to new rules which cannot get clipboarddata without user first initialize.
Method 3- Using "onpaste" event. When data paste on div -> Set focus
on hidden textarea -> Get value from hidden textarea and set into div
by using setTimeout -> clear hidden textarea.
Problem : The timing set value to hidden textarea are not consistent.
I have saw google was doing well on this.
For IE , use clipboarddata.
For Mozilla,others (not support html5) - Anyone know how google done it ?
Hint: use iframe designmode ?
For Chrome (support html5) - Just set DIV to Contenteditable="plaintext-only".
The trick that I use for this kind of thing is to have an offscreen <textarea>, which is not visible to the user.
The textarea is focussed and has a keyboard handler that notices whether the user is typing in the textarea. As I detect the user is typing, I grab the value of the textarea and dump it in the div.
This is the basic idea. You'll need a bit more to get the look and feel right:
you can't just hide the textarea with display:none or visibility:hidden because that will generally make it insensitive to typing and events too. So you need to make it really small and position it outside the screen, or stack it behind some other element.
you're going to have to detect whether the textarea blurs and decide if you need to refocus it.
You'll want a click handler on the div so that if people click the div you can focus to the textarea instead so people can start typing again.
The nice thing about this approach is that general keyboard handling, like ctrl+cursor, and cut+paste etc. all work exactly as expected without having to code that yourself - you're just piggybacking on the existing functionality of the textarea.
Here's an example of how this works:
http://js1k.com/2012-love/demo/1168
(A javascript shell)

Javascript Working in console but not inside script tag... What's the context of the console?

I'm trying to implement the browser-provided rich text editor. Here is the Mozilla reference:
https://developer.mozilla.org/en/rich-text_editing_in_mozilla
I've done this before and it works across IE/Chrome/Firefox albeit with a couple of bugs maybe.
Anyway I've set contenteditable=true (through javascript) and now all what's left to do is bind button clicks (for "Bold", "Italic", etc. formatting) to document.execCommand() calls. I'm doing that using the jQuery bind() method.
But nothing is happening when I call this function, say for example:
document.execCommand('bold', false, null);
The click callback function is called and all, but document.execCommand() is simply ignored. It's not issuing any kind of error. But if I select text, and run the same command from the Javascript console, whether in Chrome or Firefox, it works! Text becomes, bold...
So how come it works in the console but not inside my code? What ere the context differences?
Thanks
PS: I was using the HTML "A" tag to for the format buttons (bold, italic, etc.). Once I replaced it with a BUTTON tag instead, it worked... Doesn't make much sense to me...
Sounds to me like one of two potential problems:
The selection is being lost before the document.execCommand() call is executed. Using a button rather than a link will solve this, as you've already observed. Another option would be to store the selection before the selection is lost and restore it before the document.execCommand() call. Or using the unselectable attribute may work.
The other possible issue is that you're using the wrong document object: you need the iframe's document, not the one in the main document.

How can I get the text that is going to be pasted in my html text editor?

I have a small text editor in my home page ( a textarea ) where I can paste text. How can I get this text in a variable before it would be pasted? I know that there is this function:
clipboardData.getData()
but it doesn't work in Firefox, and I want something for all the browsers.I am using HTML and Javascript.
thanks
The short answer is that in general you can't get the text before it is pasted. What you can do is what big web-based WYSIWYG editors such as CKEditor and TinyMCE do, which is:
Detect a Ctrl-v / shift-ins event using a keypress event handler
In that handler, save the current user selection, add a <div> element off-screen (say at left -1000px) to the document, move the caret to be inside that div, thus effectively redirecting the paste
Set a very brief timer (say 1 millisecond) in the event handler to call another function that retrieves the HTML content from the div and does whatever processing is required, removes the div from the document, restores the user selection and inserts the processed HTML.
Note that this will only work for keyboard paste events and not pastes from the context or edit menus. By the time the paste event fires, it's too late to redirect the caret into the div (in some browsers, at least).
Getting the clipboard to work across all browsers is tricky and I believe it's safe to assume there's no way to make it work with only JavaScript, unless you're targeting one specific browser (usually IE). I used ZeroClipboard for this: http://code.google.com/p/zeroclipboard/ - it seems to do its job OK.

Categories

Resources