I have the following script which works perfectly, except after the content is saved, the editor remains open. How can I close the TinyMCE editor in the save_onsavecallback callback?
tinymce.init({
selector: "#document",
inline: true,
plugins: ["advlist lists print preview anchor paste save"],
save_enablewhendirty: true,
save_onsavecallback: function() {
$.post('index.php?cid=stuff2fix',{task:"save",document:$("#document").html(),CSRF:$('#CSRF').val()});
//CLOSE EDITOR NOW
},
toolbar: "undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | save"
});
You need to know which instance of the mce to remove and then call .remove() on the instance. I have modified the code so it will remove tinemce after clicking save.
The site that helped me was http://www.tinymce.com/forum/viewtopic.php?id=9175
tinymce.init({
selector: "#document",
inline: true,
plugins: ["advlist lists print preview anchor paste save"],
save_enablewhendirty: true,
save_onsavecallback: function(inst) {
$.post('index.php?cid=stuff2fix',{task:"save",document:$("#document").html(),CSRF:$('#CSRF').val()});
inst.remove();
},
toolbar: "undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | save"
});
Related
<Editor
initialValue=""
value={value}
onInit={handleInit}
onEditorChange={handleUpdate}
onBeforeAddUndo={handleBeforeAddUndo}
init={{
selector: "textarea#file-picker",
file_browser_callback_types: "image",
file_picker_validator_handler: filePickerValidationCallback,
images_dataimg_filter: function (img) {
return !img.hasAttribute("internal-blob"); // blocks the upload of <img> elements with the attribute "internal-blob".
},
file_picker_callback: filePickerCallback,
file_browser_callback: function (field_name, url, type, win) {
console.log("file_browser_callback", field_name, url);
},
automatic_uploads: true,
pagebreak_separator: `<div class="page-break" style="page-break-after:always;"><span style="display:none;"> </span></div><p> </p>`,
plugins: [
"imagetools lists link image paste wordcount pagebreak image code fullscreen",
],
draggable_modal: true,
toolbar:
"fullscreen | code image pagebreak undo redo | formatselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent",
}}
/>;
the above code was my configuration for editor and image upload. i am getting data while input onchange but i need to get the callback and image data on save button event.
Hi all I have an error from tinymce when i try to call my function to edit something my tinymce is triggered but i have this error in my console
I use the last version
tinymce.min.js:9 Uncaught Error: Node cannot be null or undefined
at Object.vt [as fromDom] (tinymce.min.js:9)
I call my tinymce from a function like this.
_this.tinymceContextMenu();
/**
* tinymce Context Menu
*/
tinymceContextMenu: function() {
if (_this.config.showContextMenu == false) {
return false;
}
var _toolBar = ''; //'fontselect fontsizeselect bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | bullist numlist | link | unlink removeformat',
if (_this.config.showContextMenu_FontFamily == true) {
_toolBar += 'fontselect ';
}
if (_this.config.showContextMenu_FontSize == true) {
_toolBar += 'fontsizeselect ';
}
if (_this.config.showContextMenu_Bold == true) {
_toolBar += 'bold ';
}
if (_this.config.showContextMenu_Italic == true) {
_toolBar += 'italic ';
}
if (_this.config.showContextMenu_Underline == true) {
_toolBar += 'underline ';
}
if (_this.config.showContextMenu_Strikethrough == true) {
_toolBar += 'strikethrough ';
}
if (_this.config.showContextMenu_Hyperlink == true) {
_toolBar += 'link ';
}
console.log(tinymce);
//default options
_toolBar += ' | alignleft aligncenter alignright alignjustify | bullist numlist | forecolor backcolor | unlink removeformat ';
tinymce.init({
selector: '.email-editor-elements-sortable',
menubar: false,
inline: true,
toolbar: false,
plugins: [
'autolink',
'codesample',
'link',
'lists',
'media',
'quickbars',
"advlist autolink lists link image charmap print preview anchor",
"searchreplace visualblocks code fullscreen",
"insertdatetime media table paste imagetools wordcount"
],
quickbars_selection_toolbar: 'bold italic underline | undo redo | fontselect fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignfull | link image',
// quickbars_insert_toolbar: 'styleselect | quicktable image'
});
},
You are using inline editor, so try making a container for toolbar:
inline: true,
fixed_toolbar_container: "#my_div_for_toolbar",
tinymce and using image upload, I have modified my config and added image upload from system.This is working fine and got new tab upload and below is my config :
config: any = {
height: 250,
theme: 'modern',
// powerpaste advcode toc tinymcespellchecker a11ychecker mediaembed linkchecker help
plugins: 'print preview searchreplace autolink directionality visualblocks visualchars fullscreen image imagetools link media template codesample table charmap hr pagebreak nonbreaking anchor insertdatetime advlist lists textcolor wordcount contextmenu colorpicker textpattern',
toolbar: 'formatselect | bold italic strikethrough forecolor backcolor | link | alignleft aligncenter alignright alignjustify | numlist bullist outdent indent fontselect fontsizeselect | removeformat',
image_advtab: true,
imagetools_toolbar: 'rotateleft rotateright | flipv fliph | editimage imageoptions',
menubar: true,
statusbar: false,
images_upload_handler: (blobInfo, success, failure) => {
let firmuseracctid;
let loggedInUserData = JSON.parse((sessionStorage.getItem('userDetails')));
if (loggedInUserData && loggedInUserData.useracctid) {
firmuseracctid = loggedInUserData.useracctid
}
var formData;
formData = new FormData();
let s3signatureKey = 'path';
let headerImageName = blobInfo.filename();
let status: any = 0;
formData.append('status', status);
formData.append('signatureKey', s3signatureKey);
formData.append("file", blobInfo.blob(), blobInfo.filename());
//console.log(formData);
this.uploadFile(formData).subscribe(response => {
if (response) {
this.headerImageUrl = 'myURL';
success(this.headerImageUrl);
}
});
},
content_css: [
'//fonts.googleapis.com/css?family=Lato:300,300i,400,400i',
'//www.tinymce.com/css/codepen.min.css'
]
};
Now i need to add another tab where i have to load all images from my service side, For this how to add in config, Any help on this.
TinyMCE has no configuration option to create an entire UI for browsing your repository of images. To do this you have a few options.
TinyMCE makes two products that can do this for you:
MoxieManager
TinyDrive
There are 3rd party plugins that can do this for you such as:
Responsive File Manager
Roxy Fileman
Lastly you could choose to create your own file manager and use TinyMCE's APIs to interact with what you create (that is all the above tools do).
I am building a javascript (Backbone with Coffeescript) app and in this app I am using TinyMCE.
I am adding a new tag with contenteditable set to true but TinyMCE ignores it. How can I allow this attribute?
This is my code:
#App.module "Concerns", (Concerns, App, Backbone, Marionette, $, _) ->
Concerns.FormWysiwyg =
onDomRefresh: ->
tinymce.init
selector: '.wysiwyg'
height: 350
menubar: false
statusbar: false
plugins: [
'advlist autolink lists link image charmap print preview anchor'
'searchreplace visualblocks code fullscreen'
'insertdatetime media table contextmenu paste code'
]
extended_valid_elements: 'span[class|contenteditable]'
toolbar: 'bold italic | alignleft aligncenter alignright | bullist numlist outdent indent | link | editable'
setup: (editor) ->
editor.on 'change', ->
editor.save()
editor.addButton 'editable',
text: 'Editable'
icon: false
onclick: ->
ed = tinyMCE.activeEditor
content = ed.selection.getContent({'format':'html'})
new_selection_content = '<span class="editable yellow" contenteditable="true">' + content + '</span>'
ed.execCommand('insertHTML', false, new_selection_content)
I have the following code to use TinyMCE which all works except for the tablecontrols part.
Can anyone see where I'm going wrong?
tinymce.init({
selector: ".wysiwyg",
plugins: "textcolor,table",
menubar : false,
statusbar: false,
toolbar1: "bold italic underline | numlist bullist outdent indent | alignleft aligncenter alignright alignjustify | link",
toolbar2: "hr | fontselect | fontsizeselect | forecolor backcolor | tablecontrols",
setup: function(editor) {
editor.on('change', function(e) {
$(".wysiwyg").html(editor.getContent());
});
}
});
I think you should replace the comma in the plugins value with a space like
plugins: "textcolor table",
I'm using the following
....
plugins: "link image code paste table",
menubar: false,
toolbar1: "undo redo | bold italic | link image table | code",
....