Textarea loses focus when a rich editor is applied - javascript

I have a HTML page with some pre-set options this work fine when I use a plain HTML Text-area, but when I use a rich editor such as "nicEditor" the Text area loses focus.
working page: Here
no working page: Here

Use the following to set the value:
nicEditors.findEditor("TextArea").setContent('text');

You can't have focus on a hidden element. To make my point clear: When using a richtext editor, you are not typing into the original textarea, but one that is provided by the editor (or even an iframe/div tag).
SO to have the focus on the editor window you need to set the focus to it, not to the textarea – which effectively get filled by JS.

Related

Unfocus quill's text editor

Is there a way to unfocus?
I want to update the whole text format using my code and i don't want to give my user the option to write text after it.
I update the format of the whole text (range: start=0, end=text length) using formatText method and then the text area on focus and the user can write:/
There is not an explicit unfocus() API since there's not much that Quill needs beyond the existing DOM blur function:
quill.root.blur()
The user can of course click back into the editor so if you want to prevent that you can disable the whole editor with:
quill.editor.disable()
You may still make API calls but the user will be unable to interact with the editor while disabled.
I had an issue with the cursor remaining on the screen after blur. I realized that quill already has a hidden focusable element that seems to fix the problem.
quill.querySelector('.ql-clipboard').focus();

how to hide wysihtml5 editor?

I need to hide and show the editor based on event.
I initiate the editor. then, i try to hide using the code:
$('#textare').hide();
but it doesn't work, since it as I think initiate iframe
so how can I show and hide editor
Update: I'm sorry forget to add editor name.. I use wysihtml5.
I think the way that editor work is hide the textarea and make iframe
so the above text couldent hide the editor.
The textarea should already be hidden since it will only be used as a fallback. The editor itself is contained in an iframe with class wysihtml5-sandbox. So this should toggle the editor
$(".wysihtml5-sandbox").hide()

How to refresh a PrimeFaces Editor component from JavaScript

I have a PrimeFaces (2.2.1) Editor on a page where I want to allow the user to append text to the editor by selecting a value from a drop-down list and pressing a button indicating that they want it appended to the text. I can add the text to the editor using JavaScript like this:
document.getElementById('form:editor').value = document.getElementById('form:editor').value + 'NEW TEXT!';
However, unlike an inputTextarea, the PrimeFaces Editor component doesn't refresh automatically when its value is changed. I have to press the browser's reload button or hit the editor's Show Source button to get the appended text to display. Is there anything I can do from JavaScript to get the editor to refresh itself after changing its value?
Not a good solution, but it should work.
editorWidgetVar.jqInput.var()
stores a value which would be submited on a form submit.
$(editorWidgetVar.jq.find('iframe')[0].contentDocument).find('body').html()
but this is actually visible for user element. So if you want to change content of editor, then you should change both fields (hidden for proper submitting and visible for proper display). I am almost sure there is a normal API for it. This method would be good for a temporary workaround.

What are the cons of using a contentEditable div rather than a textarea?

Would I be shooting myself in the foot by using a div with attribute contentEditable="true" as a text field rather than a textarea?
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 takes care of all that for you.
It's not the same thing. First semantically, the purpose of a textarea is to write/edit plain text whereas with contentEditable you can edit list for instance (see: htmldemo)
Second the behavior is also different. For example, in chrome when you test the link below and that you delete all the content you loose the focus (the div element disappear) which is not the expected behavior, or if it is it's idiot.
The Gmail's mail edit box is also a div with contenteditable="true". The major benefit is it has auto-adjust height as user input text/content. Also it supports rich text inside. You can mimic the Textarea by setting a max height if need.
On the other hand if you want auto height in Textarea, you might have to use js to bind some listener to the oninput hook.
In divs with contenteditable="true" the content can be html formatted, e.g. text with different colors.
See also https://stackoverflow.com/a/40898337/11769765.

How do I simulate browser 'select-all' in GWT

I've got a GWT application that displays largely text spans. I'd like to programatically select all of the text currently in the browser window (similar to pressing from the browser menu).
Can anybody give me a pointer to this?
cheers,
Ian
The select all function is not available for the entire DOM, however there is a selectAll message for TextBoxBase, so what is commonly used for large quantities of text where you automatically want to do a select all is to put the text inside a TextArea. If you don't like the look you can remove the borders from the text area and set it to read-only so that it would appear as just plain text.

Categories