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.
Related
I have written a control panel for managing devices, however as we have imported hundreds of them, there are a lot of values that need to be manually set. I have an overview page that shows the most import information and I am looking at some way to allow the end-user to change those values by clicking them.
Right now they are just text in TD cells pulled from the Database. Would it be possible to do something like double clicking the cell changes it to a drop-down box of options and then when deselected it automatically saves it to the database?
I have been searching Google and Stack Overflow but I am not even sure what to search for to get an idea of how to accomplish this.
To do this you must (short version):
Handle click event on your value from table
Change(hide text and display input) text for input with setted value
Handle blur event on your input
If some changes have been made, send Request (by AJAX) to your php actions which save value in database. Or do nothing if there were no changes.
Change(hide input and display text ) input to text
I have a lot on my site text boxes whose content is a date
So I will not have to check correctness did it read-only
Until now next to each text box was two buttons, one to add date opened popup calendar, second to delete the date (values not required)
Now I wanted to go to ajax calendarextender that the buttons were just ugly
My problem is that this control is not have delete button, and I do want to allow the user to deleted but not cancel the properties read-only to text box And I do not want to leave the ugly button.
My question:
If calendarextender ajax or something similar with a delete button from the popup
Alternatively if you have the option text box with a delete button inside( as text boxes IE10)
With the help of css and java-script you can easily do it.
Here is an example How do I put a clear button inside my HTML text input box like the iPhone does?
Instead of all that work to make it read-only and avoid validation, why not combine a FilteredTextBoxExtender with the CalendarExtender. Use the filter to block all non-numeric characters. I still think it's better to do the validation. It's as simple as DateTime.TryParse(), or you could do it client-side with the built-in FieldValidators.
I'm running into an issue where I have a button on my page that has a CKEditor.
When the button is pressed I want to append text to the editor.
I used the following code:
$('#mtxDescription').append($(this).data('key'));
CKEDITOR.instances['mtxDescription'].updateElement();
However this does not work. The editor does not reflect the change. However when I inspect the editor I find that the textarea does show the appropriate text appended, its just the editor is not showing it. Does anyone know of a way to get around this. Also, just in case anyone is wondering, I do have the jquery CKEditor adaptor script referenced in my page.
Also, if a somewhat related, but separate issue.
I have a drop down list that will allow the user to toggle between the text area shown on the page being the CKEDitor WIZIWIG and going back to being a normal textarea again. However I can't seem to do this without literally refreshing the page, I want to do it through javascript/jquery so I don't have to refresh the page whenever the change the dropdown selection. I've already tried the built in destroy method. It doesn't seem to do anything visually, the editor does not revert back to a simple textarea.
Just in case you were going to ask for some more code, here is what my HTML page looks like:
<textarea id="mtxDescription" name="mtxDescription"></textarea>
Here is how I initialize the editor
CKEDITOR.replace('mtxDescription', {
sharedSpaces: { top: 'ed-top'}
});
I was able to solve this problem by using the following code instead of using jQuery CKEDITOR.instances.mtxDescription.insertHtml($(this).data('key')) I still need a way to remove the editor at runtime.
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')
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();
});