I have textarea control and I'm using TinyMCE library to add content editing functionality to this textarea.
Initially when the page is loaded, the textarea will not have any additional formatting controls. But when the user clicks on the textarea, the tinyMCE controls should be added to the textarea.
I was able to make that happen using this JQuery code:
$("textarea").focus(function(){
$(this).tinymce();
});
But the problem starts when I want to hide the control when the user moves out of the textbox. I couldn't figure out a way to associate a blur event handler to this textarea because tinyMCE replaces my textarea with an iframe and the formatted content inside.
Is there anyway to show the tinyMCE control only when the user edits the content and hide them when the user leaves the editing area?
You should call $(this).tinymce(); only once (the first time the textarea gets the focus).
The second time it gets the focus you should call
tinyMCE.get(editorid).show();
To hide the tinymce and show the textarea you should call
tinyMCE.get(editorid).hide();
You can call this when i.e. when the parent document gets the focus.
$(document).focus(function(){
tinyMCE.get(editorid).hide();
});
Related
I'm trying to work out an experiment with a web based notepad. I have a textarea element that writes to a hidden div when the HTML page is printed. The issue I'm having is that the textarea element is allowed to overflow. My grand vision is to limit the textarea and once the textarea is filled, to have the filled div that holds it disappear from view, writing its contents to the hidden div used for printing, and a new div with a fresh textarea display.
Preferably, I'd like the user to have the option of clicking a button to perform this action, as well as performing the action automatically when the textarea is full.
You cannot check if the textarea overflows by using width and height. You can do it by setting maxlength. Again this attribute is not supported in all browsers. You might find this link helpful
How to impose maxlength on textArea in HTML using 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.
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.
I have a div in my website, and when it's clicked upon, it reveals the search box (done with jQuery).
However, I would like this div to accept drag'n'dropped text. In my use case, a user selects regular text from anywhere on the site, and drag'n'drops it to copy-paste it into the search box.
If the search box was always visible, he could simply drop it into the text box, handled natively by the browser/OS. However, is there a way I could simulate the same thing with this div? The user would drop his text onto the div, and it would fire the click event to show the text box and paste the dropped text into the box.
My website is uses Modernizr+jQuery+jQuery UI and HTML5/CSS3. IE6 compatibility is a non-issue.
Thank you in advance!
You can use the HTML5 Drag and Drop events:
$('#dropTextHere').bind('drop', function (e) {
var theDroppedText = e.originalEvent.dataTransfer.getData('Text');
});
You can read more about it here.
if I have more than one tinymce editor on a page, every action I do goes to the last editor unless I explicitly click on the editor I want to edit. For example, I made a plugin, which displays a dialog box, I type something in the dialog box and it should go to the first editor (I launch the dialog box from the first editor) but it goes to the last one, as it is the currently active editor.
How do I make the first editor active, once the page is loaded?
try this
tinyMCE.execInstanceCommand("mce_editor_0", "mceFocus");
taken from here
If you have multiple tinyMCE forms on one page, I recommend
Command: runScript
Target: tinyMCE.get('textarea_id').setContent('Your Text')