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');
Related
For a while, I have been trying to figure how to make html form with style atributes where users can style their posts for example (Bold,Center,Font-Size,Link,Image and more).
I'm not very good at english and maybe I am writing my question wrong, but checked out and didn't found any example how to do this, and how this styled information is stored in db.
Image for example, what I want to do: Image
You should use textarea as a field and convert that textarea into editor using jquery.
You can refer Responsive WYSIWYG Text Editor for making textarea to editor.
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.
I need to display a document (like in a Google Docs style view) and provide the ability for a user to make comments on that document.
Here's how it needs to work:
When the user views the document, they can use their mouse to highlight any amount of text they want (as they would within any other webpage)
Upon release of the highlight, some sort of modal dialog box appears asking them what they would like to comment on that portion of the text they selected
After clicking save in the modal box, their comment is saved in a MySQL database along with information about the section of the text they highlighted
Another user can view this document and see their comments on the different parts of the text.
I don't know how to tell the database what section of the text is highlighted so it can reference that and show the comment on that section of the text.
Not sure where you're getting stuck at but the basic idea would be:
Get the selected text using Javascript (see http://www.codetoad.com/javascript_get_selected_text.asp for an example)
Submit that text to a PHP script using either an HTML form or an AJAX approach (AJAX would probably be what you're looking for based on the description of your app).
Take the text passed to the PHP script and insert it into the db.
Party like a rockstar.
In Javascript:
var selectedText;
selectedText = window.getSelection();
I'd suggest some kind of character-index-based approach. I've answered a similar question recently here: execCommand insertHTML breaks stored window.getSelection()
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 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.