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');
Related
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
I'm displaying an array in HTML page. On a text column when onfocus event is fired i display the text in CKedit using CKEDITOR.replace('#elementId').
I would like hide the CKeditor once the element is not anymore selected (using onblur event) and display unformated text as it was before selecting the element.
Does anyone know how to do that?
I think, only way is destroy instance of CKEditor
CKEDITOR.instances["YourInstanceID"].destroy();
You can recreate instance again, when needed
CKEDITOR.replace("YourInstanceID")
But, may be you should check inline version:
CKEditor inline example
I think most convenient will be using inline editors. Which only appear when user select specific element.
Another option is replacing editor after event and destroy it in other way. But this approach might be a little bit laggy, because editor should be properly destroyed and recreated, what might be time consuming for a browse. Here is an example on doubleclicking the divs, similar approach you could be able to use for focusing and bluring.
Thans for your answers.
I finaly simply added or removed ckeditor editor class in the textarea tag.
I'm attempting to write a very basic script using javascript. What I want to do is be able to detect whenever a textarea is modified, and then make some changes to other elements.
This is my jsfiddle: http://jsfiddle.net/QDRHT/1/
I'm attempting to detect whenever a new character is entered into the textarea, then modify the background color of a nearby div. However, it's not working at all, and I can't tell why (I'm new to Javascript, although I did make sure to validate my HTML and CSS, and run the javascript through JSLint).
If it matters, I'm running this in IE 9.
Change onKeyPress to onkeypress eg all lower-case characters and should work.
DEMO
The window.onload handler will not be triggered, because you add this within other load event's handler.So remove it. Also instead of onKeyPress use onkeypress(all letters should be lowercase).
Changed version is here.
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)
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.