I have a WYSIWYG text area that is located inside of a jquery created tab layer that when you click submit it updates a field in my database, and posts it back to the text area through value.
However, when I try to do this I must click the submit button once then again when the page reloads to have the value update in the text area.
This problem of submitting twice only happens when I add a WYSIWYG editor to the text area, it updates fine when it is not a WYSIWYG editor.
I have tried all of the major WYSIWYG editors out there to see if it was the editor but I am starting to think that having the text area in a jquery area might be affecting the WYSIWYG editor.
So what do you guys think?
You could simply redirect the page upon submission, to refresh the content on the page. Using a simple header('Location: /page.php?msg=success'); would work well.
This method also follows the Post/Redirect/Get design pattern.
I have just seen from your example you're are posting the form with Ajax with TinyMCE. TinyMCE does not use the textarea, it creates an iframe with the editor in it and passes it to the textarea on submit. In order for these functions to work with jQuery you will need to make sure you're using the TinyMCE jQuery plugin. Additionally to insert data into the editor you will need to use a different method than just .html().
$('#content').tinymce().execCommand('mceInsertContent',false,'<b>Hello world!!</b>');
See the TinyMCE jQuery example page for more details/methods.
Related
I'm using bootstrap modals for every textarea, so is there a way to use ajax or jquery to make the textarea active only after I click the button to open the modal? I also have php variables populating the default textarea text.
Edit:
I just discovered that you can use the "inline" feature (which succesfully removed slow page load). But how do you submit your form with no inputs? Here's the code you're supposed to use:
<form method="post">
<div class="myeditablediv">Click here to edit the second section of content!</div>
</form>
I've decided to go with Froala html editor instead and this solved the issue. No load time with over 100 editors loaded. And much easier to use.
I've been trying for a while now to find a decent way to insert and modify text in a tinyMCE textarea using jQuery with little success. Most of the answers that people provide are generally only being used for a single tinyMCE textarea, or by calling a tinyMCE field based off of an ID. This is all well and good but my project has me creating repeated fields dynamically on the page, which makes it difficult to get a specific tinyMCE element.
Before I implemented tinyMCE I was calling the repeated fields by their class in association with a parent div.
Ex:
$(this).parents(".main-category").find(".js-description").val(product_data['description_' + $('#language').val()]);
The above code is run when I change the product via dropbox. "$(this)" being the dropbox, it then calls for the parent div and finds the description textarea where it would then input the correct default data (passed through from a controller) into the field.
the problem here is that when you initialize tinyMCE, the original text area is all but buried and become inaccessible with this method.
the tinyMCE site provides documentation for how to insert text into a tinyMCE field, but these only work when there's a single tinyMCE element on the page or when you are manually inserting the fields yourself.
// Sets the HTML contents of the activeEditor editor
tinyMCE.activeEditor.setContent('<span>some</span> html');
// Sets the raw contents of the activeEditor editor
tinyMCE.activeEditor.setContent('<span>some</span> html', {format : 'raw'});
// Sets the content of a specific editor (my_editor in this example)
tinyMCE.get('my_editor').setContent(data);
// Sets the bbcode contents of the activeEditor editor if the bbcode plugin was added
tinyMCE.activeEditor.setContent('[b]some[/b] html', {format : 'bbcode'});
Is there any way to convert any of these into something that I could use? Or is there some other method that I can use to insert information into the text areas?
Thanks in advance!
Yes, the tinymce source element becomes inaccessible when the editor gets initialized. This is necessary because tinymce creates a new contenteditable iframe which is then used to edit text. The editor text gets writen back to the former textarea on several events.
You asked for a jQuery way to acces the tinymce editor content. This is possible.
The following example shows howto acces the editor body element, looks for a html element with class .js-description and resets its value.
var editor = tinymce.activeEditor || tinymce.get('my_editor_id') || tinymce.editors[0];
$(editor.getBody()).find(".js-description").val('new_val');
So I am trying to get it so that when I press a button, it inserts umlaut characters into a text area. It's written in javascript and it totally works on any text field I give it EXCEPT the tinymce editor I've given to my body edit box. I know for a fact that the id of the text area is "edit-body-und-0-value." This works if I disable wysiwyg and just have the normal text field as is. However, when I enable tinymce editor with wysiwyg, and I press the umlaut buttons, nothing gets inserted into the tinymce editor. Do you guys know how I could solve the problem?
TinyMCE once set-up is way more than a textarea (it is built in an iframe) and therefore it cannot be accessed the same way.
To do what you're trying to do in TinyMCE, you'd need to write a plug-in (see there : http://www.tinymce.com/wiki.php/Creating_a_plugin), or fortunately for you a built-in TinyMCE button already exists to insert special characters, it is called "charmap" and is easy to add to your buttons list.
Hello I want to use Tiny mce editor and i want to take the text typed by the user and insert it in a database ca n anyone tell me how i would achieve this?
TinyMCE typically replaces a standard form textarea - so on form submission, the textarea contents would be available to you via the standard $_POST array (e.g. $_POST['my_texarea']). You can then validate the contents and do your database insert.
In order to do this you should call editor.triggerSave(); on one of the editor instances on your page.
This will update each elements for which a tinymce editor instance have been created.
Now, you can use an ajax call to send the html elements innerHTML to a remote php script where you can save the content to a db:
var content_to_be_send_using_ajax = $('#my_tinymce_htlm_element_id').innerHTML; // might be a textarea, a div or anything else
// now send it here to your php script
Another option is to use the saveplugin. When the save action is performed the form that the editor is within gets submitted.
i was working on a facebook like website.and im really impressed with the facebook's commentbox.the toggle stuff are really awesome.can someone help me get something like that.
please dont send me this link http://demos.9lessons.info/multislide.php this is the most famous link on internet but i dont think it is like facebook from any point of view.please i need some serious help !!!!!!!
Well you already know the answer, no not the link you pasted, what you tagged your question with:
jQuery
You need to use AJAX via jQuery and modify a with CSS to get exactly what you want. You're coding in PHP so get use to the idea of making your own web controls by hand, it's very easy.
I doubt you're going to find anybody that'll write the code for you, and from the sound of it, you have done your homework and shopped around at the various script sites. What I would suggest is to break down the behavior of what you're looking for and what you have:
Facebook:
Simple link: "Comment"
Thin text box: "Write a comment"
Clicking link creates div under link or setting focus to text box transforms text box into textarea and button.
Clicking outside of div removes div from page.
When button is pushed and comment is made, a div is added between the original div and the link containing the text of the comment.
When textarea does not have focus, it returns the textarea back to its original state as a text box.
Perhaps it would be best to take the code already written for the link you posted and do these things to it:
Remove transitions
Change button elements into <a> tags
Make the "slider" box visible all the time, but have the contents shift
The box should have an <input type="text"> in it with an onfocus="" attribute set so that we can hide it and show the textarea when it's been clicked in
The textarea and button should be hidden until instructed to become visible (display:none)
Use a jQuery plugin to hide the textarea and button and revert to the text box when the comment div has lost its focus(es).
Hope this helps to some degree.