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",
Related
I have test website (developing site) works on http and my editor loads without any issue but since i moved my app to main site which runs on https my editor stopped loading and I get this error in console:
ReferenceError: tinymce is not defined
Screenshots
http site
https site
Code
JavaScript
<script>
var editor_config = {
path_absolute : "/",
selector: "textarea.editor", //get class name "editor"
plugins: [
"advlist autolink lists link image charmap print preview hr anchor pagebreak",
"searchreplace wordcount visualblocks visualchars code fullscreen",
"insertdatetime media nonbreaking save table contextmenu directionality",
"emoticons template paste textcolor colorpicker textpattern codesample",
"fullpage toc tinymcespellchecker imagetools help"
],
toolbar: "insertfile undo redo | styleselect | bold italic strikethrough | alignleft aligncenter alignright alignjustify | ltr rtl | bullist numlist outdent indent removeformat formatselect| link image media | emoticons charmap | code codesample | forecolor backcolor",
external_plugins: { "nanospell": "https://www.mysiteurl.com/js/tinymce/plugins/nanospell/plugin.js" },
nanospell_server:"php",
browser_spellcheck: true,
relative_urls: true,
remove_script_host: false,
branding: false,
file_browser_callback : function(field_name, url, type, win) {
var x = window.innerWidth || document.documentElement.clientWidth || document.getElementsByTagName('body')[0].clientWidth;
var y = window.innerHeight|| document.documentElement.clientHeight|| document.getElementsByTagName('body')[0].clientHeight;
var cmsURL = editor_config.path_absolute + 'laravel-filemanager?field_name=' + field_name;
if (type == 'image') {
cmsURL = cmsURL + "&type=Images";
} else {
cmsURL = cmsURL + "&type=Files";
}
tinymce.activeEditor.windowManager.open({
file: '<?= route('elfinder.tinymce4') ?>',// use an absolute path!
title: 'File manager',
width: 900,
height: 450,
resizable: 'yes'
}, {
setUrl: function (url) {
win.document.getElementById(field_name).value = url;
}
});
}
};
tinymce.init(editor_config);
</script>
<script>
{!! \File::get(base_path('vendor/barryvdh/laravel-elfinder/resources/assets/js/standalonepopup.js')) !!}
</script>
Note: error refers to this line tinymce.init(editor_config);
Blade
{{Form::textarea('short_description', null, array('class' => 'form-control editor'))}}
Help would be appreciated!
SOLVED
I download again tinymce and reupload js files, now is loading without issue.
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 use jsPanel to have kind of modal windows appearing on my site.
On jsPanel init, I specify content with a textarea, and a callback function.
Once my jsPanel is created, I try to initialise a tinyMCE in the callback. I test tinyMCE instances and my editor is in the listing of instances... but in the jsPanel it displays as a normal textarea, not as a tinyMCE.
Any idea ?
Here is the code :
function oninitjspanel()
{
console.log('before init modal mce');
tinymce.init({
selector: "#email_message",
entity_encoding : "raw",
encoding: "UTF-8",
theme: "modern",
height: "100%",
width: "100%",
plugins: [
"advlist autolink lists link image charmap print preview hr anchor pagebreak",
"searchreplace wordcount visualblocks visualchars code fullscreen",
"insertdatetime media nonbreaking save table contextmenu directionality",
"emoticons template paste textcolor colorpicker textpattern"
],
toolbar1: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image preview media | forecolor backcolor emoticons",
image_advtab: true,
});
console.log('after init modal mce');
for (var i = 0; i < tinymce.editors.length; i++)
{
console.log(i + " Editor id:", tinymce.editors[i].id);
}
}
$('#new_document').click (function () {
var content = '<div id="choix_document"><textarea id="email_message"></textarea></div>';
$.jsPanel({
content: content,
position: "center",
theme: "success",
title: "Nouveau document/email",
size: { width: function(){ return $(window).width()*0.75 },
height: function(){ return $(window).height()*0.75 } },
toolbarFooter: "<div class='email_submit'>Envoyer email</div><div id='email_returnmessage'></div>",
callback: oninitjspanel(),
});
});
The console log :
before init modal mce
after init modal mce
0 Editor id: model_editor
1 Editor id: email_message
EDIT : one more thing, as tinyMCE have focus issues in modals, I apply at my page loading the following to prevent the issue :
$(document).on('focusin', function(e) {
if ($(e.target).closest(".mce-window, .moxman-window").length) {
e.stopImmediatePropagation();
}
});
Just take a look at https://github.com/Flyer53/jsPanel/issues/51
But I guess you're the one asking the same question on GitHub's the jsPanel issues page anyhow?
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"
});
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",
....