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();
}
});
})
Related
This is simple enough in earlier version of tinyMCE, but I can't find a way to make it work in v6x (suggested answers here only apply to earlier versions, that I can see)
Here's my button:
tinymce.PluginManager.add('newButton', (editor, url) => {
editor.ui.registry.addButton('newButton', {
text: 'Click me',
enabled: true,
onAction: () => {
alert('You clicked me')
}
})
return {
getMetadata: () => ({
name: 'newButton',
url: ''
})
}
});
tinymce.init({
selector: "textarea",
plugins: "newButton",
toolbar1: "newButton"
});
This works fine - click the button and you get an alert telling you you have. What I want to do now is call this click event from code (JaveScript) - I was hoping
tinymce.activeEditor.buttons['newButton'].onclick();
would work, as it does for - say - the "code" plugin; i.e. add this plugin (and button) to the editor and calling
tinymce.activeEditor.buttons['code'].onclick();
simulates clicking the toolbar button. So... how can I "click" my own custon toolbar button?
[edit] well.. that last line did work, I swear it did. Now it doesn't. wt.. :(
This may not be the "right" way (well, I know it isn't!) but I've found a way that works :)
First, I need a way to identify/find my custom button. I figured out tinymce renders them as div elements, and using
var divs = document.querySelectorAll('button');
divs.forEach((div) => {
console.log(div.innerHTML);
})
I am able to identify it and find the HTML used - it is not graced with an id, but we can use the innerHTML property (as identified) to get it and then simulate a click- viz:
var divs = document.querySelectorAll('button');
divs.forEach((div) => {
// NB 'DOC' is the text property of my custom button
if (div.innerHTML === '<span class="tox-tbtn__select-label">DOC</span>') {
// now we can simulate a click on it:
var evt = new MouseEvent("click", {
view: window,
bubbles: true,
cancelable: true
});
div.dispatchEvent(evt);
return;
}
})
(Thanks to the second answer, by Derek, here:
How to simulate a mouse click using JavaScript?
for the simulate click code)
[edit] better to use a for-loop rather than forEach as there's no sensible way to break out of the latter - that "return" doesn't actually do anything.
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 want to introduce a new Control to TinyMce that I can use in the toolbar. In my case I want to add an icon control that can be placed at the start of the toolbar to differentiate between editors.
However there is almost no information about how to properly do this.
Finally I managed to come up with a way to properly do this.
First I introduce a new plugin icon (in icon/plugin.js) that registers a new control Icon. It uses a setting iconClass.
tinymce.PluginManager.add('icon', function() {
tinymce.ui.Icon = tinymce.ui.Widget.extend({
renderHtml: function () {
return '<span class="icon icon-' + this.settings.iconClass + '"> </span>';
}
});
});
Next I add a button facebook to the toolbar in the following way:
editor.addButton('facebook', {
type: 'icon',
iconClass: 'facebook-share'
});
Now I can add it to the toolbar specification:
tinymce.init({
toolbar: "facebook"
})
That's it! The new custom control should not render. The plugin code is only ran once; even if used multiple times.
I am new for extjs.
I am having one store in which i am having some data coming from json file.
I have created a form.
i want to save new data in that store through form.
How can I create button and submit form on that button's click?
please let me know.
Thanks in advance
If you're using ExtJS 4 and your form is bound to a 'model' instance, then you get get a reference to your model in your buttons click handler and call:
model.save();
Which will send a post request to the url defined as the proxy on the model class.
Post your code and perhaps we can be some more direct help.
In the API of ExtJS is a good example on how to create a Ext.form.Panel with a button. When you click on this button the form gets submitted.
This example doesn't work because it doesn't submit to a page but it is very configurable.
Snippet of the button+handler:
buttons: [{
text: 'Submit',
handler: function() {
var form = this.up('form').getForm();
if (form.isValid()) {
form.submit({
url: '', //this is the url where the form gets submitted
success: function(form, action) {
Ext.Msg.alert('Success', action.result.msg);
},
failure: function(form, action) {
Ext.Msg.alert('Failed', action.result.msg);
}
});
}
}
}]
I am asynchronously submitting my form using jquery and AJAX . Refer the code below
$("#save_report").click(function()
{
$.ajax({
url : actionOfForm,
type : $('#custom_targeting_param_form').attr("method"),
data : $('#custom_targeting_param_form').serialize(),
success : function(){
alert('Report Saved successfully');
$("#showOrExportCustomTargetingReport").val('showReport');
}
});
return false;
});
I have got a link in my html with the id save_report and on clicking the link an Ajax call is being made to the URL which is passed as the actionOfForm variable as shown above.
Till this everything is fine. But now I want to get a preloader image/text like loading.. while the form submission is taking place in the background . And I want to show it in an alert box , not on my html ...
as i am a new user sorry for not able to post the image, but i hope i am comprehendable
Once the form submission is done , the preloader image will be gone and replaced with the success message alert.
Can you please help me with this?
i think you can have your image in a div..intially hide it..
<div id="imgDiv" style="display:none"><img src="/img.png"/><div>
then on click on your link(on AJAX call)..show this div on top of page(you have to use some css property for this).like this-
$("#save_report").click(function()
{
$('#imgDiv').show();// show your loading image
$.ajax({
url : actionOfForm,
type : $('#custom_targeting_param_form').attr("method"),
data : $('#custom_targeting_param_form').serialize(),
success : function(){
alert('Report Saved successfully');
$('#imgDiv').hide();// hide your image after successful call
$("#showOrExportCustomTargetingReport").val('showReport');
}
});
return false;
});