How can I refresh the tinymce content or refresh the tinymce iframe using jquery?
This code is used to refresh tinymce:
tinyMCE.execCommand("mceRepaint");
You can use this statement to refresh (replace) the content:
editor.execCommand('mceSetContent', false, html);
Or if you want to make sure the dirty flag is cleared:
editor.execCommand('mceSetContent', false, html);
editor.startContent = tinymce.trim(editor.getContent({ format: 'raw' }));
editor.isNotDirty = true;
editor.nodeChanged();
Related
I am using a single instance on a page with many other fields and when the other fields gain focus, I call tinyMCE.remove() to remove the iframe and show the marked up text in the textarea it was refrencing. However, even without explicitly saving the content, it appreas that the remove() method will actually save whatever changes were made. This is actually acceptable for our use of the control, but I there is no documentation stating this will happen. So I'm concerned that a future version may 'fix' this and then I'll have to be sure to explicitly save the content first. Also the 'cancel' doesn't appear to do anything when including it.
Has anyone else experience this?
I was able to confirm this with the following:
Where txtDetails is the textarea used on the tinyMCE init.
$("textarea").focus(function () {
console.log($("#txtDetails").val());
tinymce.activeEditor.remove();
console.log($("#txtDetails").val());
});
This is the tinyMCE init used:
tinymce.init({
selector: '#' + clientID, //'#tinyEditor',
plugins: 'code link', // save
menubar: false,
toolbar: 'link bold italic underline forecolor', // save cancel
toolbar_mode: 'floating',
paste_block_drop: true,
paste_merge_formats: true,
paste_as_text: false,
paste_webkit_styles: 'color font-size',
smart_paste: false,
statusbar: false,
//save_enablewhendirty: false,
force_br_newlines: true,
newline_behavior: 'linebreak',
link_target_list: [
{ title: 'New page', value: '_blank' }
],
default_link_target: '_blank',
link_assume_external_targets: 'https',
init_instance_callback: function (editor) {
var $html = document.getElementById(clientID).value;
editor.setContent($html);
} //,
// save_onsavecallback: () => {
// tinymce.remove();
// },
// save_oncancelcallback: () => {
// tinymce.remove();
// }
I'm getting the same behavior with or without the save plugin.
It is expected behavior. And it is not specific to the latest version.
TinyMCE sticks to the textarea/div/etc. to change their content. But once TinyMCE is removed - it leaves the content as is.
Imagine that you need to edit the textarea content successively with two different editors. It would be much more complicated if one of the editors cleans the textarea on remove().
If you need to clean the textarea before remove(), you can call something like setContent(''). But don't forget to save the content somewhere with getContent().
I'd also recommend considering calling destroy() instead of remove, as, besides the editor itself, it removes all events, element references, etc., preventing memory leaks. destroy() calls remove() during execution.
I have a page with multiple textareas that use TinyMCE to be able to display WYSIWYG content. This works fine but I need to set a specific textarea content from a function. I tried this approach...
<script>
function addText() {
var html = "<b>hello world</b>";
tinymce.get('#myFirstTextArea').setContent(html);
}
</script>
But when I do that I get a "Cannot read properties of null (reading 'setContent')" Error. What am I doing wrong here?
I use TinyMCE ver 6
Most likely you have a timing issue in your JavaScript. You cannot make a get() call until after TinyMCE is fully initialized.
TinyMCE has an event that gets called once the editor is fully initialized. You can put this in your TinyMCE init. For example:
tinymce.init({
...
setup: function (editor) {
editor.on('init', function (e) {
editor.setContent('<p>This is the content in TinyMCE!</p>');
});
}
...
});
I try to develop a theme for WordPress with jQuery Mobile.
But I have a problem with comments. Comments are generated by WordPress as http://www.foo.bar/2012/03/post/#comment-62
Problem is the hastag (#) in Url, jQuery Mobie dislikes, I believe. :)
So far, I use following syntax, and my scripts work well...
jQuery('#page').live('pageinit', function() {
jQuery.mobile.ajaxEnabled = false;
});
I tried to apply data-ajax = "false" to my form, without result. Finally, I tried...
jQuery('#page').live('pageinit', function() {
jQuery.mobile.ajaxEnabled = false;
$('#commentform').bind('submit', function() {
jQuery.mobile.ajaxEnabled = true;
});
});
When my page reloads, my scripts are broken!
Any idea or advice would be greatly appreciate. :) I'm a beginner.
Thanks for your help.
Regards,
Vincent
You can specify JQM configuration in the mobileinit event. But this will disable ajax throughout.
$('document').bind('mobileinit', function () {
console.log("mobile init");
$.mobile.ajaxEnabled = false;
}).trigger('mobileinit');
//...
$('document').ready(function () {
// ...
});
Or you can add data-ajax="false" to the form tag without disabling ajax throughout.
<form data-ajax="false">
</form>
I have created an application for Facebook, but I want show all content in a dialog box like Facebook style. How? like this http://www.bigthink.it/wp-content/uploads/2010/06/fb-dialog-box.jpg
Your question is not clear. What content do you want to show? What type of dialog? Do you have any code that you can share?
If you just want to wrap some content in a fb-like dialog, then you can use the javascript sdk method FB.Dialog.create, it's not officially documented (as far as I'm aware), but it works.
Here's an example of use:
var fbDialog = null,
html = '<img src="http://www.bigthink.it/wp-content/uploads/2010/06/fb-dialog-box.jpg"/>',
params = {
display: "iframe",
content: html,
loader: true,
closeIcon: true,
visible: true,
onClose: function() {
FB.Dialog.remove(fbDialog);
}
}
fbDialog = FB.Dialog.create(params);
I'd like to submit a form in a Fancybox window for previewing purpose; this doesn't look so difficult, since a simple
$('#preview').fancybox({
ajax: {
type: "POST",
data: $('#form1').serialize()
}
});
Could do the job...
But things are never so easy, and a TinyMCE editor (jQuery version) adds trouble
I found out that the above code doesn't send the updated textarea content (don't know why), so it's unuseful for preview
I ended up with this:
$('#preview').click(function(e){
e.preventDefault();
$(this).fancybox({
ajax: {
type: "POST",
data: $('#form1').serialize()
}
});
})
That do the job, but only if I click twice che #preview anchor
Seems that the first click "updates" the textarea content, and the second click opens the Fancybox
Well, have you got better solutions? I googled around, but seems there's nothing for "submit a form in a preview fancybox window"...
Thanks in advance...
You request the textarea content, but the content does not seem to be up-to-date.
This is because the tinymce editor content is not inside the textarea but inside a contenteditable iframe. The former textarea is hidden. To update the hidden textarea you can use tinymce.triggerSave()
$('#preview').click(function(e){
e.preventDefault();
tinymce.triggerSave();
$(this).fancybox({
ajax: {
type: "POST",
data: $('#form1').serialize()
}
});
})
or get the tinymce content directly from the editor
$('#preview').click(function(e){
e.preventDefault();
$(this).fancybox({
ajax: {
type: "POST",
data: tinymce.get('form1').getContent();
}
});
})